3-2.link

第3章　スタイルシートの使い方

3-2.リンク

BODYタグでリンクの色を設定する場合は次の属性を使います。

LINK :リンクされている文字色
ALINK:リンク中（Active)の文字色
VLINK:訪問済み（Visited)の文字色

通常の設定

HTMLファイルで、BODY要素で次のような設定を考えます。

<body link=blue alink=red vlink=purple>

スタイルシートでは、次のようになります。

a:link      { color : blue  ;}
a:active    { color : red   ;}
a:visited   { color : purple;}

ちょっと応用

リンクしている下線を表示させたくなければ、次のようにします。

a:link      { color : blue  ;   text-decoration : none ;}
a:active    { color : red   ;   text-decoration : none ;}
a:visited   { color : purple;   text-decoration : none ;}

かなり応用

リンクしている下線を常に表示させる場合は、text-decoration : underline; とすればいいんですが、これだと困ったことに、<a name="kokodayo">ページ内リンク</a>としたときにページ内リンクと下線が入ってしまいます。

このようにさせないために、たんくろはこんな風にクラスセレクタを利用することがあります。

a:link      { color : blue     ; }
a:active    { color : red      ; }
a:visited   { color : purple   ; }
a.hidden    { text-decoration : none; }

HTMLファイルではこのようにAタグにクラス属性を付け加えることで、下線を表示させないようにしています。

<H3>ページ内リンク<a name="kokodayo" class="hidden">　</a></H3>

裏技ではないけども

CSS2のダイナミック擬似クラスhoverを利用して、カーソルがリンク上にある時にだけ反応させることができます。次の例では、カーソルが上にくるとフォント色を赤、アンダーライン、ボールド体にすることができます。

a:hover  {
	color           : red  ;
	text-decoration : none ;
	font-weight     : bold ; 
}

現在のところ、A:hoverはIE4以上およびNetscape6でのみ効果があります。