CSS clamp() 生成の使い方｜画面幅で滑らかに変わる流体タイポを自動計算
公開日：2026年8月8日 対象ツール：CSS clamp() 生成（流体タイポ）
スマホでは大きすぎず、PC では小さすぎず——見出しのフォントサイズや余白を画面幅に応じて滑らかに変えたいとき、手計算で clamp() を組み立てるのは面倒です。CSS clamp() 生成は、最小サイズ・最大サイズと、それを適用する最小・最大のビューポート幅を入力するだけで、画面幅に比例して連続的に伸縮する clamp() を自動で組み立てるツールです。流体タイポグラフィ（fluid typography）に必要な計算をすべて肩代わりします。
このツールでできること
- clamp() の自動生成：最小・最大サイズ（px）と最小・最大ビューポート幅（px）から、画面幅に応じて滑らかに変化する clamp(最小, 推奨, 最大) を組み立てます。
- rem 併記と内訳表示：推奨値を「rem の定数（切片）＋ vw の項」で表し、傾き slope・vw係数・rem定数の内訳を確認できます。定数を rem で書くのでユーザーの文字拡大にも追従します。
- 端点の実際値チェック：最小ビューポート幅と最大ビューポート幅それぞれで、実際に何 px になるかを表示。狙った2点をちょうど通ることを目視で確かめられます。
使い方
- 「最小サイズ」と「最大サイズ」（px）を入力します。小さい画面での値と大きい画面での値です。
- 「最小ビューポート幅」と「最大ビューポート幅」（px）を入力します。この範囲でサイズが滑らかに変化します（例: 375〜1440）。
- 「ルート font-size」（px）を入力します。rem 換算の基準で、既定は 16px です。
- 生成された clamp() と、傾き slope・rem定数・vw係数の内訳、両端の実際値を確認します。
- 「CSSをコピー」で値を控え、font-size や margin・padding などに貼り付けて使います。
こんなときに便利
たとえば最小 16px・最大 24px・ビューポート幅 375〜1440px・ルート 16px と入れると、傾き slope は約 0.007512、切片は約 13.18px（約 0.8239rem）、vw係数は約 0.7512vw となり、結果は clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem) になります。この式は幅 375px でちょうど 16px、幅 1440px でちょうど 24px を通り、その間は画面幅に比例して滑らかに変化します。見出しの font-size はもちろん、セクション間の余白（margin・padding）や行間、要素の幅など、画面幅に応じて伸縮させたいあらゆる長さに同じ要領で使えます。最小サイズは可読性の下限、最大サイズはレイアウトが崩れない上限として決めると扱いやすくなります。
よくある質問
clamp() とは何ですか
clamp(最小, 推奨, 最大) の3値を取る CSS 関数で、推奨値を計算したうえで最小〜最大の範囲に収めて返します。推奨値が範囲内ならそのまま、下回れば最小、上回れば最大に固定されます。本ツールは、最小・最大サイズとビューポート幅から、この clamp() を流体タイポの形で自動生成します。
推奨値で vw と rem を混ぜるのはなぜですか
vw はビューポート幅に比例する項で、画面幅に応じてサイズを連続的に変化させる役割です。rem の定数（切片）は、その直線を「最小VWでちょうど最小サイズ、最大VWでちょうど最大サイズ」を通るように位置合わせする役割です。傾き slope×100 を vw に、切片÷ルートを rem にして足すことで、狙った2点を通る滑らかな変化を作れます。
定数を px でなく rem で書く利点は
rem はルート要素の font-size を基準にする相対単位なので、ユーザーがブラウザの文字サイズを拡大すると rem の項も一緒に拡大します。px 固定だと拡大時に定数が動かず、文字が意図より小さく感じられることがあります。rem で書くことでユーザーの文字設定を尊重でき、アクセシビリティ上も有利です。
メディアクエリとどう違いますか
メディアクエリ（@media）はブレークポイントを境にサイズが段階的にカクッと切り替わりますが、clamp() の流体タイポは最小VWと最大VWの間で連続的に滑らかに変化します。どの画面幅でもバランスが取りやすく、ブレークポイントごとの上書きも減らせます。最小・最大でしっかり頭打ちになる点は共通です。
clamp() は Chrome・Edge・Firefox・Safari など主要なモダンブラウザで広くサポートされています。定数を rem で書いておくと閲覧者の文字拡大に追従するため、アクセシビリティの面でも安心です。ごく古い環境も考慮する場合は、フォールバックとして固定サイズを併記しておくと安全です。まずは手元の値を入れて、両端の実際値を確かめてみてください。