Widely available 安心して使用可能。主要ブラウザで広くサポートされている。

calc() constants (e, pi, infinity, NaN)

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

関数数学

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
calc-keyword
99
99
108
15.4
99
15.4
NaN

`NaN` 定数
99
99
114
16
99
16
e

`e` 定数
110
110
108
15.4
110
15.4
infinity

`infinity` および `-infinity` 定数
99
99
114
16
99
16
pi

`pi` 定数
109
109
108
15.4
109
15.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.circle-text {
  /* Use pi to calculate the circumference */
  --circumference: calc(2 * pi * var(--radius));
}

.full-rotation {
  /* Rotate 1 full revolution in radians */
  transform: rotate(calc(2 * pi * 1rad));
}

.always-on-top {
  /* Use infinity as the maximum z-index */
  z-index: calc(infinity);
}

ライブデモ

Circlecalculation with pi

Circlecalculation demo. with calc constants (e, pi, infinity, NaN) pi

プレビュー全画面表示

beforeface with infinity

beforeface demo. with calc constants (e, pi, infinity, NaN) infinity

プレビュー全画面表示

numberka- with e

numberka- demo. with calc constants (e, pi, infinity, NaN) e

プレビュー全画面表示

実務での使いどころ

  • 数学的に正確な計算

    pi を使って円周や弧の長さを正確に計算し、アニメーションやレイアウトに反映する。

注意点

  • infinity を z-index に使うと他の要素との順序管理が困難になるため、限定的に使用する。

アクセシビリティ

  • z-index: calc(infinity) で常に最前面に表示される要素が、キーボードナビゲーションの妨げにならないよう注意する。

参考リンク