text-decoration

Updated / Published

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

値
  • none
  • underline
  • overline
  • line-through
  • blink
  • inherit
初期値
none
適用対象
すべての要素
継承
しない
メディア
visual

text-decorationプロパティの値

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

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

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

IE
◯："blink" の値は未サポート
Firefox
◯："blink" の値をFirefox23+よりサポートしない
Opera
◯："blink" の値をOpera15+よりサポートしない
Chrome
◯："blink" の値は未サポート
Safari
◯："blink" の値は未サポート
iOS
◯："blink" の値は未サポート
Android
◯："blink" の値は未サポート

仕様では"blink"の値をサポートしていなくても CSS適合 UA と認められる（つまり、必ずしも対応する必要性はないということ）とあり、現に最新のUAはすべてこの値をサポートしていません。そしてサポートしていたUAも、この値のサポートをやめています。なぜならこの表現は、多くのユーザにとって情報の視認性と判読性を低下させているだけの迷惑な表現にしか思われません。また早い周期での画面の点滅は、感受性発作（光源性てんかん）を起こしうるような、ユーザの健康をも害する恐れがあります。そのため、アクセシビリティ・ガイドライン1.0 CSS技術書においても規則的に表示されたり消えたりというような表現は別の表現に変更する とあり、仕様に定義されていても不要な機能の位置づけであり、このような表現を使うことそのものがおすすめできません。

サンプル

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 ; }