CSS clamp()ジェネレーター

2つの画面サイズを決めるだけのclamp()ジェネレーター

CSS clamp()ジェネレーターは、小さい画面と大きい画面で使いたいサイズを2つ入力すると、その間を途切れなくつなぐclamp()の式を作ります。たとえば、画面幅360pxで16px、1280pxで20pxにしたい本文なら、font-size: clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem);になります。360pxより狭い画面では16pxのまま、1280pxより広い画面では20pxのままで、その間は画面幅に比例して大きくなります。

上のサイズ傾斜グラフで2つの点をドラッグすると式がすぐに変わり、縦のカーソルを動かすと、その画面幅で実際に何pxになるかを確認できます。右側のプレビューはその幅の画面を縮小して表示し、ブラウザが実際に計算した値を実寸の見本として描きます。出力単位はremとpx、基準は画面幅(vw)とコンテナ幅(cqi)から選べます。文字サイズとして使うときに拡大しても2倍まで大きくなるかを調べる拡大チェックと、同じ比率で見出しの段階を作るタイプスケールも、あわせて計算します。

なぜclamp()でサイズをつなぐのか

メディアクエリでサイズを切り替えると、決めた幅でちょうど値が跳ね上がります。767pxで16pxだった見出しが、768pxになると突然28pxになる、といった具合です。その境界の前後にある端末では、画面に対して文字が大きすぎたり小さすぎたりしやすく、境界を増やすほど管理する規則も増えます。clamp()なら、最小値と最大値の間を直線でつなぎ、1つの規則であらゆる幅に対応できます。

• スマホでは小さく、デスクトップでは大きく見せたい見出し: ファーストビューの見出しのように、サイズ差が大きい文字に向いています。ただし、最大が最小の2.5倍を超える場合は、必ず拡大チェックを確認してください(下の「拡大とアクセシビリティ」)。
• 画面に応じて伸び縮みする間隔: カード同士のgapや、セクション間の余白など、狭い画面では詰め、広い画面ではゆったり取りたい値に使います。
• 本文の幅と内側の余白: 文章を入れる箱のwidthやpaddingを、画面に合わせて広げつつ、決めたサイズで止めたいときに使います。
• デザイン案が2枚しかないとき: モバイル案とデスクトップ案の値しかなく、その間の画面が空白になっている場合は、2つの値をそのまま入力して間を埋めます。
• コンポーネントの置き場所によってサイズが違うとき: 同じカードがサイドバーと本文の両方で使われる場合は、画面幅よりカード自身の幅を基準にするほうが適切です。その場合は、基準をコンテナ(cqi)に切り替えます。

使い方

1. 上の例のバーから近い用途をクリックするか、小さい画面と大きい画面の画面幅・サイズを入力します。グラフの2つの点をドラッグしても、同じ欄が変わります。
2. プロパティ(font-size・gap・padding・width)、出力単位(rem・px)、基準(画面幅vw・コンテナcqi)を選びます。文字サイズにはrem出力をおすすめします。
3. グラフの縦のカーソルをドラッグするか、画面幅ごとの値の欄をクリックして、スマホ・タブレット・ノートPC・モニターでのサイズを確認します。「画面幅を動かす」を押すと、ウィンドウを広げたり狭めたりしたときのように見本が動きます。
4. 文字サイズに使う場合は、拡大チェックで500%拡大の範囲内に2倍へ届くかを確認します。基準を満たさないときは、案内された最大値・最小値に直します。
5. 「宣言をコピー」でCSSを1行、「式だけコピー」でclamp()の部分だけ、「変数をコピー」でタイプスケール全体を取り出せます。「リンクをコピー」は、現在の設定をURLに含めます。

計算方法: 傾き・切片・vw係数

2つの点(小さい画面の幅 w₁、サイズ s₁)と(大きい画面の幅 w₂、サイズ s₂)を結ぶ直線を求め、その直線をCSSが解釈できる単位に直します。

• 傾き = (s₂ − s₁) ÷ (w₂ − w₁)。画面幅が1px変わるごとに、サイズがどれだけ変わるかを表します。
• vw係数 = 傾き × 100。1vwは画面幅の1%なので、100を掛けるとvw単位になります。
• 切片 = s₁ − 傾き × w₁。画面幅が0のときの値で、式の固定部分です。remで出力するときは、ルート文字サイズ(通常は16px)で割ります。

360pxで16px、1280pxで20pxなら、傾きは4 ÷ 920 = 0.004348、vw係数は0.4348vw、切片は16 − 0.004348 × 360 = 14.4348px = 0.9022remです。両側に最小値と最大値を置くと、clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem)になります。この式が画面幅ごとに返す値は次のとおりです。

仕様では、clamp(MIN, VAL, MAX)はmax(MIN, min(VAL, MAX))と同じ意味だと定められています。そのため、真ん中の式が範囲を外れた時点で、外側の値がその場所を引き継ぎます。グラフの点線が切り詰める前の真ん中の式で、太い線が実際に使われる値です。大きい画面のサイズを小さい画面より小さく入力すると、画面が広いほど小さくなる式になり、このツールは最小値・最大値の位置を小さい値・大きい値の順に入れ替えて出力します。

よく使う値

例のバーにある値を、画面幅360px → 1280px、ルート文字サイズ16pxで計算した式です。出発点として使い、実際のデザインに合わせて調整してください。

pxとrem、どちらで出力するか

ブラウザで文字を大きくする方法は2つあります。ページ全体の拡大(Ctrl・⌘ と +)は、すべてを大きくする代わりに、CSSが見る画面幅を狭めます。設定のフォントサイズは、remの基準であるルート文字サイズだけを変えます。pxで書いた境界値はフォントサイズ設定に従わず、vwの分はどちらの方法でも変わりません。本文の例(16 → 20px、360 → 1280px)で計算すると、次のようになります。

rem出力にすると、フォントサイズ設定がページ拡大とまったく同じ比率で文字を大きくします。境界値と切片がそろって2倍になり、vwの分だけが変わらないためです。px出力では、設定を変えても文字が変わらないので、大きなフォントを使っている利用者には何の変化もありません。文字サイズにはrem、枠線のように設定に従わせたくない値にはpxを使うのが無難です。サイトがhtml { font-size: 62.5%; }でルートを10pxに変えている場合は、ルート文字サイズの欄に10を入力すると、rem値が正しくなります。

画面幅(vw)とコンテナ幅(cqi)

vwはブラウザの画面幅が基準なので、同じ画面の中でカードが狭いサイドバーに移っても、値は変わりません。コンテナ単位のcqiは、最も近いコンテナの内側の幅(横書きでは幅)の1%です。親要素にcontainer-type: inline-size;を指定し、このツールの基準をコンテナに切り替えると、グラフの横軸がコンテナ幅になり、式のvwの位置にcqiが入ります。

• CSS Containment 3は、適切なコンテナが見つからない場合、cqiをsmall viewportのサイズを基準に計算すると定めています。親にcontainer-typeを指定し忘れると、画面幅基準に近い動きになり、ミスに気づきにくくなります。
• CSS Values 4によると、ビューポート単位はスクロールバーがないものとして計算されます(overflow: scrollのようにスクロールバーが常に表示される場合は例外)。スクロールバーが場所を占める環境では、100vwが実際の本文幅より広くなり、横方向のはみ出しが起きることがあります。幅の指定にはcqiや%のほうが安全です。
• コンテナ単位は、Chrome 105、Firefox 110、Safari 16から対応しています(下のブラウザ対応表を参照)。

拡大とアクセシビリティ: 2倍まで大きくなるか

WCAG 2.2の達成基準1.4.4(テキストのサイズ変更)は、支援技術なしで文字を200%まで拡大しても、内容や機能が損なわれないことを求めています。W3Cは、ビューポート単位だけで文字サイズを決め、拡大しても大きくならない場合を、失敗事例F94として別に挙げています。拡大するとCSSの画面幅が狭くなり、vwの分が小さくなるため、clamp()で作った文字は拡大率ほどには大きくなりません。

Maxwell Barvian(Smashing Magazine、2023)は、最新のブラウザの最大拡大が500%であることを踏まえ、最大サイズが最小サイズの2.5倍以下であれば、どのウィンドウ幅でも500%以内に2倍へ届くとまとめました。このツールは、その規則に加えて、ウィンドウ幅320~3840pxを実際に計算し、最も不利なウィンドウ幅を探します。小さい画面を360px・16px、大きい画面を1280pxに固定して、最大サイズだけを変えると、次のようになります。

200%拡大だけで見ると、最大 ÷ 最小が1.25の本文の例でも、1280pxのウィンドウでは1.72倍にとどまります。そのウィンドウ幅で2倍にするには、239%まで拡大する必要があります。200%拡大でちょうど2倍になることを求めるチェックに通す必要がある場合は、vwの分をさらに減らすか、文字サイズはremだけにして、間隔や余白にだけclamp()を使う方法を検討してください。64pxの行のように傾きが大きいと、200%拡大でかえって文字が小さくなるウィンドウ幅も生じます。

タイプスケール: 同じ比率で見出しの段階を作る

タイプスケールは、本文のサイズに一定の比率を繰り返し掛けて、見出しの段階を作る方法です。Utopia(James Gilyead・Trys Mudford、2020)は、小さい画面と大きい画面で別々の比率を使い、段階ごとにclamp()でつなぐ方式を紹介しました。大きい画面の比率を大きくすると、広い画面では見出しの段階差が広がり、狭い画面では段階が詰まります。このツールは、上で作った値を0段階として、--step-1、--step--1のようなCSS変数を作ります。

小さい画面の比率と大きい画面の比率の差が大きいほど、上の段階の「最大 ÷ 最小」が急速に大きくなります。本文16 → 20pxに1.2と1.25を使うと、5段階は39.81 → 61.04pxで1.53倍となり、拡大基準の範囲内です。一方、1.2と1.5を使うと、5段階は39.81 → 151.88pxで3.8倍となり、基準を超えます。段階の一覧の右側にある表示は、段階ごとに拡大チェックを計算し直した結果です。

ブラウザ対応

MDNは、clamp()を2020年7月から主要なブラウザで広く使える機能(Baseline Widely available)に分類しています。CSS Values 4のドラフトには、最小値や最大値の位置にnoneを書く構文も定義されていますが、MDNの互換性データにはこの構文の対応項目がまだないため、このツールでは使いません。

よくある間違い

• vw係数に100を掛け忘れる: 傾きの0.004348をそのまま0.004348vwと書くと、変化が100分の1になり、ほぼ固定値になります。
• clamp()の中には必ずcalc()が必要だと思い込む: clamp()の3つの位置には、すでに足し算・引き算の式を書けるので、clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem)で十分です。calc()で囲んでも結果は同じです。
• ルート文字サイズが違うサイトに、rem式をそのまま貼る: ルートが10pxのサイトでは、1remは10pxです。ルート文字サイズの欄をそのサイトの値に変えて、作り直してください。
• 最小値と最大値の順序を入れ替えて書く: clamp()は、最小値が最大値より大きいと最小値を使います。手で直しているうちに2つの値を入れ替えると、画面幅に関係なく1つの値に固定されます。
• 文字サイズをvwだけで決める: font-size: 5vwは拡大しても大きくならず、WCAGの失敗事例F94に該当します。remの切片を持つclamp()に変えて、拡大チェックを確認してください。
• 幅に100vwを使う: スクロールバーが場所を占める環境では、横スクロールが発生します。widthの最大値や真ん中の式には、%やcqiの利用を検討してください。
• 行間をpxで固定する: 文字サイズだけが大きくなって行間はそのままなので、行が重なります。line-height: 1.5のように、単位のない値を使ってください。

制限と注意点

• 2つの点を結ぶ直線を1本だけ作ります。区間ごとに傾きを変えるには、clamp()をメディアクエリやコンテナクエリと組み合わせて、複数使う必要があります。
• 拡大チェックは、ChromeやFirefoxのように、拡大するとCSSの画面幅が倍率の分だけ狭くなる方式で計算しています。Smashing Magazineの記事も、Safariは拡大の方式が異なる場合があると書いています。最終的な判断は、実際のページを拡大して確認してください。
• フォントサイズ設定の計算は、htmlの文字サイズが%かremで指定されているか、指定されていないことを前提にしています。htmlにpxで文字サイズを固定しているサイトでは、remも設定に従いません。
• コンテナ基準を選ぶと、プレビュー画面全体をコンテナとみなして計算します。実際のコンテナの内側の余白や枠線によって、値は変わります。
• 式の数値は小数第4位まで表示します(第5位を四捨五入)。1920pxの画面でも、差は0.01pxより小さくなります。
• プレビューのフォントは、この端末の標準フォントです。ブラウザの最小フォントサイズの設定が有効になっていると、小さい値がそのサイズまで引き上げられることがあります。

基準日 W3C CSS Values and Units Level 4(Working Draft 2024-03-12)、CSS Containment Level 3(Working Draft 2022-08-18)、WCAG 2.2 Understanding 1.4.4とF94、MDN互換性データ(browser-compat-data 8.1.6、2026-10-15)は、2026-10-21に原文で確認しました。表の数値は、このツールの計算コアで求めたものです。

出典

• 01W3C: CSS Values and Units Module Level 4Working Draft 2024-03-12。clamp(MIN, VAL, MAX) = max(MIN, min(VAL, MAX))、最小値が最大値とぶつかるときは最小値を優先、ビューポート単位はスクロールバーがないものとして計算
• 02MDN: clamp()Baseline Widely available(2020年7月)、アクセシビリティ上の注意、ブラウザ互換性はChrome 79・Firefox 75・Safari 13.1
• 03W3C: CSS Containment Module Level 3Working Draft 2022-08-18。§6 コンテナ単位のcqw・cqh・cqi・cqb、適切なコンテナがなければsmall viewportのサイズが基準
• 04MDN: Using container size and style queriescontainer-typeとコンテナ単位の使い方、互換性データのコンテナ単位はChrome 105・Firefox 110・Safari 16
• 05W3C WAI: Understanding Success Criterion 1.4.4 Resize Text支援技術なしで文字を200%まで拡大できること(AA)
• 06W3C WAI: F94 Failure due to incorrect use of viewport units to resize textビューポート単位だけで決めた文字は、拡大やフォント設定では大きくならない
• 07Smashing Magazine: Addressing Accessibility Concerns With Using Fluid TypeMaxwell Barvian、2023-11-07。500%拡大の基準、最大サイズ ≤ 最小サイズ × 2.5なら合格
• 08Utopia: Designing with fluid type scalesJames Gilyead、2020-02-01。小さい画面と大きい画面で別の比率を使う流動タイプスケール

よくある質問

あわせて使いたいツール