【text-decoration】下線・上線・取消線・点滅を付ける

text-decorationプロパティではテキストに対して、下線や上線、または取消線(打ち消し線)を付けたり、点滅させるなどの装飾をすることができます。 さらに空白(半角スペース)で区切って複数の値を同時に指定する事などもできます。(指定する順序は任意)

またtext-decorationプロパティをブロックレベル要素に対して設定した場合は、そこに含まれるすべてのインライン要素に適用されます。 ですが、このtext-decorationは継承されるわけではありません。

反対にインライン要素に対して設定した場合は、その要素が生成するすべてのボックスに適用されます。

text-decorationでテキストに付けられる線の色は、colorプロパティで指定した色と同じになります。 そのため、その要素の子要素に異なる文字色を指定したとしても、線の色が部分的に変わる事はありません。 ただし一部の古いブラウザの中には、途中で線の色が変わるものがありますので注意して下さい。

なおテキストを点滅させるblinkですが、現在の一般的なブラウザではサポートがされていないため動作しないようです。 テキストを点滅させたい場合は、<BLINK>タグ、またはjavaを使う事で同様の表示ができます。

書式

  • text-decoration : ……… テキストを装飾する

★:none、underline、inherit、他下記参照

none
文字を装飾しない(初期値)
underline
文字に下線を付ける
overline
文字の上に線を付ける
line-through
文字に取消線(打ち消し線)を付ける
blink
文字を点滅させる

使用した時の例

.sample1 {text-decoration: none;}
.sample2 {text-decoration: underline;}
.sample3 {text-decoration: overline;}
.sample4 {text-decoration: line-through;}
.sample5 {text-decoration: blink;}
.sample6 {text-decoration: underline overline;}
.red {color: red;}
<div class="sample1">none(なし)</div>
<div class="sample2">underline(下線)</div>
<div class="sample3">overline(上線)</div>
<div class="sample4">line-through(取消線)</div>
<div class="sample5">blink(点滅)</div>
<div class="sample6">underline <span class="red">overline</span>(複数指定)</div>

ブラウザ上の表示例

none(なし)
underline(下線)
overline(上線)
line-through(取消線)
blink(点滅)
underline overline(複数指定)

対応ブラウザなどのデータ

初期値 none 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual / text
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~