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

●擬似クラスの下線を非表示にする

 リンク部分の下線を意図的に非表示にすることもできます。ここでは a要素+擬似クラスを例に解説します。link〜activeの各擬似クラスの書式に text-decoration プロパティを付加し、値に"none"を指定すれば非表示に"underline"を指 定すればアンダーラインが付きます。(ただし、むやみに下線を消してしまってはユーザーが混乱してしまいます。)通常は text-decorationプロパティを付加しなくてもリンクの下線は付加されます。

【サンプル】↓(リンク先はここの解説と関連のある参考URLにしました)

リンク部分に色を指定する

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

下線、上線、取り消し線、点滅の装飾

※ここでは hoverの擬似クラス以外、意図的に下線を非表示にしています。なお、 a { text-decoration: none; } と一括して、 a要素(リンクまたはアンカー)に適用させることもできます。

【CSS】

a:link {
 color: #b2ffff;
 text-decoration: none;
}
a:visited {
 color: #ffffff;
 text-decoration: none;
}
a:hover {
 color: #d57ba8;
 text-decoration: underline;
}
a:active {
 color: #ff00ff;
 text-decoration: none;
}

【HTML(XHTML)】

<p><a href="リンク先のURL">リンク部分に色を指定する</a></p>
<p><a href="リンク先のURL">リンク部分に色を指定する(応用編)</a></p>
<p><a href="リンク先のURL">下線、上線、取り消し線、点滅の装飾</a></p>

【バグについて】

 この指定方法によるブラウザ別のバグはありませんが、text-decorationプロパティで指定する値によっては、対応していないブラウザはあります。※text-decorationプロパティにつきましては、上記の「下線、上線、取り消し線、点滅の装飾」をご参照。

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

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