サイト制作
CSSのclamp()で文字サイズを調整｜最小・変化する値・最大の読み方
2026-11-08
この記事には広告・アフィリエイトリンクが含まれます。
画面幅に合わせて文字を変えつつ、小さすぎ・大きすぎを防ぐclamp()。三つの値の意味と、拡大表示で確認したい点を解説します。
中央の値を、上下の限界で挟む
clamp()は、最小値、採用したい値、最大値の順に指定するCSS関数です。中央の値が範囲内ならそれを使い、小さすぎれば最小値、大きすぎれば最大値を使います。
たとえば font-size: clamp(1rem, 2vw, 2rem); では、画面幅に応じる2vwを、1remから2remの範囲へ収めます。三つの画面サイズに対応する値を順に並べる機能ではありません。
数字を入れて考えると、変化する範囲が分かる
説明用にルートの文字サイズを16pxと仮定します。画面幅400pxなら2vwは8pxなので、最小の16pxが採用されます。幅1,200pxなら24px、幅2,000pxなら40pxですが、最後は最大の32pxに収まります。
この計算は仮定した条件での例です。実際のremは利用環境や設定によって変わるため、16px固定の単位として扱わないでください。最小値を最大値より大きくするような、意図の分かりにくい指定も避けましょう。
画面幅だけで、読みやすさを決めない
vwだけで文字を伸縮させると、利用者の文字拡大への対応を見落としやすくなります。相対単位を組み合わせる場合も、それだけでアクセシビリティが保証されるわけではありません。
小さい画面、大きい画面、ブラウザーの拡大、長い見出しを実際に確認します。文字が大きくなったときに、固定高の枠からはみ出したり、隣のボタンを押し出したりしないかまで見ると、数式だけでは分からない問題を見つけられます。
余白にも使えるが、必要な場所から
clamp()は文字サイズ専用ではなく、長さを受け取る他のプロパティでも使えます。ただし、あらゆる余白を連続変化させると、画面幅による印象の変化を追いにくくなります。
まずは大見出しや大きな外側余白など、一か所で意図を確かめるのがおすすめです。ここで示した数値は完成デザインの推奨値ではなく、仕組みの例。対象の本文量と画面で確認してから調整してください。
