CSS clamp() 実践ガイド ―
メディアクエリを減らして、滑らかなレスポンシブを実現する

メディアクエリの「カクカク問題」を感じていませんか

レスポンシブデザインを組むとき、見出しの文字サイズをブレイクポイントごとに切り替える——これ、現場では日常的にやりますよね。たとえばスマホで18px、タブレットで26px、デスクトップで36pxのように。

でも、ブラウザの幅を少しずつ動かしてみてください。599pxから600pxに変わった瞬間、文字サイズがパッと切り替わる。これが「カクカク問題」です。ブレイクポイントの境界でサイズが不連続にジャンプするので、ユーザーの画面サイズによっては文字が大きすぎたり小さすぎたりする中途半端な状態が生まれます。

clamp() は、この問題をたった1行で解決するCSSの関数です。「最小値」「推奨値（ビューポートに連動する計算式）」「最大値」の3つを指定するだけで、画面幅に応じて値が滑らかに変化します。メディアクエリを一本も書かずに。

clamp() の基本——3つの値を理解する

clamp() の構文はシンプルです。引数を3つ取ります。

font-size: clamp(18px, 2vw + 12px, 36px);

/*        ┌─────────┐  ┌───────────┐  ┌─────────┐ */
/*        │ 最小値   │  │ 推奨値     │  │ 最大値   │ */
/*        │ MIN      │  │ PREFERRED  │  │ MAX      │ */
/*        └─────────┘  └───────────┘  └─────────┘ */

それぞれの役割を整理しましょう。第1引数（MIN）は下限です。どんなに画面が小さくても、値はこれより小さくなりません。第2引数（PREFERRED）は「理想値」で、ビューポート幅に連動する計算式を入れます。ここが clamp() の核心です。第3引数（MAX）は上限。画面がどれだけ大きくても、値はこれを超えません。

動作を身近な例えで言うと、サーモスタット（温度調節器）に似ています。「下限18度・上限28度」と設定しておけば、外気温に応じて室温はその範囲内で自動調整される。clamp() も同じで、ビューポート幅という「外気温」に応じて、最小と最大の間で値が滑らかに動くのです。

推奨値の計算式の考え方

推奨値には vw（ビューポート幅の1%）を使った計算式を入れるのが一般的です。2vw + 12px のように「vw単位 + 固定値」の形にすると、画面幅が広がるにつれて値が緩やかに増加し、固定値の部分がベースラインとして機能します。

/* vw の係数が大きいほど、画面幅による変化が急になる */
font-size: clamp(16px, 1vw + 12px, 24px);  /* 緩やかな変化 */
font-size: clamp(16px, 4vw + 2px, 40px);  /* 急な変化 */

では、実際に動くデモで確認してみましょう。ブラウザの幅を変えると、見出しと本文のサイズが滑らかに変化するのがわかります。

比較のために、メディアクエリで同じ範囲をカバーした場合のデモも置いておきます。ブラウザ幅を少しずつ変えると、ブレイクポイントの境界で文字サイズがカクッと切り替わるのがわかるはずです。

現場で使える実践パターン

clamp() は font-size だけのものではありません。<length> を受け取るほぼすべてのCSSプロパティで使えます。ここからは、実務でよく登場するパターンを3つ紹介します。

パターン1：余白（padding / margin）のフルイド化

セクションの上下パディングを、スマホでは小さめ、デスクトップでは大きめにしたい——これもメディアクエリなしで実現できます。

.hero {
  padding: clamp(12px, 3vw, 48px);
}

.hero {
  padding: 12px;
}
@media (min-width: 600px) {
  .hero { padding: 24px; }
}
@media (min-width: 1024px) {
  .hero { padding: 48px; }
}
/* 3つのブレイクポイントで段階的に変わる。境界でジャンプする。 */

パターン2：コンテナ幅の制御

カードやモーダルなど、「最小幅と最大幅の間でビューポートに応じた幅にしたい」というケースです。max-width と width: 100% の組み合わせで実現することも多いですが、clamp() ならより直感的に書けます。

.card {
  width: clamp(200px, 50vw, 600px);
  /* 最小200px、最大600px。間は画面幅の50%で追従 */
}

パターン3：Grid / Flexbox の gap をフルイドに

グリッドレイアウトの gap も clamp() との相性が良いプロパティです。スマホでは詰めたいけど、デスクトップでは余裕を持たせたい——そんなケースにぴったりです。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 2vw, 24px);
}

応用：フルイドな見出し階層を一括設計する

実際のプロジェクトでは、h1・h2・h3それぞれに clamp() を設定して、一貫したタイプスケール（文字サイズの階層構造）を作ることになります。ここで大事なのは、各レベルの「変化率」を揃えること。見出しだけが急激に大きくなって本文との差がちぐはぐにならないよう、vw の係数を意識して設計します。

:root {
  --font-h2:   clamp(22px, 1.5vw + 14px, 34px);
  --font-h3:   clamp(17px, 1vw + 11px, 24px);
  --font-body: clamp(14px, 0.5vw + 11px, 18px);
}

h2 { font-size: var(--font-h2); }
h3 { font-size: var(--font-h3); }
p  { font-size: var(--font-body); }

ポイントは、vw の係数が上位の見出しほど大きく、本文に近づくほど小さくなっている点です。こうすることで、スマホでは見出しと本文のサイズ差が控えめに、デスクトップでは見出しがしっかり目立つ——という理想的な階層が自動的に作られます。

CSS Custom Properties（カスタムプロパティ）と組み合わせれば、デザイントークンとしてプロジェクト全体で再利用しやすくなります。変更も :root の1箇所を直すだけで済むので、メンテナンス性も高い。

アクセシビリティの注意点——ズームとWCAG SC 1.4.4

clamp() は便利ですが、アクセシビリティの観点で知っておくべき注意点があります。WCAGの達成基準 1.4.4（テキストのサイズ変更）は、「テキストが元のサイズの200%まで拡大できること」を求めています。

問題は、ブラウザのズーム機能と vw 単位の関係にあります。ユーザーがブラウザを500%にズームしても、ビューポート自体のサイズは変わりません。つまり、vw ベースの値はズームしてもスケールしないのです。rem や px はズーム時にきちんと拡大されますが、vw 成分が大きいと、ズームしてもテキストが十分に大きくならないケースが出てきます。

rem 単位を使うとさらに安全

px 指定だとユーザーのブラウザフォント設定が反映されませんが、rem を使えばユーザーの設定に連動します。clamp() の最小値・最大値を rem で指定するのがベストプラクティスです。

h1 {
  font-size: clamp(1.125rem, 1.5vw + 0.75rem, 2.25rem);
  /* 18px〜36px相当。最大値は最小値の2倍 → WCAG安全圏 */
}

h1 {
  font-size: clamp(1rem, 5vw + 0.5rem, 4rem);
  /* 16px〜64px相当。最大値は最小値の4倍 → WCAGに抵触する可能性 */
}