clamp() とは何ですか？

clamp(最小, 推奨, 最大) の3値を取る CSS 関数で、推奨値を計算したうえで最小〜最大の範囲に収めて返します。推奨値が範囲内ならそのまま、下回れば最小、上回れば最大になります。本ツールは、最小・最大サイズとビューポート幅から、この clamp() を流体タイポの形で自動生成します。

推奨値で vw と rem を混ぜるのはなぜですか？

vw はビューポート幅に比例する項で、画面幅に応じてサイズを連続的に変化させる役割を持ちます。rem の定数（切片）は、その直線を「最小VWでちょうど最小サイズ、最大VWでちょうど最大サイズ」を通るように位置合わせする役割です。傾き slope×100 を vw に、切片÷ルートを rem にして足すことで、狙った2点を通る滑らかな変化を作れます。

定数を px でなく rem で書く利点は？

rem はルート要素の font-size 基準の相対単位なので、ユーザーがブラウザの文字サイズを拡大すると rem の項も一緒に拡大します。px 固定だと拡大時に定数が動かず文字が小さく感じられることがあります。rem で書くことでユーザーの設定を尊重でき、アクセシビリティ上も有利です。

メディアクエリとどう違いますか？

メディアクエリはブレークポイントを境にサイズが段階的に切り替わりますが、clamp() の流体タイポは最小VWと最大VWの間で連続的に滑らかに変化します。どの画面幅でもバランスが取りやすく、ブレークポイントごとの上書きも減らせます。最小・最大でしっかり頭打ちになる点は共通です。

フォント以外にも使えますか？（余白や幅）

使えます。clamp() は長さを取るプロパティ全般に使えるので、margin・padding などの余白、要素の width、gap、行間などにも応用できます。本ツールが生成する値をそのまま該当プロパティに貼り付ければ、画面幅に応じて滑らかに伸縮させられます。

対応ブラウザは？

clamp() は主要なモダンブラウザ（Chrome・Edge・Firefox・Safari）で広くサポートされています。最新の情報や細かな対応状況は MDN の clamp() ページで確認してください。ごく古い環境も考慮する場合は、フォールバックとして固定サイズを併記すると安全です。

📐 CSS clamp() 生成（流体タイポ）

最小・最大サイズとビューポート幅から、画面幅に応じて滑らかに変化する clamp() を生成します。レスポンシブなフォントサイズや余白に。

最小サイズ（px）

小さい画面（最小ビューポート）での値

最大サイズ（px）

大きい画面（最大ビューポート）での値

最小ビューポート幅（px）

この幅以下で最小サイズ。例: 375（スマホ）

最大ビューポート幅（px）

この幅以上で最大サイズ。例: 1440（PC）

ルート font-size（px）

rem 換算の基準（html要素の font-size）。多くのブラウザの既定は 16px です。

生成された clamp()

—

プレビュー

ブラウザの幅を変えると、この行の文字サイズが滑らかに変化します。

※ 実際に生成した clamp() を font-size に適用しています。ウィンドウ幅を変えて確認できます。

※ 傾き slope＝(最大サイズ−最小サイズ)÷(最大VW−最小VW)、rem定数（切片）＝(最小サイズ−slope×最小VW)÷ルート、vw係数＝slope×100 で計算します。数値は小数第4位程度に丸めるため、端の実際値がごくわずかにずれることがあります。

📐 CSS clamp() 生成（流体タイポ）

入力

プレビュー