CSS calcの使い方｜min・max・clampと効かない原因一覧

CSSのcalc()とは、width: calc(100% - 20px) のように、単位の違う値どうしを足し引き・掛け割りしてプロパティの値にできる関数です。 仲間の関数に、小さいほうを選ぶ min()、大きいほうを選ぶ max()、下限と上限のあいだに収める clamp() があり、この4つを組み合わせると、メディアクエリを書かなくても画面幅に合わせて伸び縮みするサイズを1行で指定できます。

この記事では、4つの関数の書き方・使える単位・典型用途を早見表にまとめ、コピペ用コードと「効かない」ときの原因を1つずつ再現しました。計算結果はすべて Playwright（Chromium 141.0.7390.37）で getComputedStyle() と CSS.supports() の値を読み取ったもの、Sass の結果は Dart Sass 1.105.1 でコンパイルしたものです。

calc・min・max・clampの早見表

min() は「上限を付ける」、max() は「下限を付ける」と、名前と役割が逆に感じられる点が最初のつまずきどころです。min(100%, 600px) は「100% と 600px の小さいほう」なので、結果として600pxを超えません。

使える値と書き方のルール

効かない原因の早見表

calc()の書き方

基本の形と実測値

幅800pxの親の中に要素を置き（画面は 1000×600px、ルートの文字サイズは16px）、width にさまざまな式を指定して計算値を調べました。

<!DOCTYPE html>
<style>
  body { margin: 0; }
  .p  { width: 800px; height: 400px; font-size: 16px; }
  #t  { width: 111px;                 /* 目印。下の行が無効ならこの値が残る */
        width: calc(100% - 20px); }   /* ← ここを入れ替えて調べる */
</style>
<div class="p"><div id="t">x</div></div>

計算の順番は算数と同じで、掛け算・割り算が先、足し算・引き算が後です。「全体から余白を引いて3等分」のように、引き算を先にしたいときはかっこで囲みます。

数値を受け取るプロパティでも使える

calc() は長さ専用ではありません。結果の型がプロパティの求める型と合っていれば使えます。

min()・max()・clamp()の書き方

同じ環境（親の幅800px）で width に指定した結果です。

clamp(最小, 推奨, 最大) は max(最小, min(推奨, 最大)) と同じ計算です。最小と最大が逆転していても宣言は有効で、その場合は最小が採用されます。値が思ったとおりに変わらないときは、引数の順番（小さいほうが先）を確かめます。

画面幅を変えたときの font-size

max() は下限だけ、min() は上限だけ、clamp() は両方、という違いが数字に表れています。

コピペ用コード

完成形のHTML

次のHTMLは、この記事で紹介するレシピをまとめたものです。保存してブラウザで開くと、そのまま動きます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  :root { --header-h: 64px; }
  body  { margin: 0; }

  /* 1. ヘッダー分を引いた高さ */
  .header { height: var(--header-h); background: #eee; }
  .main {
    min-height: calc(100vh - var(--header-h));    /* 予備（dvh を知らないブラウザ向け） */
    min-height: calc(100dvh - var(--header-h));
  }

  /* 2. 左右に16pxの余白を残しつつ、最大720px */
  .box {
    width: min(100% - 32px, 720px);
    margin-inline: auto;
    box-sizing: border-box;
    /* 3. 余白の上限下限：16px〜48pxのあいだで画面幅の4% */
    padding: clamp(16px, 4vw, 48px);
  }

  /* 4. 可変フォントサイズ：画面幅320pxで24px、1200pxで40px */
  h1 { margin: 0; font-size: clamp(1.5rem, 1.1364rem + 1.8182vw, 2.5rem); }

  /* 5. すき間24pxの3カラム（float や inline-block で並べるとき） */
  .col { width: calc((100% - 2 * 24px) / 3); }
</style>
</head>
<body>
  <header class="header"></header>
  <main class="main">
    <div class="box">
      <h1>見出し</h1>
      <div class="col">カラム</div>
    </div>
  </main>
</body>
</html>

画面サイズを変えて、各部分の大きさを測りました。

.main の高さは常に「画面の高さ − 64px」、.box は狭い画面で「幅 − 32px」、広い画面で720px、padding は16px〜48pxのあいだ、h1 は24px〜40pxのあいだに収まっています。

レシピごとの解説

1. ヘッダー分を引いた高さ

.main { min-height: calc(100dvh - var(--header-h)); }

height ではなく min-height にしておくと、中身が多いときに自然に伸びます。100dvh は、スマートフォンのアドレスバーの出入りに合わせて変わる画面の高さです。PC相当の環境では 100vh・100dvh・100svh のどれも同じ値（画面600pxで536px）になりました。スマートフォン実機での違いは今回は未実行です。

2. 余白つきの最大幅

.box { width: min(100% - 32px, 720px); margin-inline: auto; }

max-width: 720px と左右の padding を組み合わせる書き方を、1行で表せます。

3. 余白の上限下限

.section { padding-block: clamp(32px, 8vw, 96px); }

4. 可変フォントサイズ

h1 { font-size: clamp(1.5rem, 1.1364rem + 1.8182vw, 2.5rem); }

真ん中の推奨値の作り方は、次の章で説明します。

5. すき間を引いて等分する

.col { width: calc((100% - 2 * 24px) / 3); }   /* 親800pxなら 250.656px */

flex や grid の gap を使う場合は、この計算は不要です。float や inline-block で並べるとき、あるいは flex-basis に具体的な幅を渡したいときに使います。

6. 親の幅を超えて画面いっぱいに広げる

.full-bleed { margin-inline: calc(-1 * (100vw - 100%) / 2); }

中央寄せされた親の中から、画像だけを画面の両端まで広げる書き方です。画面1000px・親800pxのとき、margin-left は -100px になりました。縦スクロールバーが幅を取る環境では、100vw がスクロールバーぶん広くなる点に注意します。

clampの推奨値の計算式

可変フォントサイズの真ん中の値（1.1364rem + 1.8182vw）は、「この画面幅でこのサイズ」という2点を通る直線の式です。

毎回手で計算しなくて済むよう、Node.js で動くスクリプトにしました。

// fluid.js（Node.js 22 で実行）
// 使い方: node fluid.js 最小px 最大px [最小画面幅px 最大画面幅px]
function fluid(minPx, maxPx, minVw = 320, maxVw = 1200, rootPx = 16) {
  const slope = (maxPx - minPx) / (maxVw - minVw);   // 傾き
  const intercept = minPx - slope * minVw;           // 切片
  const r = n => +n.toFixed(4);
  return `clamp(${r(minPx / rootPx)}rem, ${r(intercept / rootPx)}rem + ${r(slope * 100)}vw, ${r(maxPx / rootPx)}rem)`;
}
const [a, b, c, d] = process.argv.slice(2).map(Number);
if (a) console.log(fluid(a, b, c || 320, d || 1200));
else for (const [mn, mx] of [[14,16],[16,18],[16,20],[20,28],[24,40],[32,56],[16,48]])
  console.log(`${mn}px → ${mx}px :`, fluid(mn, mx));

$ node fluid.js
14px → 16px : clamp(0.875rem, 0.8295rem + 0.2273vw, 1rem)
16px → 18px : clamp(1rem, 0.9545rem + 0.2273vw, 1.125rem)
16px → 20px : clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem)
20px → 28px : clamp(1.25rem, 1.0682rem + 0.9091vw, 1.75rem)
24px → 40px : clamp(1.5rem, 1.1364rem + 1.8182vw, 2.5rem)
32px → 56px : clamp(2rem, 1.4545rem + 2.7273vw, 3.5rem)
16px → 48px : clamp(1rem, 0.2727rem + 3.6364vw, 3rem)

$ node fluid.js 24 40 375 1440
clamp(1.5rem, 1.1479rem + 1.5023vw, 2.5rem)

「16px → 20px」の値をブラウザで確かめると、320pxで16px、768pxで18.0362px、1200pxで19.9996px、1600pxで20pxになり、指定した2点を通っていることがわかります。

推奨値に rem を混ぜる理由

推奨値を 4vw のように vw だけで書くと、ブラウザの文字サイズ設定を大きくしても、文字が大きくなりません。rem を混ぜておくと、設定に追従します。html の font-size を 100% と 200% に切り替えて測りました（画面幅1000px）。

上の計算式で作った値は、切片が rem、最小と最大も rem なので、文字サイズ設定に追従します。

効かない原因を1つずつ再現して直す

calc() の書き方に誤りがあると、ブラウザはその宣言を1行まるごと読み飛ばします。エラーは表示されず、「何も指定していないのと同じ」状態になるため、原因に気づきにくいのが特徴です。ここでは、目印として直前に width: 111px を置き、111px が残っていれば「読み飛ばされた」とわかるようにして調べました。

1. + と - の前後に空白がない

-20px は「マイナス20px」という1つの値として読まれるため、100% -20px は「100% と −20px が並んでいるだけ」で演算子がない、と解釈されます。+ も同じです。一方、* と / は値の一部として読まれることがないので、空白なしでも動きます。4つの演算子すべてに空白を入れる習慣にしておくと迷いません。

コードの整形や圧縮のツールが空白を取り除いた結果、この形になることもあります。ビルド後のCSSで効かなくなったときは、出力されたファイルの calc() を確かめます。

2. 単位なしの 0

ふだんは margin: 0 のように 0 の単位を省けますが、calc()・min()・max()・clamp() の中では、0 は「単位なしの数値」として扱われ、長さとは足し引きできません。0px と書きます。変数の初期値を --offset: 0 としておき、あとで calc(100% - var(--offset)) に使う、という流れで起きやすいので、長さとして使う変数は 0px で定義しておくと安心です。

3. 単位同士の掛け算・割り算

掛け算は「片方が数値」、割り算は「右側が数値」が基本です。長さ ÷ 長さで数値を取り出す書き方（calc(100px / 2px)）は、Chromium 141 では結果を数値として使う場面（上の表の最後から3行目）で動きました。ほかのブラウザでの動作は今回は未実行なので、使う前に対象ブラウザで確かめてください。

4. Sass の min()・max() との衝突

Sass には、もともと同じ名前の min()・max() 関数があり、コンパイル時に値を比べようとします。Dart Sass 1.105.1 で試した結果です。

// input.scss
@use "sass:math";
$w: 600px;
$g: 20px;
$n: 16;

.a { width: min(100%, $w); }            // ① 単位が違う
.b { width: min(10px, 20px); }          // ② 単位が同じ
.c { font-size: clamp(1rem, 0.5rem + 2vw, 2rem); }
.d { width: calc(100% - $g); }          // ③ calc の中に変数をそのまま
.e { width: calc(100% - #{$g}); }       // ④ 従来の #{} でも同じ
.f { width: calc($w / 3); }             // ⑤ 計算できるものは計算される
.g { width: calc(100% - $n * 1px); }    // ⑥ 単位なしの変数に単位を付ける

$ npx sass --style=compressed input.scss
.a{width:min(100%,600px)}.b{width:10px}.c{font-size:clamp(1rem,.5rem + 2vw,2rem)}.d{width:calc(100% - 20px)}.e{width:calc(100% - 20px)}.f{width:200px}.g{width:calc(100% - 16px)}

現在の Dart Sass は、単位が違って比べられないときはCSSの関数としてそのまま出力し、比べられるときは計算して出力します。 つまずきやすいのは次の6つです。

2行目と5行目は、コンパイルは通るのに、ブラウザで読み飛ばされるCSSが出力される組み合わせです。Sass 側でエラーが出ないので、出力されたCSSを見て確かめます。

なお、以前の Sass の処理系（LibSass や初期の Dart Sass）では、min(100%, 600px) と書くだけで単位が違うというエラーになり、unquote("min(100%, 600px)") のように文字列として渡す回避策が使われていました。この以前の処理系での動作は今回は未実行です。Dart Sass 1.105.1 では、この回避策がなくても ① のとおり出力されます。

5. カスタムプロパティの単位抜け

ここで注目したいのは、変数（var()）を含む宣言が無効になったときは、直前の width: 111px に戻らず、プロパティの初期値（width なら auto）になる点です。ブラウザはCSSを読み込む段階では変数の中身がわからないため、いったん宣言を受け入れ、値を計算する段階で無効と判断します。そのため CSS.supports() は true を返し、DevTools でも警告マークが付かないことがあります。「幅が親いっぱいに広がった」「余白が0になった」ときは、変数の単位を疑います。

単位なしで定義した変数は、calc(var(--n) * 1px) のように「1（単位）」を掛けると、好きな単位の値に変えられます。

:root { --cols: 3; --i: 3; }
.grid { width: calc(var(--cols) * 100px + (var(--cols) - 1) * 16px); }  /* 332px */
.hand { rotate: calc(var(--i) * 30deg); }                               /* 90deg */

符号を反転させたいときも calc を使います。-var(--gap) は無効で、calc(-1 * var(--gap)) か calc(var(--gap) * -1) と書きます（--gap: 16px のとき、どちらも -16px になりました）。

そのほかの書き方の誤り

ブラウザで有効かどうかを確かめる方法

DevTools の Console に次の1行を入れると、その値が有効かどうかがすぐにわかります。

CSS.supports('width', 'calc(100% -20px)');   // false
CSS.supports('width', 'calc(100% - 20px)');  // true
CSS.supports('width', 'max(0, 10px)');       // false

DevTools の Styles タブでは、無効な宣言に打ち消し線と警告マークが付きます（この画面操作は今回は未実行で、上の CSS.supports() の結果は Playwright から同じ関数を呼んで確かめたものです）。var() を含む式は true が返っても計算時に無効になることがあるので、Computed タブで実際の値も確かめます。

round()・mod() など新しい数学関数

calc() の仲間は年々増えています。Chromium 141 で width に指定し、有効かどうかと計算値を調べました。

round() と mod() は、MDNで「Baseline 2024（2024年5月から主要ブラウザの最新版で利用可能）」と案内されています。 そのほかの関数について、Chromium 以外のブラウザでの対応は今回は未実行・未確認です。新しい関数を使うときは、@supports で対応ブラウザにだけ適用する書き方が便利です（Chromium 141 で 200px が適用されることを確認）。

.card { width: 100px; }                          /* 先に、どのブラウザでも通る値 */
@supports (width: round(1px, 1px)) {
  .card { width: round(down, 100% / 3, 8px); }   /* 対応ブラウザだけ */
}

round() の使いどころは、割り切れない幅を整数のpxにそろえる場面です。calc(100% / 3) は 266.656px のような端数になりますが、round(nearest, 100% / 3, 1px) なら 267px にそろい、境界線のにじみを抑えられます。mod() を使うと、calc(100% - mod(100%, 120px)) で「120pxの倍数のうち、親に収まる最大の幅」（親800pxなら720px）を求められます。

Sass でこれらを使うときは、round() に注意します。Dart Sass 1.105.1 では、round(15px, 4px) は 16px、mod(18px, 5px) は 3px に計算されて出力され、round(up, 100% / 3, 1px) はCSSの関数としてそのまま出力されました。引数1つの round(10.5px) は Sass の関数として 11px に計算されますが、将来はCSSの round() として解釈されるという予告の警告が出ます。Sass の丸めを使いたいときは math.round() と書きます。

どの関数を選ぶかの判断表

書いたあとのチェックリスト

よくある質問

Q. calc() の中で min() や clamp() を使えますか？ A. 使えます。calc(min(100%, 600px) - 20px) は 580px になりました。逆に、min()・max()・clamp() の引数には式をそのまま書けるので、min(calc(100% - 32px), 720px) と書かなくても min(100% - 32px, 720px) で同じ結果になります。

Q. calc(100% - 20px) の % は何に対する割合ですか？ A. そのプロパティで % を単独で書いたときと同じです。width なら親（包含ブロック）の幅、font-size なら親の文字サイズが基準になります。font-size: calc(100% + 2px) は、親が16pxのとき 18px になりました。

Q. メディアクエリと clamp() はどちらを使えばよいですか？ A. 大きさをなめらかに変えたいところは clamp()、レイアウトそのものを切り替えたいところ（1カラムから2カラムへ、など）はメディアクエリが向いています。文字サイズや余白は clamp() に任せ、並び方の切り替えはメディアクエリで行う、という分け方がわかりやすいです。

Q. calc() の計算結果を確かめるにはどうすればよいですか？ A. DevTools の Computed タブで、計算後のpx値を見られます。Console で getComputedStyle($0).width と入力する方法もあります（$0 は Elements パネルで選択中の要素）。この記事の計算値は、同じ getComputedStyle() で取得しています。

まとめ

• calc() は単位の違う値を計算できる関数。 + と - の前後には必ず空白を入れる。
• min() は上限、max() は下限、clamp() は両方を付ける。clamp(最小, 推奨, 最大) の順で書く。
• 関数の中では 0 にも単位が必要。 長さとして使う変数は 0px で定義する。
• 掛け算は片方が数値、割り算は右側が数値。 単位なしの変数には * 1px を掛ける。
• var() を含む宣言が無効になると、直前の値ではなく初期値に戻る。 CSS.supports() が true でも計算値を確かめる。
• Sass では素の min()・max()・clamp() をそのまま書く。 コンパイルが通っても、出力されたCSSの空白と単位を確認する。
• round()・mod() は Baseline 2024。 そのほかの新しい関数は @supports と組み合わせて使う。

株式会社RJCでは、CSSのcalcやclampを使ったサイズ指定の考え方を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

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