CSS text-decoration

スタイルシート属性 text-decoration は、テキストの装飾を指定します。下線の位置を指定するにはCSSスタイルシート属性 text-underline-position を使用します。

すべての要素に対して指定可能。

書式

text-decoration: line style color thickness

属性値

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
style
線のスタイルを指定する。
値意味
solid線
double二重線
dotted点線
dashed破線
wavy波線
 
<span style="text-decoration: line-through double;">example</span>

example

color
線の色を指定する。 
<span style="text-decoration: line-through red;">example</span>

example

thickness
線の太さを指定する。 
<span style="text-decoration: line-through 4px;">example</span>

example

使用例

スタイルシート属性 text-decoration の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<p style="text-decoration: underline overline line-through">サンプル</p>

サンプル

text-underline-position

下線の場所を指定します。下線を引くにはCSSスタイルシート属性 text-decoration を使用します。

書式

text-underline-position: 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

text-decoration-line はテキストを装飾する線の種類を指定するCSSプロパティである。

text-decoration-line: 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

text-decoration-style: 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

text-decoration-color はテキストを装飾する色を指定するCSSプロパティである。

text-decoration-color: 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