XHTML/CSS・トップ | CSSプロパティ・目次

●リンク部分に色を指定する(応用編)

 同じページ内の異なる領域(ボックス)または特定の範囲に異なるリンク色を(CSSのスタイルシートで)指定したい場合の解説です。

【サンプル1】

リンクA | リンクB | リンクC

【サンプル2】

リンク1 | リンク2 | リンク3

※注意:便宜上、リンク先(移動先)は「XHTML関連」と「文書情報」のページになっています。クリックして移動すると訪問済みリンク色(白を指定しています)になります。

【解説】

 サンプル1とサンプル2はリンク色や方法こそ違いますが、異なる領域(ボックス)、または特定の範囲に異なるリンク色を指定するという点では一致しています。ここではクラス(class)セレクタ、IDセレクタを使い分けていますが、どちらでも構いません。(ID名は1対(1個所)しか使えない)また、blend、original のID名、クラス名を使っていますが、本来は任意で名前を付けます。

 両者の違いはサンプル1のリンク指定がHTML(XHTML)文書において、要素にクラス名(またはID名)を指定するとその中に含まれるリンク色すべてにスタイルシートで指定したリンク色が反映されます。サンプル2の方法はHTML(XHTML)文書のリンク部分の a要素に1つ1つクラス属性(またはID属性)を直接設置しています。

 実用例として例えば、CSSで幾つかの段組みを設け、その段組みごとに違うリンク色を配置したい場合などがあります。ただし、ユーザビリティの観点から、基点的にリンク色は同系色でまとめましょう。同じページに異なるリンクの配色が幾つもあってはユーザーは戸惑ってしまいます。(ソースは以下を参照にしてください。)

■バグについて

 Netscape 、Mozilla、Firefox が"visited"(すでに見たリンク色)の擬似クラスに対応していないのは普通のリンク指定のときと同じです。ウィンドウズ版IEと Opera はOKです。(そのほかのブラウザは未確認です。)

【サンプル1/CSS】

#blend a:link{
 color:#ff0;
 text-decoration:underline;
}
#blend a:visited{
 color:#fff;
 text-decoration:underline;
}
#blend a:hover{
 color:#999;
 text-decoration:none;
}
#blend a:active{
 color:#fff;
 text-decoration:underline;
}

【サンプル1/HTML(XHTML)】

<p id="blend"><a href="リンク先URL">リンクA</a> | <a href="リンク先URL">リンクB</a> | <a href="リンク先URL">リンクC</a></p>

【サンプル2/CSS】

a.original:link{
 color:#f0f;
 text-decoration:underline;
}
a.original:visited{
color:#fff;
text-decoration:underline;
}
a.original:hover{
 background: #fff;
 color:#00f;
 text-decoration:none;
}
a.original:active{
 color:#f00;
 text-decoration:underline;
}

【サンプル2/HTML(XHTML)】

<p><a href="リンク先URL" class="original">リンク1</a> | <a href="リンク先URL" class="original">リンク2</a> | <a href="リンク先URL" class="original">リンク3</a></p>

XHTML/CSS・目次 | リンク(擬似クラス)・目次

Copyright (C) 2006-2007 http://www.xml.vc/