この記事の目次
CSS clampの使い方とは
clamp(最小値, 推奨値, 最大値) は、値を最小と最大の範囲に収めるCSS関数です。MDNでは「max(MIN, min(VAL, MAX)) として解決される」と説明されています。文字サイズに使うと、画面幅に応じて滑らかに変化し、小さすぎず大きすぎない流体タイポグラフィになります。
MDNによると、clamp() は2020年7月から主要ブラウザで使える Baseline の機能です。ブレークポイントごとに値を書き分ける メディアクエリ の代わりに、1行で済ませられる場面があります。
基本（構文・仕組み）
font-size: clamp(1.5rem, 1rem + 2.5vw, 3rem);
この指定は、次のように読みます。
| 位置 | 値 | 意味 |
|---|---|---|
| 最小値 | 1.5rem | これより小さくならない |
| 推奨値 | 1rem + 2.5vw | 画面幅に比例して変わる |
| 最大値 | 3rem | これより大きくならない |
推奨値に vw だけを使わず、rem を足すのがポイントです。vw だけだと、ブラウザの文字拡大やズームに反応しにくくなります。単位が異なる値は、四則演算で組み合わせられます。
サンプルコード（実行結果つき）
見出し、コンテナ幅、上下の余白を clamp() で指定した例です。
:root { --fs-h1: clamp(1.5rem, 1rem + 2.5vw, 3rem); }
h1 { font-size: var(--fs-h1); line-height: 1.3; }
.wrap {
width: clamp(280px, 90%, 960px);
margin-inline: auto;
padding-block: clamp(16px, 4vw, 48px);
}
幅を clamp(280px, 90%, 960px) とすると、親の90%を基本にしながら、280px未満・960px超にはなりません。max-width と min-width を別々に書くより、意図が1行で見えます。
動作確認（検証環境と結果）
- 環境: Windows 11、Microsoft Edge 154（Chromium系、headless）。ログは
C:Tempks2techtestscss-clamp.md。 - 実行:
render.ps1で描画し、getComputedStyleでfont-sizeと要素の幅を取得しました。 - 結果（幅1200指定、実ビューポート1182px）: h1 の font-size は 45.55px、
.wrapの幅は 960px（上限）でした。計算上は 16 + 2.5% × 1182 = 45.55px で一致し、3rem（48px）未満のため上限には達していません。 - 結果（幅390指定、headlessの最小幅の都合で実ビューポートは504px）: font-size は 28.6px、
.wrapは約424.8px（504px の90%は453.6pxですが、body の余白16px×2を引いた幅の90%）でした。 - 未検証: 実機のスマートフォン、ブラウザの文字拡大・ズーム時の見え方。
CSS clampの使い方の注意点
- MDNは、文字サイズに使う場合、最大値を最小値の2倍以上にするよう注意しています。ズームで200%まで拡大できず、WCAGの「テキストのサイズ変更」を満たせない恐れがあるためです。上の例（1.5rem〜3rem）は、ちょうど2倍です。
- 単位は、最小値と最大値に
remを使うと、利用者のブラウザ設定に追従します。px固定は避けます。 - 推奨値の計算が難しいときは、デザインの2つの画面幅と文字サイズから、一次式を求めるツールもありますが、結果は必ず実機で確認してください。
- 読みやすい行の長さは、文字サイズだけでなく幅（
chやem）でも調整します。line-height・行間を参照。
CSS clampの使い方でよくあるミス
- 順番を間違える（最小値、推奨値、最大値の順です）。
- 推奨値に
vwだけを使い、ズームしても文字が大きくならない。 - 最大値を小さくしすぎ、拡大できなくなる。
calc()の中で+-の前後の空白を省略して無効になる（1rem+2vwはNG）。
ブラウザ対応・バージョン
MDNの表記では、2020年7月以降、主要ブラウザで広く使えます。それより古い環境をサポートする場合は、font-size を先に固定値で書いて、次の行で clamp() を書く（古い環境は後者を無視する）方法でフォールバックを用意できます。
h1 { font-size: 2rem; font-size: clamp(1.5rem, 1rem + 2.5vw, 3rem); }
CSS clampの使い方のチェックリスト
- 引数の順番は、最小・推奨・最大か。
- 最大値は最小値の2倍以上か（文字サイズの場合）。
- 推奨値に
remを含めて、ズームに追従するか。 - 実際の画面で、狭い幅と広い幅の両方を確認したか。
CSS clampの使い方のFAQ（よくある質問）
Q. min()とmax()との違いは？
A. min() は上限、max() は下限を作ります。clamp() は両方を一度に指定する書き方です。
Q. 余白や幅にも使えますか？
A. 使えます。padding、gap、width など、長さを受け取るプロパティで使えます。
Q. メディアクエリは不要になりますか？
A. 値が連続的に変わるものに向いていますが、列数の切り替えなどの構造の変更には、メディアクエリ や コンテナクエリ が必要です。
筆者の見解（CSS clampの使い方）
私見では、clamp() の最大の利点は「ブレークポイントの数を減らせる」ことだと考えます。ただし、計算式を理解しないまま数値をコピーすると、ズームで読めなくなるなどの不具合の原因になります。最小値・最大値は rem で、推奨値には rem と vw を組み合わせるという型を覚えておけば、実務では十分使えると思います。
