CSS clamp()計算ツール

このCSS clamp計算ツールは、画面サイズに応じて滑らかに変化するレスポンシブなclamp()の値を正確に計算します。値を推測して設定する必要はありません。

最終更新日: 2026 年 9 月 23 日

出力をスタイルシートに直接貼り付けます。傾き、切片、ビューポートのスケーリングなどの計算を処理します。境界を定義するのはあなたです。それが表現を構築します。

機能:

• 完全な構文を強調表示して clamp(min, preferred, max) を生成します。

• 同等の max()/min() 式を出力します。これは、clamp() の前に min() と max() をサポートした Safari 11.1 ～ 13.0 に役立ちます。

• ルート フォント サイズを考慮して、px と rem の間で自動的に変換します。

• すべての主要なブレークポイントで正確な値を表示します (320px → 1920px)

• ライブ値曲線グラフをレンダリングして、流体の遷移を視覚的に確認できるようにします

• すぐに開始点を設定できる 8 つのプリセット (本文、H1 ～ H3、キャプション、ギャップ S/M/L) が含まれています

それが重要な理由:

流動的なタイポグラフィーと間隔を手動で行うと、エラーが発生しやすくなります。 1 つの数式がロックされています。計算機は入力を検証し、反転した範囲について警告し、ワンクリックでプロパティ宣言または生の値をコピーできるようにします。

完全にブラウザ内で動作します。ビルド手順もアカウントもありません。

CSSクランプとは何ですか?

CSS クランプはネイティブの CSS (EN) 数学関数で、設定された最小値と最大値の間の値を制限し、ビューポート (EN)に合わせて調整される流動的な中間値を使用します。

clamp(MIN, PREFERRED, MAX) という 3 つの引数を取ります。

ブラウザは、いずれかの境界に達するまで、優先される値を選択します。最小値を下回ると、最小値が優先されます。最大値を超えると、最大値が優先されます。

メディア クエリ (EN)は必要ありません。 CSS の 1 行で全範囲を処理できます。

CSS クランプ計算機はどのように機能しますか?

最小値、最大値、およびビューポートのブレークポイントを入力します。電卓は、すぐにコピーできる clamp() 宣言を即座に出力します。

ほとんどの人はこれを手動で行うことを省略します。計算には線形補間と vw 勾配の計算が含まれますが、ツールなしで正しく計算するのは困難です。

電卓に必要な入力

• 最小値: プロパティの最小値 (px または rem)

• 最大値: 上限

• ビューポートの最小幅: スケーリングが開始される場所

• 最大ビューポート幅: スケーリングが停止する場所

電卓の出力内容

正しい vw ベースの中間引数を含む完全な clamp() 宣言。

また、 計算された傾きとrem変換された切片も表示され、設計システムを構築していて、各値の由来を追跡する必要がある場合に役立ちます。

出力の背後にある数学

計算機は線形内挿式を使用して、傾き (vw 内) と切片 (rem 内) の 2 つを求めます。

傾き = (maxValue − minValue) / (maxViewport − minViewport)

その傾きは、優先引数の vw 部分になります。切片によりラインがシフトされ、正しいビューポート幅で最小点と最大点を通過します。

デフォルト (320px と 1440px のビューポートの間で 16px から 24px) では、傾きは 8 ÷ 1120 = 0.00714、つまり 0.7143vw で、切片は 16 − 0.00714 × 320 = 13.71px (0.8571rem) です。出力は clamp(1rem, 0.7143vw + 0.8571rem, 1.5rem) となります。

CSS クランプ計算機とは何ですか?

CSS クランプ計算ツールは、最小サイズ、最大サイズ、および 2 つのビューポート幅を、すぐに貼り付けられる単一のclamp() 宣言に変換するブラウザベースのユーティリティです。

これは、デバイス間でのテキストと間隔のレンダリング方法を制御する言語である CSS (EN) の流動的なサイズ設定の背後にある手動計算を削除するために存在します。

ツール自体はブラウザや仕様の一部ではありません。これは、最新のすべてのレンダリング エンジンにすでに搭載されているネイティブ関数の上に位置します。

2 つの別々のこと:

• 電卓: 入力フィールドと生成された出力文字列を含むページ
• Clamp() 関数: 電卓が作成する実際の CSS 構文

Utopia.fyi などのツールはこれをさらに進化させ、1 つの個別の値ではなく完全な流体タイプのスケールを生成します。

これらのツールのいずれかにフォント サイズの範囲を入力すると、数秒で有効な CSS が表示され、手動で傾きを計算する必要はありません。

CSS クランプ関数の構文と必須パラメーター

Clamp() 関数は、コンマで区切られた 3 つの引数を固定順序 (最小値、優先値、最大値) で受け取ります。

• 最小値: 最低値。優先値がそれを下回る場合に常に使用されます。
• 優先値: ブラウザが使用しようとする値。通常はビューポートベースの式です。
• 最大値: 上限。優先値がそれを超える場合に使用されます。

各引数には、長さ、パーセンテージ、または calc()、min()、max() などの別の数学関数を指定できます。

最小値を最大値より大きく設定してしまうのは、よくある記述ミスです。仕様上は最小値が優先され、最大値は無視されます。そのため関数が壊れたように見えますが、実際の原因は引数の順序です。

文字列が生成されると、他のサイズの場合と同じように、font-size:clamp(1rem, 2.5vw, 2rem); のようにプロパティ値に直接挿入されます。

クランプ式による推奨値の計算方法

ほとんどの場合、clamp() 内の推奨値は、2 つの点が直線で結ばれた小さな線形補間問題です。

計算機は、指定された 2 つのビューポート (EN)幅を使用してこれを自動的に実行するため、デザインが変更されるたびに手動で傾きを計算する必要はありません。

最小値と最大値の間の傾きの計算

傾きは、ビューポート幅が最小のときの最小サイズとビューポート幅が最大のときの最大サイズの間の変化率です。

必要な入力:

• 最小ビューポート幅での最小フォント サイズ
• 最大ビューポート幅での最大フォント サイズ
• ビューポートの最小幅
• 最大ビューポート幅

2 つのサイズを減算し、2 つの幅を減算して、最初の結果を 2 番目の結果で除算します。その数値は、最終宣言でビューポート ユニットに付加される乗数になります。

傾きを calc() 式に変換する

傾きの値が単独で存在することはありません。これはビューポート単位で乗算され、固定rem オフセットに追加されます。

その固定オフセットは y 切片で、実際のブラウザではその幅でレンダリングできない場合でも、ビューポート幅が 0 のときにラインがヒットする値です。

典型的な結果は、clamp() 宣言の流動的な半分であるcalc(1rem + 1.5vw) を読み取ります。

ブラウザーはその式をページ読み込み時に一度ではなく、リフローごとに解決します。そのため、ウィンドウのサイズが変更されてもテキストが拡大縮小し続けます。

CSS クランプ計算機がサポートする単位: px、rem、em、vw

ほとんどの電卓は px を入力として受け入れ、数式を実行する前にそれを暗黙的に rem に変換します。これは、rem が実際にユーザーのブラウザ設定を尊重するためです。

Firefox は、2020 年 4 月に出荷されたバージョン 75 以降、clamp() をサポートしています (MDN (EN))。現在、すべての主要なエンジンが関数内でこれら 4 つのユニットを同じ方法で処理します。

フォント サイズの単位として rem が推奨される理由

rem はルート font-size、html 要素に設定された基本サイズを基準にしており、通常はデフォルトで 16px です。

ブラウザ設定を通じてルート サイズを変更すると、すべての rem ベースのクランプ値が自動的にそれに合わせてスケーリングされます。

px の違い:

• ユーザーが何を変更しても px は固定されます
• em は親のフォント サイズと複合するため、ネストされたコンポーネント内で乱雑になります。

ピクセル サイズとrem サイズの違い (EN)は、まさにこの場所で最も重要です。これは、ピクセル上に構築された Clamp() がそのスケーリング動作からページをサイレントにオプトアウトするためです。

vw が式の流体部分に寄与するもの

クイックリファレンス:

• 1vw はビューポート幅の 1% に相当します
• 100vw はブラウザのビューポートの全幅に相当します

vw は値をそのビューポートの幅に結び付けます。これが、clamp() に滑らかで段階的なスケーリングを与えるものです。

これがなければ、優先値は単なる別の固定数値となり、式の流動的な部分は完全に消えてしまいます。

CSS のビューポート ベースのユニット (EN)を中心に構築された計算機がこの変換を処理するため、パーセンテージの計算を手動で覚える必要はありません。

Clamp() calc()、min()、max() との比較

実際には、clamp() は 4 番目の関数ではなく、連携して動作する他の 3 つの関数の略記です。

MDN は関係を直接文書化しています。clamp(MIN, VAL, MAX) はmax(MIN, min(VAL, MAX)) に解決されるため、ブラウザは値が計算されるたびに小さなネストされた比較を実行します。

キャッピングが必要ない場合は、calc() のみにアクセスしてください。必要のない場所に境界を追加しても、無駄に複雑さが増すだけです。

範囲の片側だけが重要な場合、たとえば画像の最大幅が必要な場合は、min() または max() を使用します。フロアは必要ありません。

メディア クエリの代わりに Clamp() を使用する場合

いくつかの固定ブレークポイントは、実際のデバイスの幅をすぐにカバーできなくなります。現在、携帯電話だけでも数十の異なるビューポート サイズで出荷されています。

新しい幅が 2 つのブレークポイントの間に入るたびに、誰かが別のメディア クエリ (EN)を追加してテストする必要があります。これにより、clamp() によってまさにメンテナンス コストが削減されます。

それぞれのアプローチが成功する場合:

• Clamp() は、単一の値 (フォント サイズ、パディング、最大幅) をスムーズにスケーリングする場合に優れています。
• メディア クエリはレイアウトの再構築に依然として有利です。グリッドを 1 列から 3 列に切り替え、サイドバーを非表示にします。
• 運用環境では両方を組み合わせるのが一般的です。スケーリングにはクランプ()、構造変更にはメディア クエリを使用します。

Piccalil.li にある Andy Bell の Fluid Type チュートリアルでは、clamp() と CSS カスタム プロパティから型システム全体を構築し、ブレークポイント ベースのフォント サイズ変更を完全にスキップしています。

2 つのアプローチは、同じスタイルシート内で相互に排他的ではありません。ほとんどの実稼働サイトは依然として、レイアウト変更のためのブレークポイントを備えたレスポンシブ デザイン (EN) パターンに依存しており、一方で、その間の継続的なスケールを Clamp() に処理させています。

rem または px: アクセス可能なクランプ値の単位の選択

rem は、テキストに関連付けられた Clamp() 値のより安全なデフォルトです。これは、rem はユーザーのブラウザのフォント サイズ設定に応答しますが、px は応答しないためです。

ウェブ コンテンツ アクセシビリティ ガイドライン、達成基準 1.4.4 では、200% ズーム時にコンテンツが失われることなく、テキストが読みやすく機能し続けることを要求しています (W3C、WCAG 2.1 (EN))。

MDN 自身の Clamp() ドキュメントはその要件を直接反映しており、clamp() がフォント サイズを制御する場合は必ず最大値の境界を最小値の 2 倍以上にすることを推奨しています。

WebAIM の 2018 年ロービジョン ユーザー調査 (EN)では、回答者の 44.0% がブラウザのズーム コントロールを使用していると報告し、36.7% が特にブラウザのテキスト サイズ設定を使用していると報告しました。この 2 つのメカニズムは、選択した単位によって動作が異なります。

2 つのユニットのどちらを選択するかは、見た目の好みだけでなく、ウェブ アクセシビリティ (EN)への準拠の問題でもあります。

rem: クランプ値の長所と短所

長所:

• ユーザーのブラウザのテキストサイズ設定に応じて拡大縮小します
• そのままの状態で WCAG のテキスト サイズ変更の期待に一致します
• ページ全体でルート フォント サイズに対する一貫した比率を維持します。

短所:

• ルートのフォントサイズが CSS リセットによってリセットされていないことを確認する必要があります
• ピクセル単位で考えることに慣れているデザイナーにとっては若干直感的ではありません

アクセシブルなタイポグラフィ (EN)に関するほとんどのガイダンスは、まさにこの理由から、デフォルトの単位としてremを採用しています。

px: クランプ値の長所と短所

長所:

• すべてのブラウザで予測可能なピクセルごとの出力
• 正確なピクセル値を指定するデザイン ファイルとの一致が容易になります。

短所:

• ユーザーのブラウザのテキストサイズ設定を完全に無視します
• WCAG の 200% サイズ変更要件を単独で満たさない可能性がある
• ルートのフォントサイズがデフォルトのままだと、rem よりも実際の利点はありません。

アクセシビリティのスケーリングが目的ではない、テキスト以外のプロパティ、境界線の幅、または固定アイコン サイズ用の px ベースの Clamp() 値を予約します。

クランプ機能のブラウザサポート

Clamp() は、更新を受信しているすべてのブラウザで実行され、何年も実行されています。

Can I Use (EN) によると、2026 年 8 月の時点でグローバル ブラウザのサポートは 96.25% となっており、StatCounter GlobalStats によるデスクトップとモバイルの使用シェアを合わせています。

主要な数値:

• グローバル サポート: 追跡されたブラウザ使用量の 96.25% (Can I Use、StatCounter GlobalStats、2026 年 8 月)
• ベースライン ステータス: 2020 年 7 月からブラウザー全体で利用可能、2023 年 1 月から広く利用可能 (Web 機能プロジェクト、MDN 経由で引用)
• Chrome: 2019 年 12 月リリースのバージョン 79 からサポート (使用できますか)
• Safari: 2020 年 3 月リリースのバージョン 13.1 からサポート (使用できますか)

Edge は、その 1 か月後の 2020 年 1 月のバージョン 79 でサポートを開始しました。これは、Chrome と同じ Blink エンジンでの最初のリリースでした。

残りのギャップは、ほぼ完全に古い Android WebView のインストールと、2020 年以前のビルドに固定されたエンタープライズ ブラウザーのプールの縮小にあります。

このギャップはまさに、これらの環境をサポートしているプロジェクトにおいてブラウザ間の互換性 (EN)計画を立てる際に考慮する必要があるものです。

流体クランプ値の段階的な計算

計算機を使用するとこれが自動化されますが、手動で一度実行すると、後で出力を信頼してデバッグしやすくなります。

1. 最小のフォント サイズと、それが適用されるビューポートの幅を選択します。
2. 最大フォント サイズとそれが適用されるビューポートの幅を選択します。
3. 2 つのサイズを減算し、2 つの幅を減算し、最初の結果を 2 番目の結果で割って傾きを取得します。
4. 傾きに 100 を乗算して vw 係数に変換します。
5. y 切片を求める: 最小サイズから傾きを引いた値と最小幅を掛けた値
6. 3 つの引数を clamp(min, coefficient vw + intercept, max) に組み立てます。

出荷前にレンジの両端で結果を確認してください。値は、最小幅では正確に最小値に、最大では正確に最大値に到達する必要があります。

ここでよくある間違いは、係数をパーセンテージで書くことです。 font-size 内のパーセンテージはビューポートではなく親フォント サイズに対して解決されるため、0.7143vw のように vw 単位が必要です。

クランプ値を自動的に生成するツール

電卓は計算を保存します。あるツールと別のツールを区別するのは、CSS が生成された後に何が起こるかです。

Aleksandr Hovhannisyan のオープンソースの Fluid Type Scale Calculator は、1 つの独立した値ではなく、名前付きフォント サイズ変数のセット全体を生成し、既存の設計システムにすぐに組み込むことができます。

古いブラウザ ビルドをまだサポートしているチームは、実行時ではなくビルド時に Clamp() を min()/max() の組み合わせに書き換える PostCSS プラグインであるpostcss-clamp を追加することがあります。これは、clamp() より前に min() と max() を出荷したブラウザ、主に Safari 11.1 ～ 13.0 のみに役立ちます。

Sass にはネイティブの流体計算がなかったので、同等のものは常に、電卓が自動的に行うのと同じ傾き計算を行う手書きのミックスインを使用していました。

Clamp() が機能しない、または回避する必要がある場合

Clamp() は常に適切なツールであるとは限りません。いくつかの状況では、まったく別のものが必要になります。

不十分な点:

• レガシー プロジェクトは依然として Internet Explorer をサポートしていますが、どのバージョンでも Clamp() を受け取ったことがありません (使用できますか)
• スムーズなスケールではなく、特定のブレークポイントでのハード ジャンプが必要なレイアウト、たとえば、768 ピクセル以下で完全に消える必要があるサイドバーが必要なレイアウト
• 最小値と最大値が十分に近くにあるため、固定サイズが同一に見えるため、clamp() が追加され、目に見える見返りがなく複雑になります。
• 固定サイズのロゴ マークなど、デザイン ファイルでスケーリングの許容範囲を持たずに正確なピクセル値を指定するプロパティ

引数の順序を逆にすることは、最も一般的な作成ミスであり、最小値が属する場所に最大値を設定します。

宣言はエラーになりません。黙って間違った番号を返すだけです。

3つの引数でpx、rem、vwなどの長さの単位を混在させても問題ありません。一方、長さと角度、長さと単位のない数値など、互換性のない型を混在させると宣言全体が無効になります。ブラウザはエラーを出さずにその宣言を無視します。

従来のサポートを完全に廃止できないプロジェクトでは、最初に宣言されたプレーンな固定値とその後の Clamp() 行を組み合わせることができるため、clamp() を理解できないブラウザでも固定サイズが維持されます。

タイポグラフィ以外のユースケース: Clamp() を使用した間隔、幅、レイアウト

フォント サイズは、clamp() の最も一般的な用途ですが、同じ 3 つの引数のロジックが長さベースの CSS プロパティに適用されます。

Clamp() による流体の間隔

パディングとマージンの値はフォント サイズとまったく同じようにスケールされ、小さな画面では最小値、大きな画面では最大値、そしてその間の流動的な vw ベースの値になります。

一般的な候補者:

• セクションパディングにより、コンテンツが小さな画面で端に埋もれたり、大きな画面で不自然に浮いたりすることがなくなります
• フレックスまたはグリッド レイアウト内のギャップ値
• 積み上げられた見出しと段落の間の余白

傾きの計算はフォント サイズに使用されるものと同じです。プロパティ名と最小値/最大値のみが変更されます。

クランプ()を使用した場合の液体コンテナの幅

コンテナの最大幅は、clamp() を使用して、小さな画面をいっぱいにしながら、大きなモニターでコンテンツが広がりすぎるのを防ぐことができます。

一般的なパターンはwidth:clamp(320px, 90%, 1200px);で、硬い床と天井の間にコンテナを流動的に保ちます。

これは、グリッド システム (EN) が外側の境界を定義する方法と直接重複します。どちらも、極端な幅でコンテンツを読みやすく保つという同じ問題を解決しているからです。

Utopia などの流動的なデザイン システムでは、フォント サイズだけでなく、間隔と幅のトークンも Clamp() 式として出荷されます。

よくある質問：CSS clamp()計算ツール

CSS clamp計算ツール は Clamp() 関数と同じものですか?

いいえ。CSS クランプ計算機は、構文を出力するフロントエンド ツールです。 clamp() 自体は、ブラウザが実行するネイティブ CSS 関数であり、CSS Values and Units モジュールの一部です。計算機は本番環境に出荷されることはなく、生成される宣言のみが出荷されます。

Clamp() を calc() 内にネストできますか?

はい。 Clamp() は calc() 式内に置くことができ、calc() は Clamp() 引数内に置くこともできます。ネストは、 関数の優先値引数内で流動的な vw 値と固定の rem オフセットを組み合わせる場合に一般的です。

Clamp() は CSS カスタム プロパティで動作しますか?

はい。 Clamp() の引数はすべて、 リテラル値の代わりにCSS カスタム プロパティを参照できます。設計システムでは多くの場合、最小値、優先値、および最大値を変数として保存し、数値を繰り返さずに複数のコンポーネントに同じクランプ() パターンを適用します。

Clamp() は負の値を生成できますか?

はい、3 つの引数がすべて負の数に解決される場合、clamp() は負の結果を返します。これは、 裁ち落としレイアウトに使用される負の余白に現れます。正の引数と負の引数が混在していても、同じ最小値、優先値、最大値のロジックに従って通常どおり解決されます。

Clamp() を使用するにはビルド ツールまたはプリプロセッサが必要ですか?

いいえ、clamp() はネイティブ CSSであり、ブラウザで実行するために Sass、PostCSS、またはバンドラーのステップは必要ありません。プリプロセッサは、流体スケール全体を生成する場合、または、clamp() のない古いブラウザの小さなグループでのフォールバックにのみ役立ちます。

さまざまな画面サイズで Clamp() 値をテストするにはどうすればよいですか?

ブラウザ ウィンドウのサイズを手動で変更するか、ブラウザ DevTools のレスポンシブ モードを使用してビューポートの幅をドラッグします。値が最小ブレークポイントの下の最小値と最大ブレークポイントの上の最大値にあり、その間が滑らかにスケーリングされていることを確認します。

CSS クランプ計算機の出力が間違っていると思われる場合、最初に何を確認する必要がありますか?

CSS クランプ計算機の出力は、引数の順序が逆である、ビューポートの幅がテスト範囲外である、または rem に変換されなかった残りの px 値である、という 3 つの理由のいずれかにより、ほぼ毎回間違っているように見えます。

• 引数の順序を確認します: 最小、優先、最大
• ビューポートの中央だけでなく、両方の両端をテストします
• 値がフォント サイズを制御する場合、最小値と最大値に px ではなく rem が使用されていることを確認します。

Clamp() のグローバル サポートは 96.25% (使用してもよい) ですが、WCAG の200% のサイズ変更しきい値は別のハードルであり、ほぼ普遍的なサポートでは自動的にクリアされません。

clamp() を受け入れると、 単一のブレークポイントでの正確な制御と引き換えに決してジャンプしないスケーリングが得られます。

単一の流体値が孤立したままになることはほとんどありません。ほとんどのプロジェクトは、1 回限りの宣言ではなく名前付きステップを使用して、完全なレスポンシブ タイポグラフィ (EN) スケールに拡張します。