スタイルシート属性 text-decoration は、テキストの装飾を指定します。下線の位置を指定するにはCSSスタイルシート属性 text-underline-position を使用します。
すべての要素に対して指定可能。
text-decoration: line style color thickness
値 | 意味 |
---|---|
none | なし |
underline | 下線 |
overline | 上線 |
line-through | 打ち消し線 |
blink | 点滅 |
<span style="text-decoration: none">none</span>
<span style="text-decoration: underline">underline</span>
<span style="text-decoration: overline">overline</span>
<span style="text-decoration: line-through">line-through</span>
<span style="text-decoration: blink">blink</span>
none
underline
overline
line-through
blink
値 | 意味 |
---|---|
solid | 線 |
double | 二重線 |
dotted | 点線 |
dashed | 破線 |
wavy | 波線 |
<span style="text-decoration: line-through double;">example</span>
example
<span style="text-decoration: line-through red;">example</span>
example
<span style="text-decoration: line-through 4px;">example</span>
example
スタイルシート属性 text-decoration の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。
<p style="text-decoration: underline overline line-through">サンプル</p>
サンプル
下線の場所を指定します。下線を引くにはCSSスタイルシート属性 text-decoration を使用します。
text-underline-position: position
値 | 意味 |
---|---|
auto | 自動 |
under | 下側 |
left | 左側 |
right | 右側 |
<span style="text-decoration: underline; text-underline-position: right;">example</span>
example
次にスタイルシート属性 text-underline-position を使用したHTMLの例を示します。
<p style="writing-mode: vertical-rl;">
ここが
<span style="text-decoration: underline; text-underline-position: right;">重要</span>
です。
</p>
ここが重要です。
<p style="writing-mode: vertical-rl;">
ここが
<span style="text-decoration: underline; text-underline-position: left;">重要</span>
です。
</p>
ここが重要です。
text-decoration-line はテキストを装飾する線の種類を指定するCSSプロパティである。
text-decoration-line: line
値 | 意味 |
---|---|
none | なし |
underline | 下線 |
overline | 上線 |
line-through | 打ち消し線 |
blink | 点滅 |
<span style="text-decoration: none">none</span>
<span style="text-decoration: underline">underline</span>
<span style="text-decoration: overline">overline</span>
<span style="text-decoration: line-through">line-through</span>
<span style="text-decoration: blink">blink</span>
none
underline
overline
line-through
blink
text-decoration-style: style
値 | 意味 |
---|---|
solid | 線 |
double | 二重線 |
dotted | 点線 |
dashed | 破線 |
wavy | 波線 |
<span style="text-decoration-line: underline; text-decoration-style: dotted">dotted</span>
<span style="text-decoration-line: underline; text-decoration-style: dashed">dashed</span>
<span style="text-decoration-line: underline; text-decoration-style: solid">solid</span>
<span style="text-decoration-line: underline; text-decoration-style: double">double</span>
dotted dashed solid double
text-decoration-color はテキストを装飾する色を指定するCSSプロパティである。
text-decoration-color: color
<span style="text-decoration-line: underline; text-decoration-color: red">red</span>
<span style="text-decoration-line: underline; text-decoration-color: green">green</span>
<span style="text-decoration-line: underline; text-decoration-color: rblueed">blue</span>
red green blue
World Wide Web Consortium (2022) CSS Text Decoration Module Level 3