【CSS】calc() 関数を使いこなす！柔軟なレイアウトを実現する「魔法」の活用術

新年明けましておめでとうございます。
畠中です。
今年は「ウマ年」！
これからも「スピード」「クオリティ」を上げていけるよう、精進したいと思います。

さて、私事ですが最近コーディング作業が増えました。
若干の苦手意識を抱えながら勉強したことをアウトプットさせていただきたいと思います！

Webサイトのコーディングをしていて、
「要素の幅を100%にしたいけれど、左右にだけ20pxずつ余白が欲しい」
といった、相対値（%）と固定値（px）を混ぜた計算に悩んだことはありませんか？

そんな時に絶大な威力を発揮するのが、CSSの calc() 関数です。
これを使えば、今までJavaScriptや複雑なHTML構造が必要だったレイアウトが、CSSたった一行で解決します。

今回は、2026年のモダンなWeb制作でも欠かせない calc() の便利な使い方を徹底解説します。

calc() は、プロパティの値として計算式を入れることができる関数です。

基本の書き方
width: calc(100% – 40px);

※注意点
演算子（+ や -）の前後には必ず半角スペースを入れる必要があります。
⭕️ calc(100% – 20px)
❌ calc(100%-20px) （スペースがないとエラーになり、CSSが効きません）

スマホサイトで「画面幅いっぱいに広げつつ、左右に20pxずつ余裕を持たせたい」という場合、calc() が最適です。

.container {
/* 全体(100%)から左右20px分（計40px）を引く */
width: calc(100% – 40px);
margin: 0 auto;
}

▼ イメージ

「3つのカラムを均等に並べつつ、間の余白（Gap）を10pxに固定したい」
という時も、計算をCSSに任せられます。

.grid-item {
/* (全体の100% – 余白2つ分の20px) を 3等分する */
width: calc((100% – 20px) / 3);
}

▼ イメージ

固定ヘッダー（60px）とフッター（40px）がある場合、メインコンテンツを画面いっぱいに表示させるには 100vh（ビューポート高）から引き算します。

.main-content {
/* 画面高100%からヘッダーとフッター分を引く */
min-height: calc(100vh – 60px – 40px);
}

▼ イメージ

vw（画面幅）と固定値を組み合わせると、画面幅によって可変することができます！

.main-text {
/* 画面幅1600pxの時にフォントサイズ50px */
　font-size: calc(50 / 1600 * 100vw);
}

calc() を使う最大のメリットは、「意図が明確になること」です。
単に計算後の数値（例えば 96.5% など）を書くよりも、calc(100% – 30px) と書く方が、「30pxの余白を作りたいんだな」と後から見た人も意図を汲み取りやすくなります。

ブラウザ対応も今や完璧です。
ぜひ、今日からのコーディングに取り入れて、より柔軟で美しいレイアウトを目指してみてください！