CSSのcalc()関数の使い方【動的な計算をCSSで】

calc()とは？「100%から固定値を引く」ができる関数

「親要素の幅いっぱいにしたいけど、左右に16pxずつ余白を残したい」「画面の高さからヘッダー分を引いた高さにしたい」——こんな計算、CSSでできたら便利ですよね。

CSSの calc()（カルク） 関数を使えば、% と px など異なる単位を混ぜた計算ができます。レスポンシブデザインの必須テクニックです。

この記事では、calc()の基本構文から実践的なレイアウトパターン、min()/max()/clamp()との組み合わせまで解説します。

基本構文と四則演算のルール

/* 基本構文 */
width: calc(100% - 32px);

四則演算

.box {
  width: calc(100% - 32px);    /* 引き算 */
  height: calc(100vh - 64px);  /* 画面高さ - ヘッダー */
  padding: calc(16px + 1vw);   /* 足し算 */
  margin: calc(16px * 2);      /* 掛け算 → 32px */
  font-size: calc(48px / 3);   /* 割り算 → 16px */
}

/* NG: スペースがないとエラー */
width: calc(100%-32px);

/* OK: スペースあり */
width: calc(100% - 32px);

異なる単位を混合できる理由

通常のCSSでは 100% - 32px のような計算はできません。calc()を使うと、ブラウザが描画時（レンダリング時）に実際のピクセル値を計算してくれます。

ネスト（入れ子）

/* calc()の中にcalc()を入れられる */
width: calc(calc(100% - 40px) / 3);

/* ただし、括弧だけでもOK */
width: calc((100% - 40px) / 3);

実践コード例①：サイドバー固定幅 + メインコンテンツ可変幅

.layout {
  display: flex;
  gap: 24px;
}

.sidebar {
  width: 240px;
  flex-shrink: 0; /* 縮まないようにする */
}

.main {
  /* サイドバー240px + gap24pxを引いた残り */
  width: calc(100% - 240px - 24px);
}

Flexboxとの組み合わせでよく使うパターンです。Flexboxの基本はCSSフレックスボックス入門で学べます。

実践コード例②：ヘッダー高さを引いた全画面セクション

.header {
  height: 60px;
  position: fixed;
  top: 0;
  width: 100%;
}

.hero {
  /* 画面の高さからヘッダー分を引く */
  height: calc(100vh - 60px);
  margin-top: 60px; /* ヘッダーの下に配置 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CSS変数と組み合わせるとさらに便利 */
:root {
  --header-height: 60px;
}

.hero {
  height: calc(100vh - var(--header-height));
  margin-top: var(--header-height);
}

CSS変数と組み合わせると、ヘッダーの高さを変えたときに1箇所直すだけで済みます。変数の使い方はCSSカスタムプロパティ入門を参照してください。

実践コード例③：グリッドのgapを考慮した幅計算

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* 3列レイアウト: gapの分を引いて3等分 */
.grid-item {
  width: calc((100% - 16px * 2) / 3);
  /* 3列 → gap2つ分(32px)を引いて3で割る */
}

/* 2列レイアウト */
.grid-item--half {
  width: calc((100% - 16px) / 2);
}

CSS Gridを使えばこの計算は不要ですが、Flexboxで列数を制御したいときに便利です。Gridの使い方はCSSグリッドレイアウト入門で学べます。

min()・max()・clamp()との組み合わせ

/* min(): 小さい方を使う（最大幅の制限） */
.container {
  width: min(100% - 32px, 960px);
  /* 画面幅-32pxと960pxの小さい方 */
}

/* max(): 大きい方を使う（最小幅の保証） */
.text {
  font-size: max(16px, 1.2vw);
  /* 16pxと1.2vwの大きい方 */
}

/* clamp(): 最小・推奨・最大を1行で指定 */
.title {
  font-size: clamp(1.2rem, 4vw, 2.5rem);
  /* 最小1.2rem、推奨4vw、最大2.5rem */
}

/* clamp()でレスポンシブな余白 */
.section {
  padding: clamp(16px, 5vw, 64px);
}

clamp()はレスポンシブデザインで特に便利です。詳しくはレスポンシブデザインの作り方を参照してください。

よくある間違い・注意点

❌ +と-の前後にスペースがない

最もよくあるミスです。calc(100%-32px) はエラーになります。必ず calc(100% - 32px) と書きましょう。

❌ 0で割る

calc(100% / 0) は無効な値（invalid）になります。

%の基準は親要素のサイズ

width: calc(50% - 16px) の50%は「親要素の幅の50%」です。heightの%は親要素に高さが指定されていないと効きません。サイズ指定の基本はmarginとpaddingの違いで復習できます。

ブラウザ対応状況

calc()は全モダンブラウザで対応しています。min()/max()/clamp()もChrome・Firefox・Safari・Edgeで使えます。

calc()を使うときの注意点

calc()を使うときに気をつけるポイントを紹介します。

注意点1：演算子の前後にスペースが必要

calc(100% - 20px)のように、マイナスやプラスの前後には必ず半角スペースを入れます。calc(100%-20px)のようにスペースがないと、正しく計算されません。掛け算（*）と割り算（/）はスペースなしでも動きますが、統一してスペースを入れる癖をつけましょう。

注意点2：単位の異なる値を混ぜられる

calc()の最大の強みは、pxと%のように異なる単位を混ぜて計算できることです。たとえば「画面幅の100%から固定のサイドバー250pxを引く」といった計算ができます。通常のCSSでは異なる単位の計算はできないので、calc()ならではの機能です。

注意点3：入れ子にもできる

calc()の中にさらにcalc()を書くこともできます。ただし、複雑になりすぎると読みにくくなります。CSS変数と組み合わせて、計算の意味がわかりやすいコードを書きましょう。

注意点4：ゼロで割らない

割り算でゼロを指定すると、スタイルが無効になります。変数を使うときは、値がゼロにならないか確認しましょう。

まとめ

calc()はレスポンシブデザインの必須テクニックです。CSSの基礎全体はCSSとは？初心者向け解説で学べます。

関連記事

• レスポンシブデザインの作り方 — レスポンシブでの活用
• CSSフレックスボックス入門 — Flexboxとcalcの組み合わせ
• CSSグリッドレイアウト入門 — Gridでのcalc活用
• CSSカスタムプロパティ入門 — 変数とcalcの組み合わせ
• marginとpaddingの違い — サイズ指定の基本を復習