CSSのcalc()関数入門：柔軟なレイアウトを数式でデザインしよう

導入

固定と可変を両立させたレイアウトを実現するには、単位ごとの足し引きを柔軟に扱える仕組みが必要です。
CSSのcalc()関数を活用すれば、ピクセルやパーセント、ビュー幅などの単位を組み合わせて、状況に応じたサイズ調整が可能になります。
この記事では、calc()の基本から実際の活用例、設計時の考え方までを初心者向けに丁寧に解説します。

前提条件

width、padding、marginなどの基本的なCSSプロパティに触れたことがある。
コードエディタ（例: VS Code）とブラウザを用意できる。
HTMLの基本的な構造を理解している。

ステップ1：calc()の基本構文を理解する

calc()は、CSSの値として四則演算を記述できる関数です。親要素の幅から余白を差し引くなど、直感的な計算でスタイルを指定できます。

width: calc(100% - 50px);

利用できる演算子は+、-、*、/の4種類です。
演算子の前後にはスペースを挿入する必要があります。
- ✅ 正しい例：calc(100% - 20px)
- ❌ 誤った例：calc(100%-20px)

ステップ2：レイアウトでの実践例を試す

例1：横並びレイアウトで残り幅を計算する

固定幅のサイドバーと可変幅のメインエリアを組み合わせるケースです。

<div class="layout">
  <aside class="sidebar"></aside>
  <main class="content"></main>
</div>

.layout {
  display: flex;
}
.sidebar {
  width: 200px;
  background: #cce3ff;
}
.content {
  width: calc(100% - 200px);
  background: #f3f9ff;
}

ブラウザ幅が変化しても、メインエリアはサイドバーを差し引いた残りの幅を維持できます。

例2：固定ヘッダーを除いた高さを確保する

画面全体からヘッダーの高さを除いてメインコンテンツを表示する例です。

<header class="header">Header</header>
<section class="main">Main content</section>

.header {
  height: 80px;
  background: #bcd9ff;
  position: fixed;
  top: 0;
  width: 100%;
}
.main {
  margin-top: 80px;
  height: calc(100vh - 80px);
  background: #eaf3ff;
}

calc(100vh - 80px)でビューポート全体の高さからヘッダー分を差し引き、スクロールが不要なヒーローセクションを実現します。

例3：レスポンシブな余白を作る

vwとpxを組み合わせることで、画面幅に応じて余白が変化します。

.section {
  padding: calc(2vw + 16px);
}

大型画面では余裕のある余白を確保しつつ、モバイルでも最小限の余白を保つ調整が可能です。

ステップ3：calc()と関連機能を組み合わせる

カスタムプロパティ（CSS変数）と併用すると、同じ値を複数箇所で再利用しながら柔軟に調整できます。
```
:root {
  --sidebar-width: 240px;
}
.main {
  width: calc(100% - var(--sidebar-width));
}
```
clamp()やmin()、max()などと組み合わせれば、最小値・最大値を制御したレスポンシブ設計がしやすくなります。
ネストされたcalc()は可読性を損なうため、式が複雑になったら変数化や別プロパティへの分割を検討しましょう。

ベストプラクティス

固定値と可変値を組み合わせる場面でcalc()を活用する。
異なる単位（例：%とpx）を混在させる際は、式の意図が伝わるようコメントを添える。
過剰に複雑な式は避け、flexやgapなど他のレイアウト手段で代替できないか検討する。
clamp()と併用して、最小・理想・最大サイズを制御することで、より堅牢なレスポンシブ対応を実現する。

よくある質問

Q. calc()でカスタムプロパティを参照できますか？ A. はい。var()を式に含めることで、再利用性の高いレイアウト指定が可能です。

Q. 演算順序はどうなっていますか？ A. 左から順に評価されますが、必要に応じて括弧で囲み、意図した順序を明示しましょう。

Q. min()やmax()、clamp()との違いは？ A. calc()は単純な演算を担い、clamp()は最小・理想・最大値の範囲指定を行う関数です。両者を組み合わせると柔軟なレスポンシブ調整ができます。

まとめ

calc()は異なる単位の組み合わせを容易にし、固定と可変を両立させたレイアウトを可能にします。
高さや余白、幅などの計算を自動化することで、ブレークポイントが多いプロジェクトでも保守性を高められます。
レスポンシブデザインや固定ヘッダーとの組み合わせで効果を発揮するため、実務で積極的に活用してみましょう。