CSSのclamp()でフォントサイズをレスポンシブ対応する方法【CSS】

こんにちは！コーダーのゆうしです。

レスポンシブ対応でフォントサイズを調整するとき、これまでは @media でブレイクポイントごとにサイズを指定するのが一般的でした。ただこの方法だと「PCは大きく・スマホは小さく」という2段階の切り替えになりがちで、中間のサイズでどちらかに振れてしまうことがあります。CSS の clamp() を使うと、ウィンドウ幅に応じて滑らかにフォントサイズを変化させることができます。この記事では clamp() の基本から実務での使い方まで解説します。

clamp()とは？

clamp() はCSS の数学関数のひとつで、値を「最小値」と「最大値」の範囲内に収めながら、中間の値を動的に変化させることができます。

font-size: clamp(最小値, 推奨値, 最大値);

3つの引数を渡すのが特徴で、推奨値がウィンドウ幅に応じて変化し、最小値と最大値の間に収まるように自動で調整されます。

基本的な使い方

p {
  font-size: clamp(14px, 2vw, 18px);
}

この例では以下のような動作になります。

ウィンドウ幅が広くなるほどフォントサイズが大きくなり、狭くなれば小さくなります。ただし最小値・最大値の範囲を超えることはありません。

メディアクエリとの比較

メディアクエリで書く場合

p {
  font-size: 14px;
}

@media (min-width: 768px) {
  p {
    font-size: 16px;
  }
}

@media (min-width: 1200px) {
  p {
    font-size: 18px;
  }
}

clamp()で書く場合

p {
  font-size: clamp(14px, 2vw, 18px);
}

clamp() を使うことでメディアクエリが不要になり、コードがシンプルになります。また切り替えがスムーズになるので、中間のサイズで見た目が崩れることがありません。

vwだけだと計算が難しい問題

clamp() の推奨値に vw だけを使うと、特定のブレイクポイントで「何pxにしたい」という細かい指定が難しくなります。そこで vw と rem を組み合わせた計算式を使う方法が実務ではよく使われます。

font-size: clamp(14px, calc(0.875rem + 0.5vw), 18px);

この形にすることで、ウィンドウ幅に応じた滑らかな変化を維持しながら、より細かいサイズコントロールができるようになります。

計算が大変なときはツールを使う

clamp() の推奨値の計算は少し複雑なので、ツールを使うのが便利です。

clamp calculator https://www.marcbacon.com/tools/clamp-calculator/

「最小フォントサイズ」「最大フォントサイズ」「最小ウィンドウ幅」「最大ウィンドウ幅」を入力するだけで clamp() の値を自動で計算してくれます。実務でも重宝するツールです。

実務での使い方

見出しに使う

見出しは本文より大きくサイズ差があるので clamp() の効果が出やすいです。

h1 {
  font-size: clamp(24px, 5vw, 48px);
}

h2 {
  font-size: clamp(20px, 3.5vw, 36px);
}

h3 {
  font-size: clamp(18px, 2.5vw, 28px);
}

CSS変数と組み合わせる

プロジェクト全体でフォントサイズを管理したい場合はCSS変数と組み合わせると管理しやすくなります。

:root {
  --font-sm:   clamp(12px, 1.5vw, 14px);
  --font-base: clamp(14px, 2vw, 16px);
  --font-md:   clamp(16px, 2.5vw, 20px);
  --font-lg:   clamp(20px, 3.5vw, 28px);
  --font-xl:   clamp(24px, 5vw, 48px);
}

p {
  font-size: var(--font-base);
}

h1 {
  font-size: var(--font-xl);
}

:root でまとめて定義しておくことで、サイズの変更が必要なときに1箇所修正するだけで済みます。

フォントサイズ以外にも使える

clamp() はフォントサイズだけでなく padding や margin ・gap などにも使えます。

.section {
  padding: clamp(40px, 8vw, 120px);
}

.grid {
  gap: clamp(16px, 3vw, 40px);
}

セクションの余白やグリッドの間隔もウィンドウ幅に応じて滑らかに変化させることができます。

躓きやすいポイント

最小値が最大値より大きくなっている

clamp(20px, 2vw, 14px) のように最小値が最大値より大きい値になっていると意図しない動作になります。必ず「最小値 < 最大値」の順番になっているか確認してください。

ブラウザの対応状況

clamp() は主要なモダンブラウザはすべて対応しています。ただしIE11は非対応です。IE対応が必要なプロジェクトでは clamp() を使わずメディアクエリで対応する必要があります。現在はIEのシェアがほぼゼロなので、基本的には気にしなくてOKです。

remとpxの混在に注意

clamp() の引数は単位が違っても計算できますが、rem と px を混在させると計算が複雑になります。迷ったら px に統一するか、calc() を使って意図が伝わるコードにしておくと後から見返したときわかりやすいです。

まとめ

clamp() を使うことでメディアクエリなしにフォントサイズをウィンドウ幅に応じて滑らかに変化させることができます。見出しや本文・セクションの余白など幅広い場面で活用できます。計算が複雑な場合はclamp calculatorを活用して、実務の効率を上げてみてください。

ご不明な点やコーディングのご依頼はお問い合わせからお気軽にどうぞ。