CSS clamp計算ツール
このCSS clamp計算ツールでは、最小値と最大値、ビューポートの範囲を入力するだけで、フォントサイズ・余白・幅に使えるclamp()の式をメディアクエリなしで作成できます。
計算例：CSSプロパティ: font-size · 最小値（スマホ） 16 px · 最大値（PC） 24 px · このビューポート幅から 320 px · このビューポート幅まで 1,280 px · 基準フォントサイズ（rem） 16 px → CSS：font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);。出典：MDN – CSS clamp(): clamp(MIN, VAL, MAX)。更新日：
計算方法
clamp(最小, 値, 最大) は、値の下限と上限を決めます。ビューポート幅320 pxから1280 pxの間で16 pxから24 pxへ大きくなる文字なら、clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem) となります。
計算のしかた
2つのビューポート幅の間で、値は直線的に増えます。傾きは（最大 − 最小）/（最大幅 − 最小幅）、切片は 最小 − 傾き × 最小幅 です。切片はrem、傾きはvwで表すので、ユーザーがブラウザの文字サイズを大きくした場合も反映されます。表には、代表的な画面幅での値を示します。
知っておくと便利
- vwだけで指定した文字サイズはブラウザのズームがほとんど効かないため、式にはremの部分を含めています。
- clamp()はpadding、margin、gap、widthなど、長さを指定できる場所ならどこでも使えます。
- 現行のすべてのブラウザがclamp()に対応しています（2020年以降）。
よくある質問
フォントサイズのclamp()はどう計算しますか？
px単位の最小・最大サイズとビューポート幅を入力します。remとvwから推奨値を作り、最小値と最大値の間に収めます。
なぜ式にremの部分があるのですか？
vwだけの値はブラウザの文字サイズを無視します。remの部分があれば、文字を大きくしている人にも比例して反映されます。
clamp()は余白にも使えますか？
はい。padding、margin、gap、widthなど、長さを取るCSSプロパティなら使えます。
最後の1.5remは何ですか？
最大値です。上側のビューポート幅を超えると、それ以上は大きくなりません。基準16 pxなら1.5 remはちょうど24 pxです。
出典・根拠
- MDN – CSS clamp(): clamp(MIN, VAL, MAX)
- W3C – CSS Values and Units Module Level 4: Mathematical Expressions (min(), max(), clamp())
- W3C WCAG 2.2 – Success Criterion 1.4.4 Resize Text (テキストを200%まで拡大できること)
更新日： · 編集方針
関連ツール
- px rem 変換ツールpx rem 変換ツール。基準フォントサイズを指定して px を rem に換算し、em・pt・%・vw も同時に表示。よく使うサイズの早見表つきで、無料・登録不要です。
- CSSグラデーション ジェネレーターCSSグラデーションを作成。線形・円形・扇形に対応し、カラーストップと角度を自由に設定。プレビューを見ながら、そのまま使えるCSSをコピーできます。
- CSS box-shadowジェネレーターCSSのbox-shadowをスライダーで作成。複数の影、オフセット、ぼかし、広がり、透明度付きの色、inset、プリセットに対応し、プレビューを見ながらCSSをコピーできます。
- CSS角丸ジェネレーター（border-radius）スライダーでCSSの角丸を作成できるborder-radiusジェネレーターです。四隅まとめて・個別、pxと％、楕円の8値指定に対応。最短のコードをプレビューしてコピー。
- 欧文フォントの組み合わせ（見出し＋本文）欧文フォント 組み合わせ：見出しと本文の英語フォントのペア8組をその場でプレビュー。x-ハイト、OSごとの表示、コピーできるCSSつき。Webフォント不要です。
- コントラスト比チェッカー（WCAG 2.2）文字色と背景色のコントラスト比をWCAG 2.2の基準で計算。通常の文字・大きな文字・UI部品それぞれのAA／AAA判定と、基準を満たす近い色の提案を表示します。
- IPアドレス確認IPアドレス確認サイト。あなたのグローバルIPアドレス（IPv4・IPv6）をすぐに表示し、おおよその地域とプロバイダーもわかります。無料で、IPアドレスは保存しません。
- JWTデコード：トークンの中身と署名を確認JWTをデコードして、ヘッダー・ペイロード・有効期限（exp、iat、nbf）を表示。秘密鍵または公開鍵で署名も検証できます。ブラウザ内で処理され送信されません。
- cron式ジェネレーター：作成と解説cron式を作成・解説。式を組み立てるか貼り付けると、日本語で意味を表示し、次回の実行日時も確認できます。Unix・Spring・Quartz対応でブラウザ内で処理します。