| 項 目 | 説 明 |
|---|---|
| 記述形式 |
|
| 値 の形式 | text-decoration-line text-decoration-style text-decoration-color （順不同でブランクで区切る） |
| 初 期 値 | none |
| 対応ブラウザー | C1+ / e3+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
| 適用可能な要素 | すべての要素 |
| 継 承 | しない |
text-decorationプロパティ は，CSS3 で大幅な機能拡張が行われ，テキストの下線・上線・打消し線・点滅に関する text-decoration-line，text-decoration-style， text-decoration-color の３つのプロパティを一括して指定します。
ただし，text-decoration-style と text-decoration-color の２つのプロパティを指定しない場合には，CSS2.1 までの text-decoration プロパティ と互換になるようになっています。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| text-decoration-line | テキストの下線・上線・打消し線・点滅の別を指定します。 （必須） |
| text-decoration-style | テキストの下線・上線・打消し線・点滅の線種を指定します。 （省略可） |
| text-decoration-color | テキストの下線・上線・打消し線・点滅の表示色を指定します。 （省略可） |
なお，text-decoration-line プロパティの blink については，IE8 や IE9 は未対応であるので，注意が必要です。
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css"> <!-- p.decr01 { text-decoration: none; } p.decr02 { text-decoration: underline; } p.decr03 { text-decoration: underline solid; } p.decr04 { text-decoration: underline solid red; } p.decr05 { text-decoration: underline solid green; } p.decr06 { text-decoration: underline solid blue; } p.decr07 { text-decoration: underline double; } p.decr08 { text-decoration: underline dotted; } p.decr09 { text-decoration: underline dashed; } p.decr10 { text-decoration: underline wavy; } p.decr11 { text-decoration: overline; } p.decr12 { text-decoration: line-through; } p.decr13 { text-decoration: blink; } p.decr14 { text-decoration: underline overline line-through; } --> </style> |
| HTML <body> ～ </body> |
<p class="decr01"><b>none:</b> 線は付かず，点滅もしません。 初期値。</p> <p class="decr02"><b>underline:</b> 下線が付きます。</p> <p class="decr03"><b>underline solid:</b> 実線で下線が付きます。</p> <p class="decr04"><b>underline solid red:</b> 実線で赤の下線が付きます。</p> <p class="decr05"><b>underline solid green:</b> 実線で緑の下線が付きます。</p> <p class="decr06"><b>underline solid blue:</b> 実線で青の下線が付きます。</p> <p class="decr07"><b>underline double:</b> ２重線の下線が付きます。</p> <p class="decr08"><b>underline dotted:</b> 点線の下線が付きます。</p> <p class="decr09"><b>underline dashed:</b> 破線の下線が付きます。</p> <p class="decr10"><b>underline wavy:</b> 波線の下線が付きます。</p> <p class="decr11"><b>overline:</b> 上線が付きます。</p> <p class="decr12"><b>line-through:</b> 打ち消し線が付きます。</p> <p class="decr13"><b>blink:</b> Firefox・Opera の以前のバージョンでは点滅します。</p> <p class="decr14"><b>underline overline line-throughk:</b> 下線・上線・打ち消し線が付きます。</p> |
| ブラウザー 表示例 （未対応のブラウザーでは正しく表示できません） |
|---|
| none: 線は付かず，点滅もしません。 初期値。 underline: 下線が付きます。 underline solid: 実線で下線が付きます。 underline solid red: 実線で赤の下線が付きます。 underline solid green: 実線で緑の下線が付きます。 underline solid blue: 実線で青の下線が付きます。 underline double: ２重線の下線が付きます。 underline dotted: 点線の下線が付きます。 underline dashed: 破線の下線が付きます。 underline wavy: 波線の下線が付きます。 overline: 上線が付きます。 line-through: 打ち消し線が付きます。 blink: Firefox・Opera の以前のバージョンでは点滅します。 underline overline line-throughk: 下線・上線・打ち消し線が付きます。 |