text-decoration

この記事では「text-decoration」について、基本の意味と使い方を初心者向けにやさしく説明します。

Cascading Style Sheets text-decoration property.

テキストの装飾を指定する

　text-decorationとはテキストの装飾を指定するプロパティです。装飾の種類には下線、上線、取り消し線、点滅があり、傍線の付け方・色・スタイル・太さをまとめて指定する際に使用します。

　このプロパティは以下の CSSプロパティの一括指定です。

text-decoration-line

テキストに傍線をつける。

text-decoration-style

テキスト傍線のスタイルを指定する。

text-decoration-color

テキスト傍線の色を指定する。

text-decoration-thickness

テキスト傍線の太さを指定する。

　ブロックレベル要素に指定した場合は、その中に含まれるすべてのインライン要素に適用されます。none以外の値は、半角スペースで区切って複数同時に指定することができます。その場合の指定順序は自由です。省略された値は、初期値に設定されます。

　text-decorationプロパティは CSS1 や CSS2 から存在していますが、 CSS3 からはテキストの線・色・スタイルをまとめて指定できるショートハンド（短縮形）プロパティとして使用できます。

　ただし、これらの値をまとめて指定すると、旧いブラウザでは無視されてしまうかもしれません。

text-decoration: underline dotted red;
/* 旧いブラウザでは無視される */

text-decoration: underline;
/* 併記しておくほうがベター */

text-decoration の概要

書式

text-decoration: 値（複数可）

適用対象

すべての要素

初期値

text-decoration-line

none

text-decoration-style

solid

text-decoration-color

現在の色

text-decoration-thickness

auto

値の継承

しない

指定できる値

text-decoration-lineプロパティの値

none

テキストの装飾を行いません。（初期値）

underline

テキストに下線をつけます。

overline

テキストに上線をつけます。

line-through

テキストに取消線を引きます。

blink

テキストが点滅します。

現在、主要なブラウザでは効果がありません。

text-decoration-styleプロパティの値

solid

実線（初期値）

double

二重線

dotted

点線

dashed

破線

wavy

波線

text-decoration-colorプロパティの値

16進法やカラーネームなどで色を指定する。

text-decoration-thicknessプロパティの値

キーワード、数値による長さの指定、パーセントによる指定方法があります。

Example of use

.c1 {
	text-decoration: overline;
}
.c2 {
	text-decoration: underline;
}
.c3 {
	text-decoration: line-through;
}
.c4 {
	text-decoration: overline underline;
}
.c5 {
	text-decoration: blink;
}

<p>テキスト：標準</p>
<p class="c1">テキスト：overline</p>
<p class="c2">テキスト：underline</p>
<p class="c3">テキスト：line-through</p>
<p class="c4">テキスト：overline underline</p>
<p class="c5">テキスト：blink</p>

blink（点滅）使用上の注意点
　2021年5月現在で最新の、Firefox、Opera、Chrome、Safari、Edge、いずれのブラウザでも未対応でした。文字を点滅させる表現は、多くのユーザーにとって視認性や判読性を悪くし不愉快なものです。このような点滅させる表現は CSSアニメーションで実現することを推奨されていますが、私個人としては極力使わないことを推奨します。

　なお、線は colorプロパティで設定されている色になるため、基本的にはテキストと同じ色になります。部分的にテキストの色が変更されている場合でも、線の色は変わりません。もし、線の色も変えたい場合は、text-decorationプロパティを再定義しなければならないようです。

下線・上線を引いただけ

.c4 {
	text-decoration: overline underline;
}

<p class="c4">テキスト：overline underline</p>

文字列に colorプロパティを設定

　上記の例の「overline」という文字列に対して span要素と colorプロパティを使って赤い文字に設定してみます。

.c4 {
	text-decoration: overline underline;
}
.c4 span {
	color: red;
}

<p class="c4">テキスト：<span>overline</span> underline</p>

　これだと、文字列だけが赤くなり、線の色は変わりません。

線の色まで変えたい場合

　線の色まで変えたい場合は、上記の例の span要素のところで colorプロパティと一緒に text-decorationプロパティを再定義する必要があるようです。

.c4 {
	text-decoration: overline underline;
}
.c4 span {
	text-decoration: overline underline;
	color: red;
}

text-decorationで色を指定した場合

　text-decorationで色を指定した場合ほとんどのブラウザで、傍線の色も変わるようですが、一部のブラウザでは同様に文字色だけが変わり傍線の色は変わらないようです。2022年5月2日時点では、Safariが未対応のようです。

.c4 {
	text-decoration: overline underline;
}
.c4 span {
	text-decoration: overline underline red;
}

Browser support