CSS3: text-decoration-line プロパティ - テキストの下線・上線・打消し線・点滅

■ 概要

項　　目説　　明
記述形式 セレクタ {text-decoration-line: 値 }
値 の形式 none，underline，overline，line-through，blink
初 期 値 none
対応ブラウザー C1+ / e3+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+
適用可能な要素 すべての要素
継　　承 しない

■ 解説

CSS2.1 までの text-decorationプロパティ の機能は，CSS3では text-decoration-lineプロパティ に移行になりました。

text-decoration-lineプロパティ は，テキストの下線・上線・打消し線・点滅を指定します。　これらのうちの複数の同時指定もできます。

指定できる値の形式は，以下のとおりです。

値説　　明
none 線をつけたり，点滅したりしません。　（初期値）
underline 下線を引きます。
overline 上線を引きます。
line-through 打消し線を引きます。
blink 点滅させます。

現時点では，対応しているブラウザーは少ないので，互換性のある text-decoration プロパティ を使用する方がよい と思われます。

■ 使用例（ text-decoration-lineプロパティの利用）

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css">
<!-- 
   p.decr1 { text-decoration-line: none; }
   p.decr2 { text-decoration-line: underline; }
   p.decr3 { text-decoration-line: overline; }
   p.decr4 { text-decoration-line: line-through; }
   p.decr5 { text-decoration-line: blink; }
   p.decr6 { text-decoration-line: underline overline line-through; }
-->
</style>
HTML
<body> ～ </body>		 
 <p class="decr1"><b>none:</b> 線は付かず，点滅もしません。　初期値。</p>
 <p class="decr2"><b>underline:</b> 下線が付きます。</p>
 <p class="decr3"><b>overline:</b> 上線が付きます。</p>
 <p class="decr4"><b>line-through:</b> 打ち消し線が付きます。</p>
 <p class="decr5"><b>blink:</b> Firefox・Opera の以前のバージョンでは点滅します。</p>
 <p class="decr6"><b>underline overline line-throughk:</b>
    下線・上線・打ち消し線が付きます。</p>

ブラウザー 表示例　（未対応のブラウザーでは正しく表示できません）

none: 線は付かず，点滅もしません。　初期値。

underline: 下線が付きます。

overline: 上線が付きます。

line-through: 打ち消し線が付きます。

blink: Firefox・Opera の以前のバージョンでは点滅します。

underline overline line-throughk: 下線・上線・打ち消し線が付きます。

■ 備考

【参考ページ】