けとけと。の自由帳

サイド自由欄

動画ページ
HOT!まいろ

< 新しい記事

新着記事一覧(全5592件)

過去の記事 >

2003年05月09日

リンクの表示の仕方

(31)

テーマ：ＨＴＭＬを使って楽天で何ができるのか．(160)

カテゴリ： HTML・スタイルシート

スタイルシートを使用します．

まずは，基本の下線を消す設定です．

エトーマート＠楽天広場

<A href="リンク先のアドレス" style=" text-decoration:none ">表示させる文字</A>

これは 2003年4月4日の日記で説明してあるスタイルシートの設定を使用しています．

さて，同じページに「文字色を指定」というのがありますね．

通常リンクすると表示する文字は，コチラのリンクの色設定で指定した色になります．

これを一時的に換えてみましょう．

通常のリンク色

指定したリンク色

<A href="リンク先のアドレス" style=" color:色 ">表示させる文字</A>

ここでスタイルシートの書き方のアドバイス．

; text-decoration:none"

このように「;(セミコロン)」で区切っていきます．

次に下線を変えてみましょう．

一度下線を消してから講座で紹介したボックスの設定を使用します．

下線なので bottom関係の設定を使います．

なるべく記述する内容を少なくするため昨日紹介した border-bottom を使用します．

点線で太さを5ドット

<A href="リンク先のアドレス" style=" text-decoration:none;border-bottom:5px dotted ">表示させる文字</A>

エトーマート＠楽天広場

太さ・線の種類・色の記述する順番を守れば今回のように値を省くこともできます．

下線以外にも

エトーマート＠楽天広場

<A href="リンク先のアドレス" style=" text-decoration:none;border:5px dotted ">表示させる文字</A>

周りに枠をつけるとまた変わったリンクができますね．

スタイルシートだから表示文字の範囲に背景色の指定も可能です．

エトーマート＠楽天広場

<A href="リンク先のアドレス" style=" text-decoration:none;background:pink

マウスをかざしたら背景色は変わるのはまた別の方法なので今回説明は省かせてもらいます．

どうですか，スタイルシートの機能は？

HTMLタグの中に指定する事で表示の仕方を変える事ができます．

講座の方もまだまだ続きますのでよろしくです（＾＾）

お気に入りの記事を「いいね！」で応援しよう