CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － 見出しスケール設計

Web APP CSS
スポンサーリンク

見出しスケール設計は「階層の意味 × 読みやすさ × デザインの一貫性」を作る技術

見出し（H1〜H6）は、ただ大きさを変えるだけでは不十分です。
階層の差が明確で、読みやすく、デザインとして美しいスケール を作ることが重要です。

見出しスケールを設計できると、
LP・ブログ・アプリ UI・企業サイトなど、どんなデザインでも統一感が生まれます。

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

見出しスケール設計の基本思想（ここが最重要）

1. 見出しは「階層」を示す

H1 → ページの主役
H2 → セクションの主役
H3 → セクション内の小見出し
H4〜 → 補助的な見出し

2. 大きさの差は“意味の差”

H1 と H2 の差が小さいと階層が分かりにくくなる。
逆に差が大きすぎるとデザインがバラバラに見える。

3. スケールは「比率」で決めると美しい

黄金比（1.618）や 1.25〜1.33 の比率がよく使われる。

4. 行間・字間もセットで設計

見出しは大きくなるほど行間を詰めると美しい。

例1：黄金比ベースの見出しスケール（CSS）

CSS 版

h1 {
  font-size: 2.5rem;   /* 約40px */
  line-height: 1.2;
}

h2 {
  font-size: 1.75rem;  /* 約28px */
  line-height: 1.3;
}

h3 {
  font-size: 1.375rem; /* 約22px */
  line-height: 1.4;
}

h4 {
  font-size: 1.125rem; /* 約18px */
  line-height: 1.5;
}
CSS

深掘りポイント
黄金比（1.618）に近い比率でサイズを落としていくと、
自然で美しい階層が作れます。

例2：Tailwind で見出しスケールを作る（実務向け）

Tailwind の text-2xl や text-4xl はすべて rem ベースなので、
見出しスケールを簡単に作れます。

Tailwind 版

<h1 class="text-4xl font-bold leading-tight">見出し1</h1>
<h2 class="text-3xl font-semibold leading-snug">見出し2</h2>
<h3 class="text-2xl font-semibold leading-snug">見出し3</h3>
<h4 class="text-xl font-medium leading-normal">見出し4</h4>
HTML

深掘りポイント
見出しが大きいほど行間（leading）を詰めると、
“締まりのある見出し”になります。

例3：レスポンシブで見出しを可変にする（clamp × Tailwind）

Tailwind 版（任意値）

<h1 class="font-bold text-[clamp(2rem,6vw,3.5rem)] leading-tight">
  レスポンシブ見出し
</h1>
HTML

深掘りポイント
clamp を使うと、
スマホでは小さく、PC では大きく、
自然に伸び縮みする見出しが作れます。

例4：見出しと本文の“コントラスト”を意識した設計

CSS 版

body {
  font-size: 1rem;
}

h2 {
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
}

p {
  font-size: 1rem;
  margin-bottom: 1.25rem;
}
CSS

Tailwind 版

<h2 class="text-3xl font-semibold mb-3">セクションタイトル</h2>
<p class="text-base mb-5">
  本文テキストがここに入ります。
</p>
HTML

深掘りポイント
見出しと本文の差が明確だと、
ページ全体の読みやすさが大きく向上します。

例5：見出しの“字間”を調整して美しくする

CSS 版

h1 {
  letter-spacing: -0.01em;
}
CSS

Tailwind 版

<h1 class="text-4xl font-bold tracking-[-0.01em]">
  見出しの字間調整
</h1>
HTML

深掘りポイント
大きい見出しは字間が広く見えるため、
少し詰めるとプロっぽい見た目になります。

例6：見出しの“上下余白”もスケールに含める

CSS 版

h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
CSS

Tailwind 版

<h2 class="mt-8 mb-4 text-3xl font-semibold">
  見出しの余白設計
</h2>
HTML

深掘りポイント
見出しの上下余白は
「階層の区切り」を視覚的に示す重要な要素です。

例7：Tailwind のカスタムスケールを作る（プロジェクト全体で統一）

tailwind.config.js

module.exports = {
  theme: {
    fontSize: {
      h1: ["2.5rem", { lineHeight: "1.2" }],
      h2: ["1.75rem", { lineHeight: "1.3" }],
      h3: ["1.375rem", { lineHeight: "1.4" }],
      h4: ["1.125rem", { lineHeight: "1.5" }],
      base: ["1rem", { lineHeight: "1.7" }],
    },
  },
};
JavaScript

HTML

<h1 class="text-h1 font-bold">見出し1</h1>
<h2 class="text-h2 font-semibold">見出し2</h2>
HTML

深掘りポイント
プロジェクト全体で統一された見出しスケールを使えるため、
デザインの一貫性が劇的に向上します。

見出しスケール設計のコツ（ここが一番大事）

1. 比率で決めると美しい

1.25〜1.33 の比率が扱いやすい。

2. 行間は見出しが大きいほど詰める

leading-tight → leading-snug → leading-normal の順。

3. 字間は少し詰めるとプロっぽい

tracking-[-0.01em] など。

4. 上下余白もスケールに含める

見出しの階層が視覚的に分かりやすくなる。

5. Tailwind では text-4xl などを基準に調整

必要ならカスタムスケールを作る。

実務テンプレート：美しい見出しスケール（Tailwind）

<h1 class="text-4xl md:text-5xl font-bold leading-tight tracking-[-0.01em]">
  見出し1
</h1>

<h2 class="text-3xl md:text-4xl font-semibold leading-snug tracking-[-0.005em] mt-8">
  見出し2
</h2>

<h3 class="text-2xl font-semibold leading-snug mt-6">
  見出し3
</h3>

<h4 class="text-xl font-medium leading-normal mt-4">
  見出し4
</h4>
HTML

まとめ

見出しスケール設計は
階層の意味を明確にし、読みやすく、美しいデザインを作るための基礎技術 です。

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

  • 比率でスケールを作ると美しい
  • 行間・字間・余白もセットで設計
  • Tailwind の text-* を基準に調整
  • clamp を使うとレスポンシブに強い
  • カスタムスケールを作るとプロジェクト全体が整う

もしあなたが作っているサイト（LP、ブログ、アプリ UI など）があれば、
その用途に最適な見出しスケールを一緒に設計できます。

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