Newly available 条件付きOK。Chrome 120+・Safari 17+・Firefox 113+で利用可能。

pow(), sqrt(), hypot(), log(), exp()

exp() は CSS の関数で、指数関数であり、引数として数値を取り、その数値で数学定数 e を累乗した値を返します。

数学定数 e は自然対数の底で、約 2.718281828459045 です。

exp(number) 関数は計算を含み、pow(e, number) と同じ値を返します。

関数数学

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
exp
120
120
118
15.4
120
15.4
その他
css.types.hypot

hypot() は CSS の関数で、各引数の 2 乗の合計値の平方根を返す指数関数です。
120
120
118
15.4
120
15.4
css.types.log

log() は CSS の関数で、数値の対数を返す指数関数です。
120
120
118
15.4
120
15.4
css.types.pow

pow() は CSS の関数で、数値の累乗の値を返す指数関数です。
120
120
118
15.4
120
15.4
css.types.sqrt

sqrt() CSS 関数 は指数関数で、数値の平方根を返します。
120
120
118
15.4
120
15.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
:root {
  /* Modular scale: base size × ratio^step */
  --scale-ratio: 1.25;
  --text-sm: calc(1rem / var(--scale-ratio));
  --text-base: 1rem;
  --text-lg: calc(1rem * pow(var(--scale-ratio), 1));
  --text-xl: calc(1rem * pow(var(--scale-ratio), 2));
  --text-2xl: calc(1rem * pow(var(--scale-ratio), 3));
}

.distance {
  /* Distance between two points */
  --d: hypot(var(--dx), var(--dy));
}

ライブデモ

Pow mojra-ske-l

pow, sqrt, hypot, log, exp Pow mojra-ske-l demo.

プレビュー全画面表示

Sqrt() Sizecalculation

pow(), sqrt(), hypot(), log(), exp() Sqrt() sizecalculation demo.

プレビュー全画面表示

Hypot() distance

pow(), sqrt(), hypot(), log(), exp() Hypot() distance demo.

プレビュー全画面表示

実務での使いどころ

  • モジュラースケール

    pow() でタイポグラフィの段階的なサイズスケールを数学的に定義する。

  • 距離計算

    hypot() で2点間のユークリッド距離を計算し、アニメーションの速度や強度に反映する。

注意点

  • 複雑な数学関数の組み合わせはCSSの可読性を著しく下げるため、カスタムプロパティで名前を付けて管理する。

アクセシビリティ

  • pow() で生成したフォントサイズスケールが極端なサイズにならないよう、clamp() と併用する。

参考リンク