calc()は「100%から固定余白を引く」のように、単位が異なる値をブラウザ上で計算するときに使います。足し算と引き算の演算子の前後には空白が必要です。単純な最大・最小・範囲指定ならmin()、max()、clamp()も検討します。
情報確認日：2026年7月27日
結論：まず押さえるポイント
この記事の結論
- 異なる単位を組み合わせた計算に使う
- +と-の前後には空白を入れる
- CSS変数と組み合わせて意味を明確にする
- 固定heightの多用は内容あふれに注意する
CSS calc()の使い方の基本
width: calc(100% - 2rem)は、親幅から左右余白に相当する2remを引きます。掛け算は少なくとも一方が数値、割り算は右側が数値である必要があります。計算結果は、指定先のプロパティが受け付ける型にそろえます。
最小の実装例
HTML
<div class="layout">
<aside class="sidebar">メニュー</aside>
<main class="content">本文</main>
</div>CSS
:root {
--sidebar-width: 16rem;
--gap: 2rem;
}
.sidebar {
width: var(--sidebar-width);
}
.content {
width: calc(100% - var(--sidebar-width) - var(--gap));
}2列レイアウトだけならGridの方が簡潔な場合があります。calcは「計算が必要だから使う」のであり、レイアウトの第一選択とは限りません。
実務で使うときの考え方
固定ヘッダーを除いた最小高さ
.page-main { min-height: calc(100dvh - var(--header-height, 4rem)); }モバイルではアドレスバーを考慮したdvhなどのビューポート単位を検討します。内容が増えるためheightではなくmin-heightが安全です。
clamp()との組み合わせ
.hero { padding-block: clamp(2rem, calc(1rem + 4vw), 6rem); }calc()・min()・max()・clamp()の使い分け
| 関数 | 用途 |
|---|---|
| calc() | 値を四則演算する |
| min() | 候補の小さい値を採用する |
| max() | 候補の大きい値を採用する |
| clamp() | 最小・推奨・最大の範囲へ収める |
よくある失敗と直し方
calc(100%-2rem)と詰めて書く
+と-の前後には空白が必要です。空白がないと宣言全体が無効と判定され、無視されます。
heightを画面高に固定する
文字拡大や内容増加で切れます。min-heightと自然なスクロールを使います。
複雑な計算を重ねる
CSS変数へ意味のある中間値を分けるか、Grid・Flexboxで解決できないか見直します。
WordPressで使う場合
WordPressの管理バーやテーマヘッダーの高さを固定値で引くと、ログイン状態や折り返しでずれます。可能ならレイアウトで自然に積み、どうしても必要ならCSS変数を実測値と同期します。
よくある質問
calc()の中にCSS変数を使えますか？
使えます。変数に単位が含まれるかを確認し、計算後にプロパティが受け付ける型になるようにします。
calc()はパフォーマンスが悪いですか？
通常のレイアウトで過度に心配する必要はありません。ただしアニメーションで頻繁にレイアウト計算を起こす指定は別途検証します。
Sassの計算と何が違いますか？
Sassはビルド時、calc()はブラウザのレイアウト時に計算します。%やvwなど実行時に決まる値を扱える点が違います。
まとめ
calc()は異なる単位の実行時計算に使い、+と-の空白を守ります。用途が最大・最小・範囲ならmin()・max()・clamp()を選び、固定高より内容に追従する設計を優先してください。