Go to information

text-decoration

text-decorationプロパティはテキストに下線、上線、打ち消し線、点滅などの装飾を施します。適用対象にはなっても、置換要素に対する指定は無効です。装飾ラインの色は colorプロパティで指定します。

初期値
none
適用対象
すべての要素
継承
しない
メディア
visual

text-decorationプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。半角スペースで区切って、2つ以上のキーワードを指定することも可能です。

none
テキストの装飾を施さない(ただし、親要素の装飾を無効化することはできない)
underline
テキストに下線を引く(u要素の効果に類似)
overline
テキストに上線を引く
line-through
テキストの中央に打ち消し線を引く(del要素, s要素, strike要素の効果に類似)
blink
テキストを点滅させる(blink要素の効果に類似)

"blink" に対応しているのは Netscape, Firefox, Opera のみです。仕様ではこの値をサポートしていなくても CSS適合 UA と認められる(つまり、必ずしも対応する必要性はないということ)とあり、アクセシビリティ・ガイドライン1.0 CSS技術書においても規則的に表示されたり消えたりというような表現は別の表現に変更する とあります。つまり、仕様に定義されていても不要な機能の位置づけであり、多くのユーザーにとっても文字をチカチカと点滅させる表現は情報の視認性と判読性を低下させるだけの迷惑な表現でしかなく、このような表現を使うこと自体お奨めできません。

継承性ないが効果は継承される

仕様には text-decorationプロパティは値を子孫要素に継承しないと定義されているのですが、ブロック要素に指定された場合は子孫要素のインラインボックスにはすべて同じ装飾を施されるべきとあります。では、ちょっとした問題を用意しました。次のサンプルの span要素内のテキストには一体どのような装飾が施されるのかを考えてみてください。

<p style="color : red ; text-decoration : underline ;">
<span style="color : blue ; text-decoration : none ;">
このテキストの装飾は一体どうなるの?</span></p>
  1. span要素内のテキストには、装飾を施さない指定があるため下線は引かれない
  2. span要素内のテキストに下線が引かれ、下線の色は span要素の前景色と同じ青色になる
  3. sapn要素内のテキストに下線が引かれ、下線の色は p要素で定義されていた赤色になる

この3択の中に正解があるわけですが、正解はなんと3番です。テキストには下線が引かれ、下線の色はブロック要素である p要素で定義されていた赤色になります。つまり、子孫要素に装飾を施さない指定があっても、親要素にて定義されていた装飾はすべての子孫要素に同じように反映され、子孫要素に個別に文字色が指定されていても、装飾ラインの色は同じ色にはならず、装飾ラインの色を変えるのであれば、子孫要素で個別に text-decorationプロパティを再定義しなければならないのです。

このテキストの装飾は一体どうなるの?

このように text-decorationプロパティには値の継承性はありませんが、指定されている装飾の効果は子孫要素へと継承されることになります。

text-decorationプロパティの実装状況

Windows版Internet Explorer
○("blink" の値は未実装)
Firefox
Opera
Safari
○("blink" の値は未実装)
Macintosh版Internet Explorer 5
○("blink" の値は未実装)

サンプル

記述例
a:hover       { text-decoration : none ; }
.underline    { text-decoration : underline ; }
.overline     { text-decoration : overline ; }
.line-through { text-decoration : line-through ; }
.blink        { text-decoration : blink ; }
.doubleline   { text-decoration : underline overline ; }
表示例
現在位置
  1. W3G
  2. CSS
  3. テキスト
  4. text-decoration
ナビゲーション
ステータス情報
作者
上田 遼
公開
2007-02-02T16:55:15+09:00
更新
2008-12-29T04:30:40+09:00
URI
http://w3g.jp/css/text/text-decoration
検索