CSSのcalc関数とは？使い方と実践例をわかりやすく解説【初心者向け】

プログラミング

公開日: 2026/03/19

※この記事にはプロモーションを含みます

はじめに

CSSでレイアウトを組む際、「固定値とパーセンテージを組み合わせて計算したい」「余白を考慮した幅指定をしたい」と感じたことはありませんか？

そんなときに便利なのが、CSSのcalc関数です。calc関数を使えば、異なる単位を組み合わせた計算をCSS内で直接行うことができ、JavaScriptを使わずに柔軟なレイアウト実装が可能になります。

本記事では、calc関数の基本的な意味から構文、実務で役立つ具体的な使い方まで、初心者にもわかりやすく解説します。この記事を読めば、calc関数を自在に使いこなし、効率的で保守性の高いCSSコードが書けるようになります。

CSSのcalc関数とは？

calc関数の定義と概要

calc関数は、CSS3で導入された関数で、プロパティ値として数式を記述できる機能です。基本的な構文はcalc(式)という形式で、括弧内に計算式を記述します。

この関数の最大の特徴は、異なる単位（px、%、em、rem、vwなど）を一つの式の中で混在させて計算できる点にあります。

例えば、「幅100%から固定の20pxを引いた値」といった、従来のCSSでは難しかった柔軟な指定が可能です。

calc関数は、width、height、margin、padding、font-sizeなど、数値を扱うほぼすべてのCSSプロパティで使用できます。

calc関数が解決する問題

calc関数が登場する以前、CSSレイアウトには以下のような問題がありました。

固定値とパーセンテージの組み合わせ

例えば「親要素の幅いっぱいから両側20pxずつ余白を取りたい」という要件の場合、従来は子要素にpadding指定や追加のラッパー要素が必要でした。

レスポンシブデザインでの調整

画面サイズに応じて柔軟に変化させつつ、最小値や固定値を保証したい場合、JavaScriptでの動的な計算が必要でした。

複雑なグリッドレイアウト

カラム幅と余白の計算が複雑になり、保守性が低下する問題がありました。

calc関数はこれらの問題を、CSSだけでシンプルに解決できます。

calc関数を使うメリット

calc関数を使用することで、以下のメリットが得られます。

コードの簡潔性

複雑な計算ロジックをCSS内で完結できるため、HTMLの構造をシンプルに保てます。余計なラッパー要素やJavaScriptでの操作が不要になります。

保守性の向上

計算式が明示的に記述されるため、意図が分かりやすく、後からの修正も容易です。magic number（マジックナンバー）と呼ばれる意味が不明な数値の羅列も減らせます。

パフォーマンスの最適化

ブラウザのレンダリングエンジンが自動的に計算を行うため、JavaScriptでの計算よりも高速です。リフローやリペイントの回数も抑制できます。

レスポンシブ対応の強化

異なる単位を組み合わせることで、より洗練されたレスポンシブデザインが実現できます。

calc関数の基本構文と書き方

基本的な構文ルール

calc関数の基本構文は非常にシンプルです。

property: calc(式);

以下の重要なルールを押さえておきましょう。

1. 演算子の前後には必ずスペースを入れる

{
  /* エラーになる */
  width: calc(100%-20px);

  /* 正しい */
  width: calc(100% - 20px);
}

calcの例

2. ネスト（入れ子）も可能

calc関数の中に別のcalc関数を含めることができます。

{
  width: calc(100% - calc(20px * 2));
}

3. 単位の混在が可能

異なる単位を同じ式で使用できます。

{
  width: calc(50% + 20px);
}

使用できる演算子の種類

calc関数では、以下の4つの算術演算子が使用できます。また、数学の計算と同様、括弧を使って計算の優先順位を指定できます。

加算（+）

{
  width: calc(50% + 100px);
}

減算（-）

{
  width: calc(100% - 20px);
}

乗算（*）

{
  width: calc(50% * 2);
}

少なくとも一方の値は数値（単位なし）である必要があります。

除算（/）

{
  width: calc(100% / 3);
}

右辺は必ず数値（単位なし）でなければなりません。

演算子の優先順位は数学と同じルールで、乗算と除算が加算と減算より優先されます。括弧を使って優先順位を明示しましょう。

単位の組み合わせ方と注意点

組み合わせ可能な単位は以下の通りです。

単位	説明	例
px	ピクセル	20px
%	パーセンテージ	50%
em	親要素のフォントサイズ基準	2em
rem	ルート要素のフォントサイズ基準	1.5rem
vw	ビューポート幅	10vw
vh	ビューポート高さ	50vh

加算と減算では、両辺に単位または%が必要です。数値のみの演算はエラーになります。

乗算では少なくとも一方が、除算では右辺が必ず単位なしの数値である必要があります。ゼロで除算すると値は無効になります。

calc関数の実践的な使い方

CSS変数を使った指定

CSS変数との組み合わせも可能です。

:root {
  --spacing: 20px;
}

.element {
  width: calc(100% - var(--spacing) * 2);
}

変数を使った例

固定値とパーセンテージを組み合わせた幅指定

サイドバー付きレイアウト

.sidebar {
  width: 250px;
}

.main-content {
  width: calc(100% - 250px);
}

サイドバー付きレイアウト

両端余白を考慮したコンテナ

.container {
  width: calc(100% - 40px);
  margin: 0 auto;
}

両端余白を考慮したコンテナ

レスポンシブデザインでのフォントサイズ調整

フルードタイポグラフィ

h1 {
  font-size: calc(16px + 2vw);
}

行間の動的調整

p {
  line-height: calc(1.2em + 0.5vw);
}

フォールバック（代替手段）の書き方

万が一、calcが対応していないブラウザでのサポートが必要な場合は、calcの指定と合わせて通常の指定も書いておきましょう。

基本的なフォールバック

.element {
  width: 80%; /* フォールバック */
  width: calc(100% - 40px); /* calc対応ブラウザ用 */
}

@supportsを使用した判定

@supports (width: calc(100% - 20px)) {
  .element {
    width: calc(100% - 40px);
  }
}

様々な例を紹介しましたが、calc関数を使う場合は、以下のようなルールを考慮すると良いでしょう。

calc関数をうまく使うルール

calc関数でよくあるエラーと解決方法

スペースの入れ忘れによるエラー

/* 無効 */
width: calc(100%-20px);
width: calc(100% -20px);
width: calc(100%- 20px);

/* 正しい書き方 */
width: calc(100% - 20px);

正しい位置にスペースがないと、挙動がうまくいかない場合があります。

CSS変数を使用する際も同じルールが適用されるため、注意が必要です。

計算結果が0以下になる場合の対処

画面幅が非常に小さい場合に計算結果が負になる可能性があります。

/* 画面幅が300px未満で負の値になる */
{
  width: calc(100% - 300px);
}

このような場合は、以下のいずれかの方法で対処します。

解決策1：max()関数との併用

width: max(0px, calc(100% - 300px));

解決策2：min()関数で上限制御

font-size: min(calc(12px + 2vw), 24px);

解決策3：clamp()関数で範囲指定

font-size: clamp(14px, calc(12px + 2vw), 24px);

まとめ

calc関数は、CSSだけで異なる単位を組み合わせた計算を実現できる、現代のフロントエンド開発に欠かせない機能です。

calc関数を活用することで、JavaScriptに頼らずCSS単体でより柔軟で保守性の高いレイアウトが実現できます。今回紹介したサンプルコードをベースに、実際のコーディングでどんどん活用してみてください。

CSSやプログラミングスキルをさらに体系的に身につけたい方には、WEBMASTERSのプログラミングスクールがおすすめです。実践的なカリキュラムで、現場で即戦力となる開発スキルを習得できます。

この記事を
シェアする！