開発者

CSS clamp() ジェネレーター

2つの画面幅の間で流動的なCSS clamp()サイズ(レスポンシブ文字)を生成。

  • 即時
  • 無料
  • プライベート(ローカル処理)
  • 登録不要
プレビュー(ウィンドウ幅を変更)
流動的タイポグラフィ

画面に追従するサイズ

最小・最大サイズと対応する画面幅を入力すると、CSSに貼るclamp()値を計算。ウィンドウ幅に反応するプレビュー付き。

  1. 最小/最大サイズ

    例:16px〜24px。

  2. 基準の画面

    例:320px〜1280px。

  3. clamp()をコピー

    font-size、padding等へ。

例:16 → 24px(320 → 1280px)

項目
最小/最大16px / 24px = 1rem / 1.5rem
画面320px → 1280px
流動的傾き0.833vw
結果clamp(1rem, 0.833rem + 0.833vw, 1.5rem)

320pxで16px、1280pxで24px、その間は線形に変化。計算は100%ローカル。

よくある質問

clamp() は何のため?

CSSの clamp(最小, 推奨, 最大) は値を最小と最大の間に収め、推奨値は画面幅に適応します。メディアクエリなしで流動的な文字サイズを作る現代的な方法です。

推奨値はどう計算?

(最小幅, 最小サイズ)と(最大幅, 最大サイズ)の間に直線を引きます。中央部分は固定のrem基準とvwの傾きを組み合わせ、例:0.833rem + 0.833vw。remの最小/最大で制限します。

なぜremとvwを混ぜる?

vwはビューポート幅でサイズを伸ばし(流動性)、remは傾きがゼロから始まらないよう固定の基準を加えます。組み合わせで線形で読みやすい増加になり、ユーザーのズームも尊重します。

最小と最大は必要?

はい。境界がないと小画面で極小、超大画面で巨大になります。clamp() は基準幅の範囲外で値を固定します。