リンクの装飾

CSSの擬似クラスを用いたリンクの装飾について見ていきましょう。 まずは、擬似クラスの指定方法です。

上記は擬似クラス別に文字の色を変える指定です。 この擬似クラスというのは、要素の状態に応じて要素の表示を変えたいときに用います。 通常のクラス指定だと、状態に関係なく指定した要素の表示を変えるだけですが、擬似クラスによって状態によって表示を変えられるというわけで、JavaScriptなどを使わずに要素に動的な変化を加えることもできます。

CSSでは後に書いた指定の方が優先されるので、a:active はa:hoverより後に書いておかないとa:hoverの方が優先されて効果がなくなってしまいます。 必ず上記の順序で指定するようにしましょう。 また、hoverとactive はダイナミック擬似クラスと呼ばれ、Mozilla系のブラウザではa要素以外にも適用可能です。 （この場合、IEの方が標準とされている仕様と異なっています…というより、他の点でもIEの方が標準勧告に準拠していないことが多いです。）

それでは、具体的に見ていきましょう。 ここでは、分かりやすいようにaとa:hoverだけを取り上げてみてみます。 a:hover以外の擬似クラスを指定していないときは、a要素の指定が適用されます。 (bodyタグの属性で指定してあれば、それが適用されます）

1. 下線と色変化（text-decorationは文字の装飾のプロパティです。 noneで何もなし。underlineで下線が表示されます。）
   <style><!--a{text-decoration:none;color:aqua}a:hover{text-decoration:underline;color:yellow}--></style>
   リンク1
2. 背景色を変える（iらんどの場合は改行を抜いてください。）
   <style><!--a{text-decoration:none;color:white;background:blue;width:50%;height:2em;line-height:2.0;display:block;margin:auto} a:hover{background:red}--></style>
   リンク2
3. ボーダーを付ける
   <style><!--a{text-decoration:none}a:hover{border-style:outset;border-width:2px;border-color:white}--></style>
   リンク3
4. 文字を大きくする
   <style><!--a:hover{font-size:xx-large}--></style>
   リンク4
5. 文字を太くする
   <style><!--a:hover{font-weight:bold}--></style>
   リンク5
6. 文字を斜体にする
   <style><!--a:hover{font-style:italic}--></style>
   リンク6
7. 文字間隔を拡げる
   <style><!--a:hover{letter-spacing:5px}--></style>
   リンク7

他にもいろいろできるので、自分でCSSの本やサイトを見て工夫してみましょう。