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 の基本的な使い方

プロパティの指定方法

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

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

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

none

装飾ラインを表示しない（装飾を無効にする）

underline

下線を引く

overline

上線を引く

line-through

取り消し線を引く

※ blink について

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

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

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

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

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

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

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

• text-decoration-line にあたる部分：underline overline
• text-decoration-style にあたる部分：dotted
• text-decoration-color にあたる部分：red

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

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

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

text-decoration-color

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

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

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

.element {
	text-decoration: underline red;
}

と書くこともできます。

text-decoration-style

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

• solid : 実線（デフォルト）
• double : 二重線
• dotted : 点線
• dashed : 破線
• wavy : 波線

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

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

実際の使用例

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

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

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

ポイント：

• 見出しに下線を引いて強調したい場合に使用。
• 二重線を使うことで、より目を引くデザインにできる。
• あまり線が多いと読みにくくなるので、デザイン全体のバランスに配慮する必要があります。

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

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

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

ポイント：

• リンクにわかりやすく装飾をつけたい場合に活用。
• 下線と上線を同時に引いて、赤色の波線にすることで、ユーザーの視線を強く誘導できる。

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

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

• 目立たせたいという目的で安易に下線や上線を多用すると、逆に可読性を下げてしまう恐れがあります。ユーザーにとって必要な情報かどうかを見極めつつ、適切なプロパティ値を選択してください。
• underline + overline + line-through を全部重ねて指定することも技術的には可能ですが、過度に装飾しすぎるとテキストが読みにくくなるので注意が必要です。

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

• 視覚障がいのあるユーザーや、色覚異常のあるユーザーにも情報が伝わるように、色と線だけに頼った強調方法は避けるのがベターです。たとえば、同時にフォントウェイトを変更したり背景色を変更するなど、複数の視覚的手段を用いることを検討しましょう。
• 下線をリンクの表現として使う場合、下線付きテキストが本当にリンクであるかどうか、画面リーダー利用者に分かりやすいように適切なマークアップを行う必要があります。

レイアウトとの兼ね合い

• 行間や行の高さ（line-height）と組み合わせた場合、装飾ラインが他の行と重なってしまうことがあります。デザイン上、意図しない見た目にならないように、line-height を十分に確保したり、場合によっては要素のマージンやパディングで余白を調整する必要があります。
• 特に多言語サイト（日本語と英語等）では、フォントや行間の違いが大きいため、装飾ラインの見え方が大きく異なる場合があります。念入りなデザイン確認を行いましょう。

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

• デバイスの画面サイズが異なると、装飾ラインの印象も変化します。小さい画面（スマートフォン等）では読みにくくなる場合があるため、場合によってはメディアクエリを使って装飾ラインを取り消す、もしくはスタイルを変更することを検討してください。

  CSS

  @media (max-width: 600px) {
  	.custom-link {
  		text-decoration-line: underline; /* スマホでは上線を外すなど */
  	}
  }

ブラウザ互換性

• モダンブラウザ（Chrome, Firefox, Safari, Edge）の最新版では、text-decoration-line はほぼ問題なくサポートされています。
• ただし、古いブラウザ（特にInternet Explorer 11以前など）では text-decoration-line がサポートされていない場合があります。IE11 などのレガシーブラウザサポートが必要な場合は、ショートハンドの text-decoration を併用するか、polyfill を検討してください。

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

基本値

• none, underline, overline, line-through を単独あるいは組み合わせて使います。

ショートハンドとの使い分け

• text-decoration ショートハンドを使うと簡潔に書けますが、個別プロパティ（text-decoration-line, text-decoration-color, text-decoration-style）を使うと、より細かく制御できて、可読性も上がる場合があります。

他のプロパティと連携して柔軟なデザインに

• text-decoration-color や text-decoration-style と組み合わせることで、カラーや線の種類を自在にカスタマイズ可能です。

注意点

• 過度な装飾は可読性を損なう恐れがあります。
• ブラウザ互換性やアクセシビリティにも留意し、必要に応じてフォールバックや代替手段を検討しましょう。

まとめ

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

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