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

概要

pow() は累乗、sqrt() は平方根、hypot() は引数の二乗和の平方根（ユークリッド距離）、log() は対数、exp() は自然指数関数を計算する。タイポグラフィのモジュラースケールやイージングカーブの計算をCSSだけで行えるようになった。カスタムプロパティと組み合わせた高度なデザインシステムに活用できる。

対応ブラウザ

基本構文

:root {
  /* モジュラースケール: 基準サイズ × 比率^段階 */
  --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 {
  /* 2点間の距離 */
  --d: hypot(var(--dx), var(--dy));
}

実務での使いどころ

• モジュラースケール

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

• 距離計算

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

注意点

アクセシビリティ

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

参考リンク

• MDN Web Docs — pow()
• Can I use — pow()