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

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

 text-decoration は下線、上線、取り消し(打ち消し)線、点滅などの文字装飾するときに使われるプロパティです。値には none、underline、overline、line-through、blink を指定することができます。また、すべての要素に適用できます。ただし、blink はNスケープ(version7以上)、オペラ(version6以上)などに有効。対応するか否かはブラウザの種類によります。

※値は半角スペースで区切り、複数指定することもできます。(順不同)

none:装飾なし

underline:下線

overline:上線

line-through:取り消し線

blink:点滅のことで、文字の表示、非表示を繰り返す。(Win IE 不可)


【CSS】

#sample1 {
 text-decoration: none;
}
#sample2 {
 text-decoration: underline;
}
#sample3 {
 text-decoration: overline;
}
#sample4 {
 text-decoration: line-through;
}
#sample5 {
 text-decoration: blink;
}


【HTML】

<p id="sample1">none:装飾なし</p>
<p id="sample2">underline:下線</p>
<p id="sample3">overline:上線</p>
<p id="sample4">line-through:取り消し線</p>
<p id="sample5">blink:点滅のことで、文字の表示、非表示を繰り返す。(Win IE 不可)</p>

※ここでは id名を使って指定していますが、クラス名を使うこともできます。なお、id名はページの一個所しか使えません。複数指定したい場合はクラス名を使ってください。


 ■リンクに適用させた応用例

 text-decoration をリンクに指定し、通常表示されるリンクの下線を非表示(および、表示)させることもできます。

【CSS】

a {
 text-decoration: none
}

【解説】

 ページ全体のすべてのリンク部分の下線を非表示にします。


【CSS】

a {
 text-decoration: none;
}
a:link {
 color: #d4f3ff;
 background: #4b6000;
}
a:visited {
 color: #ffffff;
 background: #4b6000;
}
a:hover {
 color: #ff00ff;
 background: #ffffff;
 text-decoration: underline overline;
}
a:active {
 color: #ff0000;
}

【解説】

 最初に、a { text-decoration: none; } と指定し、各リンク部分(link、visited、hover、active)の下線を非表示にしています。その上で、hover(ポインタをリンク部分にポイントしたとき) に underline、overline の値を新たに指定し、下線と上線を同時に表示させています。

XHTML/CSS・目次 | テキスト・目次

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