CSS Clamp計算ジェネレーター
画面幅に合わせて滑らかに可変するclamp()関数の値を自動計算します。
リアルタイムプレビュー
フルイドタイポグラフィ
すべての人間は、生まれながらにして自由であり、かつ、尊厳と権利とについて平等である。
このツールについて
CSS Clamp 計算ジェネレーターは、CSSの clamp() 関数を使って、画面幅に応じて滑らかに変化するフォントサイズ（フルイドタイポグラフィ）や余白のコードを自動生成するツールです。
最小・最大の要素サイズと画面幅を入力するだけで、最適な clamp() の計算式を自動算出します。変化の様子をグラフとリアルタイムプレビューで直感的に確認でき、CSS変数やTailwind CSS形式でのコード出力にも対応しています。
すべての計算はブラウザ内で行われ、サーバーへのデータ送信は一切ありません。アカウント登録不要で、今すぐ無料でご利用いただけます。
使い方
パラメータを設定
最小・最大のビューポート幅とサイズを入力します。フォントサイズ以外のプロパティ（margin, padding等）に適用することも可能です。
グラフ＆プレビューで確認
変化グラフで画面幅ごとのサイズ推移を視覚的に確認できます。プレビューエリアでは疑似的にビューポート幅を変更し、実際の見え方を確認します。
コードをコピー
CSS、CSS変数、Tailwind形式からお好みのフォーマットを選んでコピーボタンをクリック。そのままプロジェクトに貼り付けてご利用ください。
用語集
- clamp()
- CSSの比較関数で、
clamp(min, preferred, max)の形式で値の下限と上限を設定します。レスポンシブデザインにおいて、メディアクエリなしで滑らかな可変を実現する強力な手段です。 - vw (viewport width)
- ビューポート幅の1%に相当するCSS単位です。例えば、画面幅が1000pxのとき
1vwは10pxとなります。画面幅に連動した可変値を計算する際に不可欠な単位です。 - rem
- ルート要素（通常は
<html>）のフォントサイズを基準とするCSSの相対単位です。ユーザーのブラウザ設定を尊重し、アクセシビリティを高めるために px ではなく rem の使用が推奨されます。 - フルイドタイポグラフィ (Fluid Typography)
- 特定のブレイクポイントで段階的に文字サイズを切り替えるのではなく、ビューポート幅に応じてシームレスにフォントサイズが変化するデザイン手法です。画面サイズ問わず最適な読みやすさを提供します。
- preferred value
clamp()関数の第2引数として指定する理想値です。当ツールではintercept(rem) + slope × 100(vw)という一次関数の形で、最小値から最大値へ滑らかに遷移する式を算出しています。
技術解説
CSSの clamp() 関数によるフルイドタイポグラフィは、数学の一次関数の原理に基づいています。
計算式の導出
最小サイズ（minSize）、最大サイズ（maxSize）、最小ビューポート幅（minVW）、最大ビューポート幅（maxVW）から、以下の式で傾き（slope）と切片（intercept）を求めます：
- slope = (maxSize - minSize) / (maxVW - minVW)
- intercept = minSize - slope × minVW
これらを用いて、preferred値は intercept(rem) + slope × 100(vw) として計算されます。
メディアクエリとの違い
従来の @media による段階的切り替えでは、ブレイクポイントごとにサイズが不連続に（階段状に）変化します。clamp() を使うことで、あらゆる画面幅で自然にスケーリングする滑らかな（直線的な）変化が実現できます。コードの記述量も大幅に削減されるため、メンテナンス性も向上します。
FAQ
- Q.データはサーバーに送信されますか？
- いいえ。すべての計算処理はブラウザ内で完結するため、外部へのデータ送信は一切ありません。安全にご利用いただけます。
- Q.IE（Internet Explorer）でも使えますか？
- いいえ。Internet Explorerは
clamp()関数に対応していません。Chrome、Firefox、Safari、Edgeなどの最新のモダンブラウザでご利用ください。 - Q.フォントサイズ以外にも使えますか？
- はい。
padding、margin、gap、widthなど、CSSのあらゆる長さプロパティに対してclamp()は利用可能です。当ツールでも適用プロパティを選択してコード生成が可能です。 - Q.出力コードで px ではなく rem を使っているのはなぜですか？
- アクセシビリティの観点から rem の使用が推奨されるためです。ユーザーがブラウザ設定で基本の文字サイズを大きくしている場合、px 指定だとその設定が無視されてしまいますが、rem 指定なら設定に合わせて適切にスケールします。
- Q.計算式の仕組みはどうなっていますか？
- 最小・最大のビューポート幅とサイズの値を用いて一次関数の「傾き」と「切片」を算出し、vw 単位を用いた
preferred valueを生成しています。これにより、指定区間内で比例して変化する値が導き出されます。
活用シーン
📱レスポンシブWebサイト制作
スマホからデスクトップまで、たった1行のCSSで見出しや本文のサイズを滑らかに可変させることができます。煩雑なメディアクエリの管理が不要になります。
🧩デザインシステム構築
タイポグラフィスケール全体を clamp() で統一管理できます。CSS変数として出力すれば、プロジェクト全体のデザイン・トークンとしてすぐに利用可能です。
📏余白・間隔の可変化
フォントサイズだけでなく、padding や margin、グリッドの gap など余白も clamp() で定義することで、画面全体が比例してスケーリングする美しいレイアウトが実現します。
🤝アクセシビリティ対応
rem 単位ベースの出力により、ユーザーのブラウザフォントサイズ設定を尊重します。WCAGガイドラインにも適合した、ユーザーに優しいレスポンシブデザインを提供します。
フィードバックを送信
ツールをより良くするためのご意見をお聞かせください。
現在、フィードバックの受付を一時停止しています
サーバーが混み合っているか、スパム防止のための安全装置が作動しています。しばらく経ってから再度アクセスしてください。