<calc-keyword>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2022年12月.

<calc-keyword> はCSS のデータ型で、e やpi のようなよく定義された定数を表します。これらの数学定数を何桁も手作業で入力したり、計算したりする必要はなく、利便性のために CSS によって直接提供されています。

構文

<calc-keyword> 型は、CSS 数学関数で使用される数値の定数を定義します。

値

e: 自然対数の底、およそ2.7182818284590452354 に等しい数値です。
pi: 円の円周と直径の比で、およそ3.1415926535897932 に等しい数値です。
infinity &-infinity: 無限大の数値で、取りうる値の最大値や最小値を示すために使用します。
NaN: "Not a Number" （数値ではない）の正規形を表す値。

メモ

calc() 内の引数のシリアライズは浮動小数点数の IEEE-754 標準に従いますので、infinity やNaN のような定数に関していくつか見なされる意味があります。

ゼロで割ると、割られる数の符号に応じて正または負のinfinity を返します。
何かに対してinfinity を加算、減算、乗算すると、NaN を生成しない限り、infinity を返します（下記参照）。
演算に一つ以上のNaN 引数があると、NaN を返します。すなわち、0 / 0,infinity / infinity,0 * infinity,infinity + (-infinity),infinity - infinity はいずれもNaN になります。
正と負のゼロが有効な数値です。 (0⁺ および0⁻)。これには以下の効果があります。
- 負の引数が 1 つで 0 を返す掛け算や割り算（-5 * 0 または1 / (-infinity)）、または他の数学関数の組み合わせで負の結果を返す場合は0⁻ を返します。
- 0⁻ + 0⁻ または0⁻ - 0 は0⁻　になります。他にも、 0 を返すような足し算や引き算はすべて0⁺ を返します。
- 0⁻ と正の値（0⁺ を含む）を掛けたり割ったりすると負の値（0⁻ または-infinity）を返し、0⁻ と負の値を掛けたり割ったりすると正の値を返します。

これらのルールの適用例は、無限大、NaN、ゼロによる除算の節で示します。

メモ:infinity をcalc() の引数として使用する必要があることは稀ですが、ハードコードされた「マジックナンバー」を避けたり、特定の値が常に他の値よりも大きくなるようにするために使用することができます。プロパティがそのデータ型に対して「可能な限り大きな値」を持つことを明白にする必要がある場合に有益なことがあります。

公式定義

<calc-keyword> =
e|
pi|
infinity|
-infinity|
NaN

解説

数学定数はCSS 数学関数の内部でのみ計算に使用することができます。数学定数は CSS キーワードではありませんが、計算以外で使用する場合は他のキーワードと同様に扱われます。例えば、次のようになります。

animation-name: pi; は "pi" という名前のアニメーションを表し、数学定数のpi にはなりません。
line-height: e; は無効ですが、line-height: calc(e); は有効です。
rotate(1rad * pi); は動作しません。rotate() は数学関数ではないからです。rotate(calc(1rad * pi)); を使用してください。

数学関数では、<calc-keyword> 値は<number> 値として評価されるので、e とpi は数値定数として動作します。

infinity とNaN は少し異なり、退化した数値定数とみなされます。技術的には数値ではありませんが、<number> 値として動作するので、例えば無限大の<length> を取得するにはcalc(infinity * 1px) のような式が必要となります。

infinity とNaN の値は、主にシリアライズをよりシンプルでわかりやすくするために記載することができますが、無限の値は許容範囲にクランプされるため、「可能な最大の値」を示すために使用することができます。これが合理的であることは稀ですが、無限大を使用する場合は、スタイルシートに莫大な数値を入れたり、マジックナンバーをハードコーディングするよりもはるかに簡単です。

NaN 以外の定数はすべて大文字と小文字を区別しないので、calc(Pi)、calc(E)、calc(InFiNiTy) はいずれも有効になります。

e-eEpi-piPiinfinity-infinityInFiNiTyNaN

The following are all invalid:

nanNanNAN

例

`calc()` における pi の使用

次の例は、要素を指数関数的に増加する角度で回転させるためにcalc() 内でe を使用する方法を示しています。2 つ目のボックスはsin() 関数の中でpi を使用する方法を示しています。

#wrapper {  display: flex;  flex-direction: row;  justify-content: space-evenly;}.container {  display: flex;  flex-direction: column;  align-items: start;  width: 200px;}.container > div {  width: 100px;  height: 100px;  margin: 10px;}span {  font-family: monospace;  font-size: 0.8em;}#e {  background-color: blue;}#pi {  background-color: blue;}

html

<div>  <div>    <div></div>    <input type="range" min="0" max="7" step="0.01" value="0" />    <label for="e-slider">e:</label>    <span></span>  </div>  <div>    <div></div>    <input type="range" min="0" max="1" step="0.01" value="0" />    <label for="pi-slider">pi:</label>    <span></span>  </div></div>

// スライダーconst eInput = document.querySelector("#e-slider");const piInput = document.querySelector("#pi-slider");// 値を表示する spanconst eValue = document.querySelector("#e-value");const piValue = document.querySelector("#pi-value");eInput.addEventListener("input", function () {  e.style.transform = `rotate(calc(1deg * pow(${this.value}, e)))`;  eValue.textContent = e.style.transform;});piInput.addEventListener("input", function () {  pi.style.rotate = `calc(sin(${this.value} * pi) * 100deg)`;  piValue.textContent = pi.style.rotate;});

無限大、NaN、ゼロによる除算

次の例は、ゼロで割ったときのwidth プロパティの計算値を表示させたもので、続くcalc() 定数を変えたシリアライズをコンソールで見たときの様子を示しています。

html

<div></div>

css

div {  height: 50px;  background-color: red;  width: calc(1px / 0);}

const div = document.querySelector("div");console.log(div.offsetWidth); // 17895698 （infinity は幅の最大値でクランプされる）function logSerializedWidth(value) {  div.style.width = value;  console.log(div.style.width);}logSerializedWidth("calc(1px / 0)"); // calc(infinity * 1px)logSerializedWidth("calc(1px / -0)"); // calc(-infinity * 1px)logSerializedWidth("calc(1px * -infinity * -infinity)"); // calc(infinity * 1px)logSerializedWidth("calc(1px * -infinity * infinity)"); // calc(-infinity * 1px)logSerializedWidth("calc(1px * (NaN + 1))"); // calc(NaN * 1px)