レッスン 5
clamp() と fluid サイズ
最小、推奨、最大の境界でレスポンシブ font-size とスペーシングを生成します。
clamp() は font-size、padding、gap、height などの数値プロパティについて、多くの段階的メディアクエリを 1 宣言に置き換えられます。
構文
clamp(MIN, PREFERRED, MAX)
ブラウザは次を選びます。
- 推奨値が小さすぎるとき
MIN - 推奨値が大きすぎるとき
MAX - それ以外
PREFERRED
例：
h1 {
font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
狭い画面ではタイトルが最低 1.5rem。広い画面では最大 2.5rem。その間はビューポート幅で成長します。
rem + vw を一緒に使う理由
純粋 vw の見出しはモバイルで読めなくなったり、ウルトラワイドで大きすぎたりします。clamp() 内で rem と vw を組み合わせると：
- rem 最小でアクセシビリティ下限
- rem 最大でレイアウト上限
- vw 中間項でfluid 成長
font-size vs スペーシングモード
font-size clamp はテキストリズムと折り返しに影響します。スペーシング clamp はセクション gap、ヒーロー padding、コンポーネント高さに影響します。
同じ数学ですが、プレビューは異なります。
- font-size プレビューは計算サイズのサンプルテキストを表示
- スペーシングプレビューは計算高さのバーまたはブロックを表示
出荷前に最小、中間、最大ビューポート幅で必ずプレビューしてください。
デザイン仕様から CSS へ
典型的なワークフロー：
- デザイナーがモバイルとデスクトップの min/max px サイズを渡す。
- レイアウトブレークポイントに合うビューポート範囲を選ぶ。
clamp(minRem, preferredRem + preferredVw, maxRem)を生成する。- CSS、カスタムプロパティ、SCSS 変数をトークンにコピーする。
出力例：
--heading-lg: clamp(1rem, 0.5rem + 2vw, 1.5rem);
clamp() を使わないとき
- レイアウト reflow のため正確に 1 ブレークポイントでスナップすべき値
- 非常に異なるルールの container query で制御されるプロパティ
- 単純な rem トークンで十分なケース
clamp() は既知の境界間の滑らかなスケーリングが欲しいときに最適です。
要点
clamp() を境界付き fluid サイズと考えます。最小可読サイズ、最大デザインサイズ、その間のビューポート駆動成長です。
スタイルシートに追加する前に、CSS Unit Converter / Clamp Generator の clamp タブで clamp 値を生成・プレビューしてください。