clamp() とは?
clamp(最小値, 推奨値, 最大値) は CSS の関数で、画面幅に応じてサイズを流動的に変化させるしくみです。
📱 スマホ
最小値で固定
↔ 中間サイズ
画面幅に比例
🖥 デスクトップ
最大値で固定
使い方
1
最小サイズ・最大サイズを入力します。スマホで使いたいサイズ(例:16px)とデスクトップで使いたいサイズ(例:32px)を指定します。
2
最小 viewport・最大 viewport を入力します。スマホの基準となる画面幅(例:375px)とデスクトップの基準となる画面幅(例:1400px)を指定します。
3
モードを選択して生成された clamp() をコピーします。CSS の
font-size や padding・gap などの値にそのまま貼り付けて使えます。正確モード(vw + rem)
線形補間の切片を rem で補正するため、指定したブレークポイントで数学的に正確な値になります。精度が必要な場面におすすめです。
clamp(1rem, 1.45vw + 0.55rem, 2rem)
シンプルモード(vw のみ)
vw のみのシンプルなコードです。切片補正がないためブレークポイント付近でわずかにずれますが、clamp の上限・下限で自動補正されるため実用上の影響は最小限です。
clamp(1rem, 2.29vw, 2rem)
パラメーター入力
px
px
画面幅のブレークポイント
px
px
生成された clamp()
vw のみのため、ブレークポイント付近でわずかにずれる場合があります。clamp の上限・下限が補正するので見た目の影響は最小限です。
傾き
切片
補間範囲
プレビュー
こんにちは!123!