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

概要

CSS内で数学定数 e（自然対数の底）と pi（円周率）、infinity（無限大）、NaN を直接使用できる。三角関数やその他の数学関数と組み合わせることで、より正確な計算が可能になる。infinity は最大値の指定に活用でき、clamp() との組み合わせで柔軟な値制御が行える。

対応ブラウザ

基本構文

.circle-text {
  /* 円周の計算に pi を使用 */
  --circumference: calc(2 * pi * var(--radius));
}

.full-rotation {
  /* ラジアンで1回転 */
  transform: rotate(calc(2 * pi * 1rad));
}

.always-on-top {
  /* 最大のz-indexとして infinity を使用 */
  z-index: calc(infinity);
}

実務での使いどころ

• 数学的に正確な計算

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

注意点

アクセシビリティ

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

参考リンク

• MDN Web Docs — CSS values (infinity, NaN)
• Can I use — CSS math constants