CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － リンクデザイン設計

Web APP CSS
スポンサーリンク

リンクデザインは「読みやすさ × 分かりやすさ × 美しさ」を同時に満たす設計

リンクは UI の中で最も重要な要素のひとつ。
どれがリンクか一瞬で分かること、
読みやすく邪魔にならないこと、
デザインとして美しいこと
この3つを満たすのが“良いリンクデザイン”です。

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

リンクデザインの基本原則（ここが最重要）

1. 「リンクである」と一瞬で分かること

色・下線・ホバー効果のどれか（または複数）でリンク性を示す。

2. ホバー時に“反応”があること

色が変わる、下線が出る、太さが変わるなど。

3. 下線は「読みやすさ」を損なわないように調整

太さ・色・オフセット（underline-offset）を調整すると美しくなる。

4. 状態（hover / active / visited）をデザインする

特に hover は UI の生命線。

例1：最も基本的な「下線付きリンク」

CSS 版

a {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 3px;
}
CSS

Tailwind 版

<a class="text-blue-600 underline underline-offset-4">
  基本のリンク
</a>
HTML

深掘りポイント
underline-offset を使うと、
下線が文字に近すぎて読みにくい問題が解決します。

例2：普段は下線なし、ホバーで下線（UI の定番）

CSS 版

a {
  color: #2563eb;
  text-decoration: none;
}

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

Tailwind 版

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

深掘りポイント
普段はスッキリ、ホバーでリンク性を示す。
最も使われるリンクデザインです。

例3：下線の色と太さをデザインする（美しいリンク）

CSS 版

a {
  color: #1e40af;
  text-decoration-line: underline;
  text-decoration-color: #60a5fa;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
CSS

Tailwind 版

<a class="text-blue-900 underline decoration-blue-300 decoration-2 underline-offset-4">
  デザインされたリンク
</a>
HTML

深掘りポイント
線の色を文字色より薄くすると、
「強調しすぎない上品なリンク」になります。

例4：アニメーションする下線（モダン 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 ではなく擬似要素で線を作ることで、
アニメーションや位置調整が自由になります。

例5：ボタン風リンク（CTA に最適）

CSS 版

.cta {
  display: inline-block;
  padding: 0.75em 1.5em;
  background: #2563eb;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}
CSS

Tailwind 版

<a class="inline-block px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold no-underline">
  CTAリンク
</a>
HTML

深掘りポイント
リンクをボタン化することで、
「押してほしいアクション」を強調できます。

例6：カード全体をリンクにする（クリック領域を広げる）

CSS 版

.card-link {
  display: block;
  padding: 1rem;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}

.card-link:hover {
  background: #f3f4f6;
}
CSS

Tailwind 版

<a class="block p-4 rounded-xl no-underline text-inherit hover:bg-gray-100">
  <h3 class="font-semibold">カードタイトル</h3>
  <p class="text-gray-600">説明文が入ります。</p>
</a>
HTML

深掘りポイント
カード全体をリンクにすると、
スマホでも押しやすく、UX が大幅に向上します。

例7：visited（既読リンク）をデザインする

CSS 版

a:visited {
  color: #6b7280;
}
CSS

Tailwind 版

Tailwind は visited にも対応しています。

<a class="text-blue-600 visited:text-gray-500">
  訪問済みリンク
</a>
HTML

深掘りポイント
visited をデザインすると、
ユーザーが「どこを見たか」を把握しやすくなります。

リンクデザインの設計ポイント（ここが一番大事）

1. リンクは“リンクらしく”

色・下線・ホバーのどれかで必ずリンク性を示す。

2. 下線は offset と thickness で美しく

デフォルトの下線は読みにくいので調整が必須。

3. ホバーは UI の生命線

色・線・太さ・背景など、必ず反応をつける。

4. 状態（hover / active / visited）をデザインする

特に visited は UX に大きく影響。

5. 擬似要素でアニメーションするとモダンな印象

text-decoration ではできない表現が可能。

実務テンプレート：リンクデザインのベストセット

Tailwind 版（最も汎用的）

<a class="text-blue-600 no-underline underline-offset-4
          hover:underline hover:decoration-blue-600 hover:decoration-2
          visited:text-purple-600">
  汎用リンク
</a>
HTML

CSS 版（プロジェクト共通スタイル）

a {
  color: #2563eb;
  text-decoration: none;
  text-underline-offset: 4px;
}

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

a:visited {
  color: #7c3aed;
}
CSS

まとめ

リンクデザインは
「分かりやすさ × 読みやすさ × 美しさ」 を同時に満たす UI の基礎技術です。

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

  • 下線は offset と thickness で美しく
  • ホバーは必ず反応させる
  • visited をデザインすると UX が向上
  • 擬似要素でアニメーションも可能
  • Tailwind は decoration-* と underline-offset-* で細かく制御できる

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