straighten

clamp() サイズ可変ジェネレーター

画面幅に応じてレスポンシブなCSSサイズ値を自動生成します

help_outlineclamp() とは?

clamp(最小値, 推奨値, 最大値) は CSS の関数で、画面幅に応じてサイズを流動的に変化させるしくみです。

📱 スマホ
最小値で固定
↔ 中間サイズ
画面幅に比例
🖥 デスクトップ
最大値で固定

format_list_numbered使い方

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