CSS clamp() 計算機

CSS clamp() 計算機の使い方

1. 1テキストを入力またはペーストします
2. 2「変換する」ボタンをクリックします
3. 3結果を確認してコピーします

良いCSS clamp() 計算機の判断基準

画面幅に応じてフォントサイズや余白を滑らかに変化させる clamp() 式を生成するツールです。生成された式をコピーする前に、下の基準で「最小・最大・中間の挙動」を確認すると、特定の画面幅だけ崩れる事故を防げます。

• 最小値・最大値が実際の画面幅で確認できているか

  clamp() は設定した最小ビューポートより狭い画面では最小値、最大ビューポートより広い画面では最大値に固定されます。まずこの両端の値が、想定する最小・最大の画面でそれぞれ妥当なサイズかを確認します。

• 中間の計算式の意味を理解しているか

  生成される式の中央（PREFERRED）は「基準値 + 画面幅に比例する項」という一次式で、2点（最小ビューポートでの最小値、最大ビューポートでの最大値）を直線でつないだものです。この意味を理解しておくと、中間の画面幅でどんな値になるかを自分で説明でき、調整もしやすくなります。

• 中間のビューポート幅でもプレビューしたか

  両端が良くても、タブレット相当の中間幅で大きすぎたり小さすぎたりすることがあります。複数のビューポート幅でのプレビューを確認し、変化の傾きが急すぎないかを見ます。

• 単位の選択（rem / px）に理由があるか

  フォントサイズに使う場合、rem ベースの式ならユーザーがブラウザの文字サイズ設定を変えたときにも追従しやすくなります。px で固定する場合は、その値がユーザー設定に追従しなくてよい値かを考えてから選びます。

• line-height は固定したまま font-size だけ変化させているか

  font-size を clamp() で可変にする場合、line-height は 1.5 のような単位なしの値で指定しておくと、フォントサイズに比例して行間も追従します。行間まで別の clamp() で動かすと挙動の予測が難しくなります。

• 生成した式を実際のブラウザで幅を変えながら確認したか

  式の上では正しくても、実環境ではスクロールバーの有無などでビューポート幅の実値が想定と微妙に違うことがあります。本番に入れる前に、実際のブラウザの幅を動かしながら表示を確認します。対象環境での動作確認も推奨します。

ありがちな失敗例（NG → 改善）

Y切片と傾きを毎回引っ張り出さずに clamp() 式を作る

CSS の `clamp(MIN, PREFERRED, MAX)` 関数はフルードタイポグラフィ（ビューポート幅に応じて滑らかにフォントサイズ変動）を 1 行で書ける機能です。ただ、PREFERRED 部分の「Y切片 + 傾き × vw」を手計算するのは面倒です。毎回、線形補間の式を思い出して計算することになります。本ツールは 4 つの入力（最小ビューポート / 最大ビューポート / 最小値 / 最大値）から clamp() 式を自動で作ります。7 つのビューポート幅（320 / 375 / 414 / 768 / 1024 / 1440 / 1920px）でのサイズもその場でプレビューできます。フロントエンドの実装が楽になります。

clamp() の仕組み

`clamp(MIN, PREFERRED, MAX)` の挙動:

【MIN】ビューポート幅が小さい時の最小値（モバイル境界） 【PREFERRED】「Y切片 + 傾き × vw」の線形式。ビューポート幅に応じて変動 【MAX】ビューポート幅が大きい時の最大値（デスクトップ境界）

例: モバイル 16px（vw 375）→ デスクトップ 24px（vw 1440）の滑らかなフォント拡大 `font-size: clamp(1rem, 0.789rem + 0.563vw, 1.5rem);`

メディアクエリ（@media）の階段状ジャンプではなく <b>連続的に補間</b>される。

既定値 375→1440px・16→24px で生成された clamp() 式の実処理結果

編集部で本ツールを開き、画面に出た式をそのまま書き写しました。計算はブラウザの中だけで完結し、外部の AI には送られていません。

読み込み直後の既定値は、最小ビューポート幅 375px、最大ビューポート幅 1440px、最小値 16px、最大値 24px、出力単位 rem です。この状態で生成された式は次のとおりでした。

font-size: clamp(1.000rem, 0.824rem + 0.751vw, 1.500rem);

最小値 16px が 1.000rem、最大値 24px が 1.500rem になっています。rem への換算は root font-size を 16px と決め打ちした固定計算で、画面にも rem は root font-size 16px 基準と書かれています。root を 10px 相当にしているプロジェクトでは、この rem 値をそのまま貼ると実寸が変わります。

式の下には、ビューポート幅 320 / 375 / 414 / 768 / 1024 / 1440 / 1920px の 7 行の表が並び、それぞれの幅での px 値と、その大きさで描画された Sample の文字が出ます。入力欄は 4 つとも数値入力で、ビューポート幅は 1〜3840、値は 0〜500 の範囲に丸められます。プリセットも 6 つあり、Body 本文（16→18px）、H1 見出し（28→48px）、H2 見出し（22→36px）、CTA ボタン（14→16px）、カード余白（16→32px）、Hero タイトル（32→72px）が 1 クリックで入ります。

最小値と最大値を逆に入れた clamp() 式の実処理結果と、警告が出ないという弱点

壊れ方も確かめました。

【最小値 24px・最大値 16px と逆に入れた場合】 font-size: clamp(1.500rem, 1.676rem + -0.751vw, 1.000rem); clamp() は MIN が MAX 以下であることを前提にした関数ですが、MIN 側に大きい 1.500rem、MAX 側に小さい 1.000rem が入り、傾きも -0.751vw と負になりました。プラス記号のあとにマイナスが続く「+ -0.751vw」という書き方のまま出力されます。画面に警告も注意書きも出ません。

【最小ビューポート幅と最大ビューポート幅を同じ 800 にした場合】 font-size: clamp(1.000rem, -399.000rem + 800.000vw, 1.500rem); 幅の差がゼロだと割り算が成立しませんが、エラーにも NaN にもならず式が出ました。計算の手前に、最大幅を最小幅より必ず 1px 大きい値に置き換える保険が入っているためです。結果として傾きは 800.000vw、Y切片は -399.000rem という極端な値になり、事実上「その 1px の間で一気に切り替わる」式ができます。

【弱点】4 つの入力欄には、最小値と最大値の大小関係を見るチェックがありません。逆転した値でも、幅の差がゼロでも、式は同じ体裁で出てきます。出てきた式が CSS として意味を持つかどうかは、人が見て判断するしかありません。今回確かめたのは既定値・逆転・幅同値の 3 パターンだけです。どんな入力でも同じ挙動になるとは限りません。

【測れなかったこと】生成した式を実際のページに当てたときの見た目の崩れは測っていません。本ツールは式の生成と数値のプレビューまでで、逆転した式をブラウザに描かせて見せる機能を持たないためです。

Hero タイトル・セクション余白・カード幅で clamp() を使う場面

【1. Hero タイトルを滑らかに拡大する】モバイルの 32px からデスクトップの 72px まで、段差なく変化させます。プリセットの Hero タイトルがそのまま使えます。

【2. セクションの余白を可変にする】padding や margin もビューポート幅に応じて動かし、モバイル 16px・デスクトップ 64px のような幅を作ります。

【3. 行間を保ったまま文字を拡大する】font-size を clamp() で動かしつつ、line-height は 1.5 のような無次元の値で固定します。

【4. カード幅を流動化する】width: clamp(280px, 30vw, 400px) と書くと、画面の 30% を基本にしつつ上下限が効きます。

【5. CTA ボタンの文字サイズを範囲で決める】小さすぎても大きすぎても押されにくい要素を、上下限付きで動かします。

【6. メディアクエリを減らす】@media で階段状に切り替えていた指定を 1 行に寄せ、記述量を減らします。

出力単位 rem vs px

本ツールは <b>rem 推奨</b>。理由:

【アクセシビリティ】ユーザーがブラウザ設定（Chrome の「フォントサイズ」等）で root font-size を変更した時、rem 単位ならフォントも一緒にスケールする。px だと固定で変わらず、視覚障害者・高齢者のアクセシビリティ低下。

【WCAG 2.2 SC 1.4.4】テキストサイズ変更 200% で正常動作の要件 → rem が満たしやすい。

【root 基準】16px が root の場合、1rem = 16px。0.789rem = 12.624px のように小数点許容。

【px が向く場合】border 幅 / 細かい線 / 影など「絶対指定したい場面」のみ px 採用。

line-height・古いブラウザ・スクロールバー、clamp() 式を本番に入れる前に見る点

旧版の注意点を、実際に生成した式と突き合わせて整理します。

【line-height は動かさない】font-size だけ可変にし、行間は 1.5 のような無次元の倍率で固定します。両方動かすと変化の予測が付きません。

【MIN と MAX の大小】逆転した式がそのまま出ることは実処理結果のとおりです。生成後に、式の左端の値が右端より小さいかを目で確かめます。

【モバイル側の境界】最小ビューポート幅を 320 にするか 375 にするかで、狭い画面での見え方が変わります。プリセットはすべて 375 から 1440 の範囲で組まれています。

【vw の実値】スクロールバーの有無で vw の実寸は変わります。プレビュー表の数値は計算値なので、本番のブラウザで幅を動かして確かめます。

【古いブラウザ】clamp() は Chrome 79 以降、Firefox 75 以降、Safari 13.1 以降で使えます。対応していない環境には、固定値の font-size を前に置く書き方が要ります。

【min() / max() との違い】clamp(a, b, c) は max(a, min(b, c)) と同じ意味です。読みやすさで clamp() を選びます。

【向かない用途】ブラウザごとの実際の描画差を確かめる用途と、印刷の版面設計には向きません。プレビューの値は計算値で、実機のスクロールバーによるずれを含みませんし、vw は画面の幅を基準にした単位だからです。

貼り付ける前に見るのは 3 点です。1 つ目は、rem のまま使うか px に切り替えるか。2 つ目は、生成式の中の数値を手で書き換えていないか（4 つの入力から導いた一次式なので、途中だけ直すと両端と合わなくなります）。3 つ目は、プレビュー表の中間の幅で、変化が急すぎないか。

実装スニペット

```css /* Body 本文（16px → 18px） */ body { font-size: clamp(1rem, 0.987rem + 0.058vw, 1.125rem); line-height: 1.6; }

/* Hero タイトル（32px → 72px） */ h1 { font-size: clamp(2rem, 1.105rem + 3.832vw, 4.5rem); line-height: 1.1; }

/* セクション余白（32px → 96px） */ section { padding: clamp(2rem, 1.211rem + 3.378vw, 6rem) 1rem; }

/* カード幅（280px → 400px） */ .card { width: clamp(280px, 30vw, 400px); } ```