CSS Reference

calc()

計算式を使用してプロパティの値を指定する

calc() 関数は、CSS プロパティに指定する値を計算式で書くことができる CSS 関数です。

引数として使用できる演算子は四則計算、加算（+）、減算（-）、乗算（*）、除算（/）で、<length>（長さ）、<frequency>（周波数）、<angle>（角度）、<time>（時間）、<percentage>（%）、<number>（数値）、<integer>（整数） 型の値が許容される場所であればどこでも使用できます。

詳細説明

記述時の注意点

加算と減算 （+, -） に関しては演算子の前後に半角スペースを必ず入れなければなりません。

乗算と除算 （*, /） に関しては前後の半角スペースについて任意ですが、ミスを防ぐためにも記述上は前後に半角スペースを入れる記述で統一しておいた方がよいでしょう。

その他にも下記のような注意点があります。

演算子が + または - の場合

演算子が + または - の場合、「演算子両側の値が同じ型」、もしくは 「一方が <number> （数値） で、もう一方が <integer> （整数）」であるかがチェックされます。前者の場合はその型に解決され、後者の場合は <number> に解決されます。

つまり、width: calc(100% - 10px) や width: calc(10rem + 10px) は演算子の両側が <length> （<percentage> は <length> ではないのですが、width プロパティは <length>、<percentage> を許容し、いずれも長さとして扱われるため同じ型となります） になるため、これは正しい記述ですが、width: calc(100px + 10s) のような記述は「長さ」 と 「時間」 という異なる型の値が指定されていますので、不正ということになります。

演算子が * の場合

「演算子両側の値のうち、少なくともどちらか一方が <number>」 であるかがチェックされます。両側とも <integer> であれば <integer> として解決され、それ以外であれば、<number> と逆側に指定された値の型で解決されます。

つまり、calc(10px * 10px) のような指定は不正です。calc(10% * 2) または calc(2 * 10px) のようにしなければなりません。

演算子が / の場合

「演算子の右側が <number>」 であるかがチェックされます。演算子の左側が <integer> であれば <number> として解決され、それ以外であれば、左側の値の型に解決されます。

つまり、<number> で割らないといけないということで、calc(2 / 10px) のような記述をしてはいけません。calc(10px / 2) のようにする必要があります。また 「0」 での除算はエラーになります。

計算の優先順位

calc() 関数による四則計算の優先順位は学校で習うとおりです。計算順序を指定するために 「括弧（）」 を使用することができます。

calc(500 - 10 * 20 - 10 / 2) となっていれば、500 - 200 - 5 ということになります。例えば加算、減算を優先的に計算したければ calc((500 - 10) * (20 - 10) / 2) のように記述する必要があります。

calc()のサンプルソース

div {
  width: calc(100% / 3 - 2 * 1em - 2 * 1px);
}
/* line-height を含めて、ちょうど 20px の padding をつけたい場合などのサンプル */
h1 {
  font-size: 36px;
  line-height: 1.4;
  color: #fff;
  background-color: #f00;
  padding: 20px; /* 旧ブラウザ向けに念のためフォールバックとして記述 */
  padding: calc(20px - (1em * 1.4 - 1em) / 2) 20px;
}
/*calc() を入れ子（ネスト）にした記述例 */
.sample {
  width: calc(3 * calc(20px + 30px))
}
/* CSS カスタムプロパティとの併用例 */
:root {
  --wrap-box-width: calc(100% - 10px * 2);
  --box-column: 5;
}

.sample {
  display: flex;
  flex-wrap: wrap;
  width: var(--wrap-box-width);
  margin: 0 auto;
}

.sample div {
  flex: 1 1 calc(var(--wrap-box-width) / var(--box-column));
}

主要ブラウザの対応

IE11 △入れ子不可・一部バグあり
Edge（EdgeHTML） ○
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するCSS関数

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome