この記事の要点

text-decoration は下線・上線・取り消し線などの装飾線をテキストに付けるための CSS プロパティ群 個別プロパティは text-decoration-line / -color / -style / -thickness の 4 つ 下線の位置は text-underline-offset、文字との被りは text-decoration-skip-ink で制御 text-decoration はショートハンドで line color style thickness の順に書ける a 要素の下線を消すなら text-decoration: none、アクセシビリティ的にはホバーや :focus で復活させるのが安全

text-decoration とは

テキストに下線・上線・取り消し線などの装飾線を付ける CSS のプロパティ群です。リンクや見出しのスタイル調整、強調表現、編集前後の差分表示など、テキスト周りの装飾ではほぼ必ず登場します。

プロパティ一覧

プロパティ	意味	主な値
text-decoration-line	どの線を引くか	none / underline / overline / line-through / blink
text-decoration-color	線の色	色名 / HEX / rgb() / currentColor
text-decoration-style	線のスタイル	solid / double / dotted / dashed / wavy
text-decoration-thickness	線の太さ	auto / from-font / px / em / %
text-underline-offset	下線とテキストの距離	auto / px / em / %
text-decoration-skip-ink	下線が文字の下端と被るとき避けるか	auto / none / all
text-decoration	ショートハンド	line color style thickness の順

基本構文

セレクタ {
  text-decoration-line: underline;
  text-decoration-color: crimson;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
}

/* ショートハンド */
セレクタ {
  text-decoration: underline crimson wavy 2px;
}

line（線の種類）

値	結果
none	装飾なし（既定値、リンクで消すときによく使う）
underline	下線
overline	上線
line-through	取り消し線
blink	点滅（仕様上は廃止扱い、現代ブラウザは無効）

複数指定もできます。「下線 + 取り消し線」のような重ね合わせ表現に使います。

.sale-price {
  text-decoration-line: underline line-through;
}

color（色）

線の色を独立して指定できます。指定しない場合は currentColor（テキスト色）が使われます。

.alert {
  color: #111;
  text-decoration-line: underline;
  text-decoration-color: #e74c3c; /* テキストは黒、線だけ赤 */
}

style（線のスタイル）

値	見た目
solid	実線（既定値）
double	二重線
dotted	点線
dashed	破線
wavy	波線（誤字強調風）

波線はスペルチェッカー風の表現として人気で、注意喚起の見出しなどでよく使われます。

thickness（太さ）

線の太さを制御できます。from-font はフォントが推奨する太さを利用するため、フォント混在時でも調和が取りやすい値です。

.h1 { text-decoration: underline; text-decoration-thickness: from-font; }
.h2 { text-decoration: underline; text-decoration-thickness: 3px; }
.h3 { text-decoration: underline; text-decoration-thickness: 0.1em; }

下線の位置: text-underline-offset

下線とテキストの距離を調整できます。下線がディセンダ（g, j, p, q, y などの下に伸びる部分）と被って読みにくいときに、少し下げると改善します。

a {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

skip-ink: 文字と被らないようにする

text-decoration-skip-ink は下線が文字のディセンダと交差する箇所を自動で避ける機能です。auto（既定）でほとんどのブラウザは avoid 動作を行います。

.no-skip {
  text-decoration: underline;
  text-decoration-skip-ink: none; /* 文字を貫通する従来挙動 */
}

.skip-all {
  text-decoration: underline;
  text-decoration-skip-ink: auto; /* 文字を避けて自然 */
}

ショートハンドの順序

ショートハンドは順不同で書けますが、可読性のため line → color → style → thickness の順を推奨します。

/* 推奨: line color style thickness */
.code { text-decoration: underline crimson wavy 2px; }

/* 順不同でも有効 */
.code { text-decoration: wavy 2px underline crimson; }

典型ユースケース

リンクの下線を消す

a { text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

ホバーやフォーカス時に復活させると、マウス操作・キーボード操作どちらでも分かりやすく、アクセシビリティ的にも安全です。

削除済みアイテムの取り消し線

.deleted {
  color: #888;
  text-decoration: line-through;
  text-decoration-color: #c00;
}

誤字風の波線

.typo { text-decoration: underline wavy #c00; }

<u> / <s> / <del> との関係

要素	意味	規定スタイル
<u>	非テキスト的注釈（誤字・固有名等）	underline
<s>	もはや正確でない情報	line-through
<del>	削除された部分（編集履歴）	line-through
<ins>	挿入された部分（編集履歴）	underline

意味的に下線・取り消し線を表したいときはこれらの要素を使い、見た目だけ装飾したいときに text-decoration を使うのが正しい使い分けです。

よくあるトラブル

症状	原因と対処
下線が消えない	祖先で text-decoration:underline が指定されている。none で上書き or 直接祖先を直す
下線の色だけ変えたいのに本文の色も変わる	color ではなく text-decoration-color を使う
波線がぼやける	thickness を from-font か 2px 程度に明示
下線が文字に被って読みにくい	text-underline-offset で離す / skip-ink: auto を確認

関連

• テキスト — 親カテゴリ
• text-indentプロパティ — 字下げ
• text-transform — 大文字小文字変換
• text-shadow — テキストの影
• font-style — イタリック