CSS clamp()の使い方｜フォントサイズ計算式・早見表とSass関数

CSS の clamp() とは、clamp(最小値, 推奨値, 最大値) の3つを渡し、推奨値を最小値と最大値の間に収めて返す関数です。 推奨値に rem + vw の式を入れると、画面幅に合わせてフォントサイズや余白がなめらかに変わり、メディアクエリを書かずにレスポンシブな文字組みができます。

この記事では、「2点（画面幅とサイズ）から推奨値の式を出す計算式」「320〜1440px でそのまま使える h1〜本文・余白の早見表」「コピペ用 CSS 変数と Sass 関数（dart-sass 1.105.1 でコンパイルした出力つき）」をまとめます。さらに Playwright＋Chromium 141 で画面幅ごとの実際の font-size を計測し、ブラウザを200%に拡大したとき vw だけの指定では文字が大きくならないことを数値で確かめ、rem を混ぜる対処までを紹介します。

clamp() の早見表（320〜1440px で変化させる値）

下の値は「320px でこのサイズ、1440px でこのサイズ」になるように計算済みです。 ルート文字サイズ 16px（ブラウザ初期値）が前提です。そのままコピーして使えます。

目的別の逆引きもまとめておきます。

clamp(最小, 推奨, 最大) の仕組み

clamp() は max(最小値, min(推奨値, 最大値)) と同じ結果を返します。 推奨値が最小値を下回れば最小値、最大値を上回れば最大値、その間なら推奨値そのものが使われます。

/* 画面幅で変わる推奨値を、1rem〜2rem の範囲に収める */
h1 {
  font-size: clamp(1rem, 0.5rem + 2.5vw, 2rem);
}

ポイントは、推奨値を「一次関数（直線）」として作ることです。 画面幅を横軸、サイズを縦軸にとると、最小幅から最大幅のあいだはまっすぐな線で増え、両端では水平になります。

graph LR
  A["画面幅 320px 未満<br>最小値で固定"] --> B["320〜1440px<br>rem + vw で直線的に変化"] --> C["1440px 超<br>最大値で固定"]

vw は「画面幅の1%」を表す単位です。1440px の画面なら 1vw = 14.4px です。clamp() 自体は2020年7月から主要ブラウザで使える機能（MDN の Baseline「Widely available」）で、2026年時点で特別な対応は要りません。

推奨値の計算式（2点から傾きと切片を出す）

「画面幅 W1 でサイズ S1、画面幅 W2 でサイズ S2」の2点がわかれば、推奨値は計算で決まります。

式にまとめると次のとおりです。

傾き   = (S2 - S1) / (W2 - W1)
推奨値 = (S1 - 傾き × W1) / 16 rem + (傾き × 100) vw

なぜ vw の係数が「傾き×100」になるのかというと、1vw が「画面幅 ÷ 100」だからです。画面幅 W に対して 傾き × W px 増やしたいので、傾き × 100 vw と書けば同じ量になります。

計算を確かめるため、Python で早見表を作ったスクリプトを載せます（Python 3.11）。

# calc.py
def clamp(minpx, maxpx, minw=320, maxw=1440, base=16):
    slope = (maxpx - minpx) / (maxw - minw)
    inter = minpx - slope * minw
    r = lambda v: f"{round(v, 4):g}"
    return f"clamp({r(minpx/base)}rem, {r(inter/base)}rem + {r(slope*100)}vw, {r(maxpx/base)}rem)"

rows = [("h1", 28, 48), ("h2", 24, 36), ("本文", 16, 18), ("余白L", 48, 120)]
for name, a, b in rows:
    print(name, a, b, clamp(a, b))

実行結果（python3 calc.py）：

h1 28 48 clamp(1.75rem, 1.3929rem + 1.7857vw, 3rem)
h2 24 36 clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)
本文 16 18 clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem)
余白L 48 120 clamp(3rem, 1.7143rem + 6.4286vw, 7.5rem)

切片がマイナスになる場合（例：375px で 32px、1200px で 80px のように変化が大きいとき）も、clamp(2rem, -0.25rem + 6vw, 5rem) のように書けば正しく動きます。calc() を挟む必要はありません。clamp() の引数の中では、四則演算をそのまま書けます。

画面幅ごとの実際の font-size（Playwright で計測）

計算どおりの値になるかを、Playwright 1.56.1＋Chromium 141.0.7390.37 で計測しました。 早見表の値を CSS 変数に入れたページを、ビューポート幅を変えて開き、getComputedStyle() で値を取っています。

// measure.mjs（抜粋） npm i playwright@1.56.1 / node measure.mjs
import { chromium } from 'playwright';
import path from 'node:path';
const url = 'file://' + path.resolve('clamp.html');
const browser = await chromium.launch();
const fs = (page, sel, prop = 'fontSize') =>
  page.$eval(sel, (e, p) => getComputedStyle(e)[p], prop);
for (const w of [320, 375, 768, 1024, 1280, 1440, 1920]) {
  const ctx = await browser.newContext({ viewport: { width: w, height: 800 } });
  const page = await ctx.newPage();
  await page.goto(url);
  console.log(w, 'h1', await fs(page, '#h1'), 'h2', await fs(page, '#h2'),
    'body', await fs(page, '#body'), 'space', await fs(page, '#space', 'paddingTop'));
  await ctx.close();
}
await browser.close();

実行結果：

320 h1 28.0006px h2 24px body 16.0003px space 48.0003px
375 h1 28.9828px h2 24.5889px body 16.0986px space 51.536px
768 h1 36.0006px h2 28.7996px body 16.8004px space 76.8004px
1024 h1 40.572px h2 31.5423px body 17.2577px space 93.2577px
1280 h1 45.1434px h2 34.2851px body 17.7149px space 109.715px
1440 h1 48px h2 35.9994px body 18px space 120px
1920 h1 48px h2 36px body 18px space 120px

表にすると次のとおりです。

320px と 1440px でちょうど指定どおりの値になり、1920px では最大値で止まっています。 28.0006px のような端数は、rem と vw を小数4桁に丸めたことによる誤差で、表示上の差はありません。

拡大200%で vw だけだと文字が大きくならない（WCAG 1.4.4）

推奨値を vw だけにすると、ブラウザの拡大（Ctrl/⌘ + ＋）をしても文字の見た目の大きさが変わりません。 ブラウザの拡大は「CSS ピクセル1つを画面の何ドットで描くか」を大きくする操作で、その分ビューポートの CSS ピクセル幅が狭くなります。vw はビューポート幅に比例するので、拡大分と縮んだ分が打ち消し合います。

WCAG 2.2 の達成基準 1.4.4「テキストのサイズ変更」は、支援技術なしで200%まで文字を拡大できることを求めています。そこで、ウィンドウ幅1280pxの画面を100〜500%に拡大した状態を Playwright で再現しました（ビューポートを 1280÷拡大率、deviceScaleFactor を拡大率にする方法で、Chromium の拡大と同じ「CSS ピクセル幅が狭くなり、1px あたりのドット数が増える」状態を作っています）。画面上の実寸は「CSS px × 拡大率」です。

比較した指定は次の4つです。

#vwonly { font-size: 3.5vw; }                                      /* vw のみ */
#h1     { font-size: clamp(1.75rem, 1.3929rem + 1.7857vw, 3rem); }  /* rem + vw */
#remonly{ font-size: 2.8rem; }                                     /* rem のみ */
#body   { font-size: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem); }/* 本文 */

実行結果（css＝計算値、dev＝画面上の実寸）：

100% innerWidth 1280 #vwonly 44.80css→44.8dev | #h1 45.14css→45.1dev | #remonly 44.80css→44.8dev | #body 17.71css→17.7dev
200% innerWidth 640 #vwonly 22.40css→44.8dev | #h1 33.71css→67.4dev | #remonly 44.80css→89.6dev | #body 16.57css→33.1dev
300% innerWidth 427 #vwonly 14.95css→44.8dev | #h1 29.91css→89.7dev | #remonly 44.80css→134.4dev | #body 16.19css→48.6dev
400% innerWidth 320 #vwonly 11.20css→44.8dev | #h1 28.00css→112.0dev | #remonly 44.80css→179.2dev | #body 16.00css→64.0dev
500% innerWidth 256 #vwonly 8.96css→44.8dev | #h1 28.00css→140.0dev | #remonly 44.80css→224.0dev | #body 16.00css→80.0dev

vw のみの指定は、500%にしても画面上の大きさが 44.8px のまま変わりませんでした。 一方、rem を混ぜた clamp() は拡大に合わせて大きくなります。ただし、拡大でビューポートが狭くなると vw の部分は小さくなるため、200%ちょうどでは h1 が1.49倍、本文が1.87倍にとどまり、300%で h1 がほぼ2倍に届きました。

ここから言える対処は次の3つです。

本文のように rem 部分が大きい指定は、200%で1.87倍と、2倍に近い値になりました。 見出しは本文より大きく表示されているため、拡大時の読みやすさへの影響は本文より小さめです。厳密に「200%の拡大で必ず2倍」にしたい要素は、font-size: 1.125rem のように rem だけで指定するのが確実です。

なお、ブラウザ設定の「フォントサイズ」（初期値 16px を 20px などに変える設定）は rem に反映され、vw には反映されません。この点でも、最小値・最大値・推奨値のすべてに rem を使っておくと、利用者の設定を尊重できます。

コピペ用 CSS 変数セット

早見表の値を :root に変数としてまとめておくと、サイト全体で同じ比率を使えます。 CSS 変数そのものの使い方は「CSS変数（カスタムプロパティ）の使い方」の記事で扱っているので、ここでは clamp() の値セットに絞ります。

/* fluid.css：320px〜1440px で変化（ルート文字サイズ 16px 前提） */
:root {
  /* 文字 */
  --fs-h1: clamp(1.75rem, 1.3929rem + 1.7857vw, 3rem);       /* 28 → 48px */
  --fs-h2: clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem);     /* 24 → 36px */
  --fs-h3: clamp(1.25rem, 1.1071rem + 0.7143vw, 1.75rem);    /* 20 → 28px */
  --fs-h4: clamp(1.125rem, 1.0536rem + 0.3571vw, 1.375rem);  /* 18 → 22px */
  --fs-body: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);    /* 16 → 18px */
  --fs-small: clamp(0.8125rem, 0.7946rem + 0.0893vw, 0.875rem); /* 13 → 14px */

  /* 余白 */
  --space-l: clamp(3rem, 1.7143rem + 6.4286vw, 7.5rem);      /* 48 → 120px */
  --space-m: clamp(1.5rem, 1.0714rem + 2.1429vw, 3rem);      /* 24 → 48px */
  --space-s: clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem);      /* 16 → 24px */
}

body { font-size: var(--fs-body); line-height: 1.8; }
h1 { font-size: var(--fs-h1); line-height: 1.3; }
h2 { font-size: var(--fs-h2); line-height: 1.4; }
h3 { font-size: var(--fs-h3); line-height: 1.5; }
h4 { font-size: var(--fs-h4); line-height: 1.5; }
small { font-size: var(--fs-small); }

.section { padding-block: var(--space-l); }
.stack > * + * { margin-block-start: var(--space-m); }
.cards { display: grid; gap: var(--space-s); }

行の高さ（line-height）は単位なしの数値にしておくと、文字サイズが変わっても比率で追従します。見出しは文字が大きくなるほど行間が広く見えるので、本文より小さい値（1.3〜1.5）にすると整います。

Sass 関数で clamp() を自動計算する

Sass を使っている場合は、px の数値を2つ渡すだけで clamp() を返す関数を作ると便利です。 npm の sass（dart-sass）1.105.1 で動作を確認しました。Sass の基本（@use や mixin）は「Sass(SCSS)の使い方」の記事を参照してください。

// _fluid.scss
@use "sass:math";

// 小数を4桁に丸める
@function _round($n, $digits: 4) {
  $m: math.pow(10, $digits);
  @return math.div(math.round($n * $m), $m);
}

// px の数値（単位なし）を受け取り clamp() を返す
@function fluid($min-px, $max-px, $min-vw: 320, $max-vw: 1440, $base: 16) {
  $slope: math.div($max-px - $min-px, $max-vw - $min-vw);
  $intercept: $min-px - $slope * $min-vw;
  $min-rem: _round(math.div($min-px, $base)) * 1rem;
  $max-rem: _round(math.div($max-px, $base)) * 1rem;
  $int-rem: _round(math.div($intercept, $base)) * 1rem;
  $vw: _round($slope * 100) * 1vw;
  @if $min-px > $max-px {
    @return clamp(#{$max-rem}, #{$int-rem} + #{$vw}, #{$min-rem});
  }
  @return clamp(#{$min-rem}, #{$int-rem} + #{$vw}, #{$max-rem});
}

// style.scss
@use "fluid" as *;

h1 { font-size: fluid(28, 48); }
h2 { font-size: fluid(24, 36); }
body { font-size: fluid(16, 18); }
.section { padding-block: fluid(48, 120); }
.hero-title { font-size: fluid(32, 64, 375, 1200); } // 範囲を変える例

コンパイル結果（npx sass --no-source-map style.scss）：

h1 {
  font-size: clamp(1.75rem, 1.3929rem + 1.7857vw, 3rem);
}

h2 {
  font-size: clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem);
}

body {
  font-size: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
}

.section {
  padding-block: clamp(3rem, 1.7143rem + 6.4286vw, 7.5rem);
}

.hero-title {
  font-size: clamp(2rem, 1.0909rem + 3.8788vw, 4rem);
}

Python で計算した早見表と同じ値が出力されました。 関数の作りで押さえておきたい点は次のとおりです。

min()・max() との関係

clamp() は min() と max() の組み合わせを短く書いたものです。 上限だけ、下限だけ決めたいときは min()／max() のほうが読みやすくなります。

計測ページに max(1.75rem, min(1.3929rem + 1.7857vw, 3rem)) を入れたところ、すべての画面幅で clamp() 版の h1 と同じ値（320px で 28.0006px、1440px で 48px）になりました。

よく使う組み合わせも挙げておきます。

/* 左右に最低 16px の余白を取りつつ、最大 72rem で中央寄せ */
.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

/* 画像の高さを 200〜480px の範囲で画面幅に合わせる */
.hero img {
  height: clamp(200px, 40vw, 480px);
  width: 100%;
  object-fit: cover;
}

画像のトリミングそのものは「CSS object-fit・aspect-ratio」の記事で詳しく扱っています。

コンテナクエリ単位 cqi 版（カード幅で変える）

同じ部品をメイン欄とサイドバーの両方に置く場合は、画面幅（vw）ではなく親要素の幅（cqi）で変えると自然です。 cqi は「コンテナのインライン方向（横書きなら幅）の1%」です。親に container-type: inline-size を指定すると使えます（コンテナクエリの全体像は「CSSコンテナクエリ」の記事を参照してください）。

.card-wrap { container-type: inline-size; }
.card-wrap p {
  /* コンテナ幅 300px で 16px、600px で 22px 程度、上限 24px */
  font-size: clamp(1rem, 0.6rem + 2cqi, 1.5rem);
}

ビューポート 1440px のまま、親の幅だけを変えて計測した結果です。

c300 16px
c600 21.6px
c900 24px

画面幅が同じでも、置かれた場所の幅に合わせて文字サイズが変わりました。 計算式は vw 版とまったく同じで、W1・W2 に「コンテナ幅」を入れ、vw を cqi に置き換えるだけです。

よくあるつまずきと直し方

直す前と後の例です。

/* 直す前：拡大しても文字が大きくならず、広い画面では大きくなり続ける */
h1 { font-size: 4vw; }

/* 直した後：rem を混ぜ、上限と下限を決める */
h1 { font-size: clamp(1.75rem, 1.3929rem + 1.7857vw, 3rem); }

clamp() を使う前のチェックリスト

よくある質問

Q. clamp() の推奨値は vw だけでもよいですか？ A. 表示はされますが、ブラウザを拡大しても文字の大きさが変わりません（本記事の計測では500%でも 44.8px のまま）。rem + vw の形にすると、拡大に合わせて大きくなります。

Q. 計算ツールを使わずに値を出せますか？ A. 出せます。傾き＝(最大サイズ − 最小サイズ)÷(最大幅 − 最小幅)、切片＝最小サイズ − 傾き × 最小幅として、vw の係数は傾き×100、rem の値は切片÷16 です。Sass 関数にしておくと毎回の計算が不要になります。

Q. 余白（padding・margin・gap）にも使えますか？ A. 使えます。clamp() は長さを受け取るプロパティならどこでも使えます。セクション上下の余白を 48→120px のように大きく変えると、スマホでは詰まり、PC ではゆったりした印象になります。

Q. メディアクエリとどう使い分けますか？ A. サイズをなめらかに変えるなら clamp()、レイアウト（段組みや並び方）を切り替えるならメディアクエリが向いています。ブレークポイントの決め方は「メディアクエリ ブレークポイント」の記事で扱っています。

まとめ

• clamp(最小, 推奨, 最大) は max(最小, min(推奨, 最大)) と同じで、推奨値を範囲内に収めます。
• 推奨値は2点から計算でき、vw の係数＝傾き×100、rem＝切片÷16 です。
• 早見表（320〜1440px）の値は、Chromium 141 の計測で指定どおりの px になりました。
• vw だけの指定は拡大しても大きくならないため、rem を混ぜ、vw の係数を小さめにします。
• CSS 変数セットや Sass 関数にすると、サイト全体で同じ比率を保てます。
• 上限だけなら min()、下限だけなら max()、部品の幅で変えるなら cqi が便利です。

株式会社RJCでは、CSS の計算の仕組みやアクセシビリティの確かめ方を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。