CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － text-decoration応用

Web APP CSS
スポンサーリンク

text-decoration は「線の種類・位置・色・太さ」を自由に操るプロパティ

リンクの下線だけでなく、強調・アクセント・装飾・UI 表現 まで幅広く使えるのが text-decoration の魅力です。
CSS3 以降は細かい制御が可能になり、デザインの幅が一気に広がりました。

ここでは、初心者でも迷わないように
CSS と Tailwind CSS の両方で、例題を交えて丁寧に解説します。

text-decoration の構成要素（ここが最重要）

text-decoration は 1 つのプロパティに見えて、実は 4 つの要素で構成されています。

  • text-decoration-line（線の種類）
  • text-decoration-color（線の色）
  • text-decoration-style（線のスタイル）
  • text-decoration-thickness（線の太さ）

これらを組み合わせることで、
「ただの下線」ではなく、デザインとしての線 を作れます。

例1：リンクの下線を“デザインとして整える”

CSS 版

a {
  text-decoration-line: underline;
  text-decoration-color: #2563eb;
  text-decoration-thickness: 2px;
  text-decoration-style: solid;
}
CSS

Tailwind 版

<a class="underline decoration-blue-600 decoration-2">
  リンクテキスト
</a>
HTML

深掘りポイント
デフォルトの下線は細くて読みにくいことが多いので、
太さ（decoration-2）と色を指定すると一気に洗練されます。

例2：ホバー時だけ下線を出す（UI でよく使う）

CSS 版

a {
  text-decoration: none;
}

a:hover {
  text-decoration-line: underline;
  text-decoration-color: #2563eb;
  text-decoration-thickness: 2px;
}
CSS

Tailwind 版

<a class="no-underline hover:underline hover:decoration-blue-600 hover:decoration-2">
  ホバーで下線
</a>
HTML

深掘りポイント
ホバー時だけ下線を出すと、
「リンクであることがわかりやすい」＋「普段はスッキリ」
という UI の理想形になります。

例3：見出しに“アクセントライン”を付ける

CSS 版

h2 {
  text-decoration-line: underline;
  text-decoration-color: #f59e0b;
  text-decoration-thickness: 4px;
  text-decoration-style: wavy;
}
CSS

Tailwind 版

<h2 class="underline decoration-amber-500 decoration-4 decoration-wavy">
  アクセント見出し
</h2>
HTML

深掘りポイント
wavy（波線）や double（二重線）を使うと、
「強調」「注意喚起」「装飾」として効果的です。

例4：取り消し線（セール価格でよく使う）

CSS 版

.old-price {
  text-decoration-line: line-through;
  text-decoration-color: #9ca3af;
  text-decoration-thickness: 2px;
}
CSS

Tailwind 版

<p class="line-through decoration-gray-400 decoration-2">
  ¥12,800
</p>
HTML

深掘りポイント
取り消し線は「値下げ」「無効化」「完了済み」を表す UI として定番です。

例5：下線を“文字から離す”テクニック（読みやすさ向上）

デフォルトの下線は文字に近すぎて読みにくいことがあります。
CSS の text-underline-offset を使うと改善できます。

CSS 版

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

Tailwind 版

<a class="underline underline-offset-4">
  読みやすい下線
</a>
HTML

深掘りポイント
underline-offset は UI デザインで非常に重要。
「下線が文字にぶつかって汚く見える」問題を解決します。

例6：リンクの“アニメーション下線”（モダン UI）

CSS 版

.link {
  position: relative;
  text-decoration: none;
}

.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background: #2563eb;
  transition: width 0.3s;
}

.link:hover::after {
  width: 100%;
}
CSS

Tailwind 版（任意値で実装）

<a class="relative no-underline after:content-[''] after:absolute after:left-0 after:-bottom-1
           after:w-0 after:h-[2px] after:bg-blue-600 after:transition-all hover:after:w-full">
  アニメーションリンク
</a>
HTML

深掘りポイント
text-decoration ではなく擬似要素で線を作ることで、
アニメーションや位置調整が自由になります。

例7：縦書きの下線（writing-mode と組み合わせ）

CSS 版

.vertical {
  writing-mode: vertical-rl;
  text-decoration-line: underline;
  text-underline-offset: 4px;
}
CSS

Tailwind 版

<p class="writing-mode-[vertical-rl] underline underline-offset-4">
  縦書きの下線
</p>
HTML

深掘りポイント
縦書きでも text-decoration は機能します。
縦書きデザインのアクセントとして非常に有効です。

text-decoration の使い分け（ここが一番大事）

強調したい → underline

リンク・見出し・強調テキスト

無効化・完了 → line-through

セール価格・タスク完了

装飾 → wavy / double / dotted

注意喚起・デザインアクセント

読みやすさ向上 → underline-offset

下線が文字に近すぎる問題を解決

アニメーション → 擬似要素で線を作る

モダン UI の定番

Tailwind の text-decoration クラス一覧

underline
line-through
no-underline
decoration-{color}
decoration-{size}
decoration-solid / decoration-double / decoration-dotted / decoration-wavy
underline-offset-{size}

Tailwind は text-decoration の細かい制御に完全対応しています。

実務テンプレート：UI でよく使う text-decoration セット

リンク（ホバーで下線）

<a class="no-underline hover:underline hover:underline-offset-4 hover:decoration-blue-600">
  リンク
</a>
HTML

セール価格

<p class="line-through decoration-red-500 decoration-2">
  ¥12,800
</p>
HTML

見出しのアクセント

<h2 class="underline decoration-amber-500 decoration-4 underline-offset-4">
  特集タイトル
</h2>
HTML

アニメーションリンク

<a class="relative no-underline after:content-[''] after:absolute after:left-0 after:-bottom-1
           after:w-0 after:h-[2px] after:bg-blue-600 after:transition-all hover:after:w-full">
  詳しく見る
</a>
HTML

まとめ

text-decoration は
線の種類・色・太さ・位置を自由に操るタイポグラフィの応用技術 です。

ポイントは次の通りです。

  • underline / line-through / wavy などで表現力が広がる
  • underline-offset で読みやすさが向上
  • 擬似要素を使うとアニメーションも可能
  • Tailwind は decoration-* と underline-offset-* で細かく制御できる

スポンサーリンク
タイトルとURLをコピーしました