CSS clamp() ジェネレーター

CSS の clamp() 関数とは

clamp() は、サイズを「下限・推奨値・上限」の3つで指定できる CSS 関数です。書式は次のとおりです。

clamp(最小値, 推奨値, 最大値)

推奨値が最小値より小さくなれば最小値で、最大値より大きくなれば最大値で止まります。この推奨値に vw(ビューポート幅の 1% を表す単位)を含めることで、画面幅に応じてフォントサイズや余白をなめらかに変化させつつ、小さすぎ・大きすぎを自動で防ぐことができます。メディアクエリを何段も書かずに、1行でレスポンシブなサイズを表現できるのが最大の利点です。

clamp(vw) の計算式 — このツールが自動化していること

「画面幅が小さいときのサイズ」と「大きいときのサイズ」の2点を決めると、その間は一次関数(直線)で結べます。2点を (W1, S1)・(W2, S2) とすると、推奨値は次のように求まります。

傾き  slope = (S2 - S1) / (W2 - W1)
切片  b     = S1 - slope × W1
推奨値      = calc( b px + slope×100 vw )

例として「画面幅 320px で 24px、1280px で 44px」を入れると、次の clamp() が得られます。

clamp(24px, calc(17.333px + 2.083vw), 44px)

このツールは、上の calc() の係数計算と、px / rem の単位換算(ルートフォントサイズ基準)をまとめて自動で行います。手計算で間違えやすい傾きと切片を、入力した瞬間に正確に出力します。

使い方

• 最小側・最大側それぞれに「画面幅」と「サイズ」を入力します。最小側は小さい画面、最大側は大きい画面の値です。
• 右上の px / rem ボタンで出力単位を切り替えられます。rem を選ぶとルートフォントサイズ(既定 16px)を基準に自動換算します。
• 「コピー」ボタンで生成された clamp() をクリップボードに保存できます。
• 「カードを追加」で、見出し・本文・余白など複数のサイズを一度にまとめて計算できます。入力内容はブラウザに自動保存されます。

実例 — よく使う clamp() の値

レスポンシブ設計でそのまま使える典型値の例です。いずれも画面幅 320px〜1280px を想定しています。

見出し(h1)のフォントサイズ

font-size: clamp(28px, calc(17.333px + 3.333vw), 60px);

本文のフォントサイズ

font-size: clamp(15px, calc(13.667px + 0.417vw), 18px);

セクションの上下余白

padding-block: clamp(40px, calc(13.333px + 8.333vw), 120px);

本文のフォントサイズは rem 指定にしておくと、ユーザーのブラウザ文字サイズ設定にも追従でき、アクセシビリティ面で安全です。

よくある質問(FAQ)

clamp() の単位は px と rem どちらを使うべき？

フォントサイズはアクセシビリティの観点から rem を推奨します。rem はユーザーのブラウザ文字サイズ設定に追従するためです。固定の装飾や余白では px でも問題ありません。このツールは px / rem をワンクリックで切り替えて換算できます。

ブレークポイント(メディアクエリ)と併用するには？

サイズの連続的な変化は clamp()、レイアウト構造の不連続な切り替え(1カラム→2カラムなど)はメディアクエリ、と役割分担します。clamp() でフォント・余白を制御すれば、メディアクエリの記述量を大きく減らせます。

vw だけ・calc() だけと何が違う？

vw 単体は画面幅に比例して無限に拡大・縮小してしまい、極端な画面で読みにくくなります。clamp() は calc(...vw) を最小値・最大値で挟むことで、その「行き過ぎ」を防ぎます。clamp(vw) 計算の本質は、calc() の傾き・切片を正しく求めることにあります。

対応ブラウザは？

clamp() は主要なモダンブラウザ(Chrome / Edge / Firefox / Safari)で広くサポートされています。レスポンシブなフォントサイズ計算や余白計算で安心して利用できます。

このツールは無料ですか？

はい、登録不要・無料で利用できます。入力値はサーバーに送信されず、ブラウザ内(localStorage)にのみ保存されます。