CSS text-decoration property

スタイルシート属性 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: 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: 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

text-emphasis-style

text-emphasis-style: style
style
文字を強調するスタイル
説明
dot 傍点
double-circle 二重丸
triangle 三角形
sesame 読点
<span style="text-emphasis-style: filled">filled</span>
<span style="text-emphasis-style: open">open</span>
<span style="text-emphasis-style: dot">傍点</span>
<span style="text-emphasis-style: circle">circle</span>
<span style="text-emphasis-style: double-circle">二重丸</span>
<span style="text-emphasis-style: triangle">三角形</span>
<span style="text-emphasis-style: sesame">読点</span>

filled open 傍点 circle 二重丸 三角形 読点

text-emphasis-color

text-emphasis-color: color
<span style="text-emphasis-style: dot; text-emphasis-color: red">赤</span>

text-emphasis

text-emphasis: style color
<span style="text-emphasis-style: dot red">赤い傍点</span>

赤い傍点

text-emphasis-position

text-emphasis-position: position
position
強調の位置
説明
over
under
right
left
<span style="text-emphasis-style: dot text-emphasis-position: under">傍点</span>

傍点

関連記事

参考文献

World Wide Web Consortium (2022) CSS Text Decoration Module Level 3