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 プロパティやセレクタを逆引きできます。

IE11
Edge(EdgeHTML)
Edge(Chromium)
Firefox
Chrome
Safari
iOS Safari
Android Chrome

このページの上部へ