clamp() を使って流動的なレイアウトを作るには？
clamp(最小值, 偏好值, 最大值) 固定ブレークポイントを連続的なスケーリングへ変換します。計算ツールは 2 つの Viewport 幅を基準に一次関数を求めます。切片が開始サイズを決め、vw 係数が Viewport 幅の増加に応じてどれだけサイズを増やすかを決めます。計算結果が最小値を下回る、または最大値を上回る場合、ブラウザーが自動的に上下限へ固定します。
設定方法
- まず small screen で許容できる minimum size と wide screen での maximum size を決めます。
- Viewport の zoom 開始・終了範囲を設定します。一般的な範囲は 320px〜1280px です。
- slider を動かして中間サイズを確認し、CSS declaration 全体をコピーできます。
フォントの上下限には通常 rem を使うことを推奨します。これにより、ユーザーがブラウザーの既定フォントサイズを変更した場合でも、その設定を反映できます。レイアウト間隔を厳密に合わせる必要がある場合は px も利用できます。
よくある質問
CSS clamp() とは何ですか？
最小値、推奨値、最大値の 3 つを受け取ります。推奨値が範囲内ならその値を使用し、範囲を超える場合は自動的に上下限へ収められます。
preferred value が calc() と vw の組み合わせなのはなぜですか？
fixed intercept と vw scale で線形変化を表し、Viewport に応じて size を滑らかに変化させます。
px と rem はどちらを選ぶべきですか？
フォントサイズには rem を優先し、ピクセル単位で厳密な制御が必要な装飾サイズでは px を選択できます。このツールは指定したフォントサイズを基準に変換します。
padding や gap に使用できますか？
はい。CSS length 値を受け付け、かつブラウザーが clamp() に対応している property なら利用できます。
なぜ does the maximum Viewport have to be larger than the minimum Viewport のですか？
傾きを計算するには 2 点の水平位置が異なる必要があります。幅が同じだと 0 除算になり、有効な補間区間を作れません。