text-decoration

CSSプロパティ「text-decoration」の解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

text-decoration

テキストのライン装飾を指定するプロパティ。

値により、下線(underline)、上線(overline)、取消線(line-through)を指定することができ、また、自動的に付けられるアンカーテキストの下線を消す(none)ことができる。

underline 下線を引く。
overline 上線を引く。
line-through 取消線を引く。
none ライン装飾を非表示にする。リンク部以外はこれが初期値となる。

使用例 - サンプル(A) / サンプル(B) / サンプル(C)

サンプル(A)

[CSSの記述]

.sampleA { text-decoration:underline; }

[HTMLの記述]

<p class="sampleA" />テキストテキストテキスト</p>

[ブラウザ上の表示]

テキストに下線を指定。

サンプル(B)

[CSSの記述]

.sampleA { text-decoration:line-through; }

[HTMLの記述]

<p class="sampleB" />テキストテキストテキスト</p>

[ブラウザ上の表示]

テキストに取消線を指定。

サンプル(C)

[CSSの記述]

div.sampleC a { text-decoration:none; }

[HTMLの記述]

<p class="sampleC">
<a href="http://css.uka-p.com/">テキストテキスト</a>
</p>

[ブラウザ上の表示]

アンカーテキストの下線を消す。