CSS clamp() ジェネレーター

CSS clamp() ジェネレーターとは？

CSS clamp() ジェネレーターは、フロントエンド開発者やデザイナー向けの無料の流体タイポグラフィ計算ツールです。最小フォントサイズ、最大フォントサイズ、最小ビューポート幅、最大ビューポート幅を渡すと、preferred 値が rem のオフセットと vw の傾きを組み合わせた clamp(最小, preferred, 最大) 宣言が返ります。これにより文字は画面に応じて線形に拡大し、決して上下限を超えません。font-size のメディアクエリを積み重ねる必要がなくなり、見出しも本文もあらゆる端末でレスポンシブになります。プレビューサイズを選んで表示を確認し、出力単位を rem と px で切り替え、その 1 行をそのままスタイルシートにコピーできます。

CSS clamp() ジェネレーターの使い方

1. 最小フォントサイズを入力します——最も小さい画面で文字に与えたいサイズです。
2. 最大フォントサイズを入力します——最も大きい画面で文字に到達させたいサイズです。
3. サイズをスケールさせる最小・最大のビューポート幅を設定します。
4. 必要なら設定を開いて出力単位を切り替えます（rem はアクセシビリティに優れ、px も選べます）。
5. プレビューサイズを選んでそのビューポートでサンプル文字を表示し、ライブの clamp() 値を確認します。
6. 生成された clamp() 式をコピーして、CSS の font-size に貼り付けます。

使用例

最小フォント 16, 最大フォント 20, 最小vw 320, 最大vw 1240

font-size: clamp(1rem, 0.913rem + 0.435vw, 1.25rem);

最小フォント 32, 最大フォント 64, 最小vw 320, 最大vw 1536

font-size: clamp(2rem, 1.474rem + 2.632vw, 4rem);

最小フォント 12, 最大フォント 14, 最小vw 480, 最大vw 1280

font-size: clamp(0.75rem, 0.675rem + 0.25vw, 0.875rem);

よくある質問

clamp() の値はなぜメディアクエリなしでスケールするのですか？

clamp(最小, preferred, 最大) は下限・preferred（流体）値・上限を取ります。preferred 値は rem + vw の形の直線で、最小ビューポートでフォントが最小値に、最大ビューポートで最大値になるように計算されています。その幅の間はブラウザが自動で補間し、範囲外では clamp() がサイズを最寄りの境界に固定します——すべて 1 つの宣言で完結します。

出力が px ではなく rem なのはなぜですか？

固定部分に rem を使うとユーザーのブラウザのフォントサイズ設定が尊重され、アクセシビリティの面で優れています。ビューポートに依存する傾きは vw で表します。プロジェクトで絶対単位が必要なら設定で px に切り替えられますが、推奨の既定値は rem です。

どのビューポート範囲を使えばよいですか？

よくある選び方は、最小を対応する最小幅（多くは 320px か 360px）に、最大を最も広いコンテンツコンテナ（1240px〜1536px など）にすることです。フォントが完全に流動するのはその範囲内だけで、下回ると最小値、上回ると最大値に留まります。

font-size 以外の CSS の長さにも使えますか？

はい。生成される clamp() 値は単なる長さなので、padding・margin・gap など長さを受け付けるどのプロパティにも貼り付けられます。ラベルが font-size に触れているのは流体タイポグラフィが最も一般的だからで、間隔に使っても計算はまったく同じです。

データはどこかに送信されますか？

いいえ。計算はすべて JavaScript でブラウザ内で実行されます——フォントサイズやビューポート幅がサーバーに送信されることはないため、プライバシーが保たれ、ページ読み込み後はオフラインでも使えます。