CSS

The CSS text-decoration-line property is used to display and control decorative lines on text, such as underline, overline, or line-through.

text-decoration-line

CSSのtext-decoration-lineとは?

text-decoration-line は、文字に施す装飾ライン(下線や上線、取り消し線など)をどのように描画するかを指定するためのCSSプロパティです。従来、文字の装飾ラインを指定するときは text-decoration プロパティをまとめて使用することが一般的でした。しかし、CSS Text Decoration Module Level 3 以降では、装飾に関わる各種プロパティ(text-decoration-line, text-decoration-color, text-decoration-styleなど)が分割され、より細かく制御できるようになりました。

text-decoration ショートハンドとの違い

ショートハンド(text-decoration
1つのプロパティで、「ラインの種類」「ラインのスタイル」「カラー」など複数をまとめて指定します。例: text-decoration: underline wavy red;
個別プロパティ(text-decoration-line, text-decoration-style, text-decoration-color
個別に装飾ラインの種類や色、線のスタイルを設定できます。より柔軟なカスタマイズや読みやすいコード記述が可能になります。

text-decoration-line の基本的な使い方

プロパティの指定方法

CSS

.element {
	text-decoration-line: underline;
}

CSSで .element クラスに対して下線を引きたい場合は、このように指定します。

text-decoration-line で指定できる主な値は以下のとおりです。

none
装飾ラインを表示しない(装飾を無効にする)
underline
下線を引く
overline
上線を引く
line-through
取り消し線を引く

blink について

過去の仕様で blink が存在したことがありますが、ほとんどのモダンブラウザで非対応・廃止されています。仕様上は存在していた経緯もあるため、古い資料には記載が残っていることがある点に注意しましょう。

複数のラインを同時に指定する

CSS Text Decoration Level 3 から、複数の値を同時に指定することが可能です。例えば下線と上線を同時に引くには以下のように書きます。

CSS

.element {
	text-decoration-line: underline overline;
}

このようにスペース区切りで複数のラインを指定すると、下線と上線が両方適用されます。

ショートハンドでまとめて指定する場合

CSS

.element {
	text-decoration: underline overline dotted red;
}

ショートハンドを使うメリットは、1行でまとめて書ける点です。逆に、個別プロパティを使うメリットは、必要なプロパティだけを詳細に制御できるため、可読性や保守性が高まることです。プロジェクトの規模や目的に合わせて使い分けると良いでしょう。

他の関連プロパティとの組み合わせ

text-decoration-line を活用するときは、以下のプロパティと組み合わせるケースが多いです。

text-decoration-color

テキスト装飾ラインの色を指定します。例えば、下線だけ赤くしたい場合は以下のようにします。

CSS

.element {
	text-decoration-line: underline;
	text-decoration-color: red;
}

同様に、ショートハンドを使うと

CSS

.element {
	text-decoration: underline red;
}

と書くこともできます。

text-decoration-style

テキスト装飾ラインのスタイル(線の種類)を指定します。指定可能な値には以下のものがあります。

例:

CSS

.element {
	text-decoration-line: underline;
	text-decoration-color: #ff6600;
	text-decoration-style: wavy;
}

上記の例では、波線状のオレンジ色の下線が引かれます。

実際の使用例

例1:強調したい見出し要素への応用

トレンド情報まとめ

HTML

<h2 class="highlighted-title">トレンド情報まとめ</h2>

CSS

.highlighted-title {
	text-decoration-line: underline;
	text-decoration-style: double;
	text-decoration-color: #0000ff;
}

ポイント:

例2:リンク文字へのカスタマイズ

詳細はこちら

HTML

<a href="#" class="custom-link">詳細はこちら</a>

CSS

.custom-link {
	text-decoration-line: underline overline;
	text-decoration-style: wavy;
	text-decoration-color: #ff0000;
}

ポイント:

中級以上の開発者向け:より深い活用と注意点

デザインアクセントとしての活用と可読性

アクセシビリティへの配慮

レイアウトとの兼ね合い

レスポンシブデザインとメディアクエリ

ブラウザ互換性

text-decoration-line を使う上でのまとめ

基本値
ショートハンドとの使い分け
他のプロパティと連携して柔軟なデザインに
注意点

まとめ

text-decoration-line は、テキストにおける装飾ラインの種類を直接指定するプロパティであり、従来のショートハンドよりも細かい制御が可能です。初学者の方はまず「下線を引く」「取り消し線を引く」といったシンプルな用途から始め、徐々に複数ラインやカラー、波線スタイルなど応用範囲を広げてみましょう。中級者以上の方は、他のレイアウトプロパティやアクセシビリティ、ブラウザ互換性と組み合わせた最適な使い方を身につけると、より洗練されたUIデザインを実現できます。

Web制作において、「テキスト強調」はユーザーの視線誘導や可読性に深く関わります。text-decoration-line はその重要な要素の一つです。記事やサイトで文字を際立たせたいとき、あるいはユーザーに明確なシグナルを与えたいとき、ぜひ適切なライン装飾を検討してみてください。