CSS - calc()

概要

形式	calc(expression)
サポート	C3 / e10 / Fx4(-moz) / Fx16 / Ch19(-webkit) / Ch26 / Op15 / Sa6(-webkit) / Sa7

calc() を用いて、加算(+)、減算(-)、乗算(*)、乗算(/)の四則演算を行うことができます。% や px などの単位付きの数値も計算することができます。加算(+)や減算(-)の前後には空白が必要です。

CSS

.col3 {
  width: calc(100% * 3 / 12 - 10px);
}

以前の仕様では、単位付き数値同士の乗算・除算は禁止されていましたが、単位を除去したいケースもあるため単位付き動詞の乗算・除算も許可されるようになりました。Chrome 140、Safari v18.2 でサポートされましたが、Firefox でのサポートは未定です。

長さを 1px で割ることにより、単位の無いピクセル数を得ることができます。1in は 96px ですが下記により単位のない 96 を得ることができます。

calc(1in / 1px)

下記の例では、h1 要素の行の高さを、行間が通常フォントの行間と同じになるように調整しています。また、line-height では絶対値よりも単位無しの数値を指定する方がよい(参照)というプラクティスに従い、1em で割ることによって絶対値を単位の無い倍数に変換しています。

h1 {
  line-height: calc((1em + (1rlh - 1rem)) / 1em);
}

初版：2015年11月8日、最終更新：2025年9月14日

http://www.tohoho-web.com/css/func/calc.htm