| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {text-decoration-style: 値 } |
| 値 の形式 | solid，double，dotted，dashed，wavy |
| 初 期 値 | solid |
| 対応ブラウザー | C?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+ |
| 適用可能な要素 | すべての要素 |
| 継 承 | しない |
text-decoration-styleプロパティ は，テキストの下線・上線・打消し線・点滅に関して線種を指定します。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| solid | 実線で表示します。 （初期値） |
| double | ２重線で表示します。 |
| dotted | 点線で表示します |
| dashed | 破線で表示します |
| wavy | 波線で表示します |
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css"> <!-- p.decr1 { text-decoration-line: underline; text-decoration-style: solid; } p.decr2 { text-decoration-line: underline; text-decoration-style: double; } p.decr3 { text-decoration-line: underline; text-decoration-style: dotted; } p.decr4 { text-decoration-line: underline; text-decoration-style: dashed; } p.decr5 { text-decoration-line: underline; text-decoration-style: wavy; } --> </style> |
| HTML <body> ～ </body> |
<p class="decr1"><b>solid:</b> 実線で下線が付きます。</p> <p class="decr2"><b>double:</b> ２重線の下線が付きます。</p> <p class="decr3"><b>dotted:</b> 点線の下線が付きます。</p> <p class="decr4"><b>dashed:</b> 破線の下線が付きます。</p> <p class="decr5"><b>wavy:</b> 波線の下線が付きます。</p> |
| ブラウザー 表示例 （未対応のブラウザーでは正しく表示できません） |
|---|
| solid: 実線で下線が付きます。 double: ２重線の下線が付きます。 dotted: 点線の下線が付きます。 dashed: 破線の下線が付きます。 wavy: 波線の下線が付きます。 |