CSS clamp()計算

CSS clamp()計算は、画面幅に応じて滑らかに変化する、レスポンシブなフォントサイズのclamp()式を生成します。 入力内容はこの端末のブラウザ内で処理し、結果と前提を同じ画面で確認できます。

入力はブラウザ内で処理登録不要最終検証 2026.07.15

入力する

見えている項目だけで使えます。

詳細設定必要なときだけ変更できます

結果を見る

入力すると、すぐに更新されます。

clamp()式clamp(1.000rem, 0.793rem + 0.88vw, 1.500rem)
最小16px
最大24px
font-size: clamp(1.000rem, 0.793rem + 0.88vw, 1.500rem);

画面幅が375px以下で16px、1280px以上で24pxになり、間は滑らかに変化します。remは1rem=16pxで計算しています。

この道具の仕組み

傾き = (最大 - 最小) ÷ (最大幅 - 最小幅)。clamp(最小rem, 切片rem + 傾き×100vw, 最大rem) を組み立てます。

入力と結果の例

入力例

入力
16px〜24px、375〜1280px
結果
clamp(1rem, 0.77rem + 0.88vw, 1.5rem)

使う前に知っておくこと

  • 01入力値や前提条件によって、実際の結果と差が出る場合があります。
  • 02重要な判断に使う場合は、元資料や公式情報でも確認してください。
  • 03極端に大きい値や長い入力では、ブラウザの数値・処理上限の影響を受けます。
道具一覧へ戻る