リンクにマウスカーソルを合わせると、そのリンクを斜体にしたり、背景色を変えたりできる。未訪問リンク(link)と訪問済みリンク(vlink)、それに読み込み中のリンク(alink)の文字色はボディタグ内で指定できるが、スタイルシートを使うともっと細かいところまで指定できるし、JavaScriptを使うとリンク以外の部分にも同じことができる。
a要素の擬似クラスにスタイルシートを指定する。未訪問リンクはa:link
、訪問済みリンクはa:visited
、カーソルが重なった時のリンクはa:hover
、アクティブになった時のリンクはa:active
、で、この順番で指定すると色々と変更できる。例えば下のように、カーソルが重なった時のリンクの文字色を赤、背景色をaqua、フォントのスタイルを斜体、下線をあり、に指定するとこうなる。
a:hover { color:#ff0000; background-color:aqua; font-style:italic; text-decoration:underline; }
ただし、閲覧者がその部分がリンクであることやそのリンク先を訪問したかどうかなどを判断するのは、リンクのスタイル(色やアンダーラインの有無等)を見て、が基本なので、それが分かりにくいようなスタイルの指定は避けた方がいい(これはリンクに画像やFlash、JavaScriptを使用する場合にも言える)。ページのデザインには画像やスタイルシートは有用だが、アクセシビリティやユーザビリティを考えて使用することが大切でしょう。
a要素に限らずほとんどの要素に使えるborderプロパティを使用してみる。結構いじり甲斐があります。
例その1 枠を二重線で表示。枠の太さを3px以上にしないと二重線にならないので注意。
a:link { color:#9933cc; background-color:#ffffff; text-decoration:none; border:double 4px #ff69b4; }
例その2 枠の太さを2pxにして少しだけ厚みのあるプレート風に。ちょっと画像っぽい。
a:link { color:#ffffff; background-color:#009900; font-weight:bold; text-decoration:none; border:outset 2px #00cc66; }
例その3 枠を破線で表示。可愛いかも。
a:link { color:#0066ff; background-color:#afeeee; font-weight:bold; text-decoration:none; border:dashed 4px #00ccff; }
background-imageプロパティでリンクの背景に画像を指定してみる。背景にアニメーションGIFを指定するとこんなこともできちゃう。Operaには背景のアニメーションGIFは1コマ目の画像しか表示されないというバグがあるようです(ver7.22では改善されています)。
使用例その1 背景画像はAnimation GIF Makerで作った20x20ピクセルの856バイトのカラーテーブルアニメーションGIF。これが左上から縦横にタイル状に並ぶようになっている。それに、borderプロパティで枠をつけてみた。
a:hover { color:#ff0000; background-color:transparent; text-decoration:none; border:solid red 1px; background-image:url("bgred002.gif"); background-repeat:repeat; background-position:0% 0%; }
使用例その2だぴょん リンクのアンダーラインを画像にしてみる。それだけじゃ意味ないから動かしてしまえ。背景画像はAnimation GIF Makerで作った150x1ピクセルの373バイトのアニメーションGIF。これが左下から横にだけ繰り返し並ぶようになっている。だぴょんは気にしない。
a:hover { color:#ff0000; background-color:transparent; text-decoration:none; background-image:url("bgline001.gif"); background-repeat:repeat-x; background-position:0% 100%; }