log() はCSS の関数で、数値の対数を返す指数関数です。

対数は、べき乗の逆演算です。これは、第 1 引数として渡された数を得るために、固定された底をどれだけべき乗しなければならないかを示す数値です。

CSS では、1 つの引数のみ渡された場合は自然対数の底e、つまり約2.7182818 が使用されます。第 2 引数を使用することで、任意の値を底として設定できます。

構文

/* <number> 値 */width: calc(100px * log(7.389)); /* 200px */width: calc(100px * log(8, 2)); /* 300px */width: calc(100px * log(625, 5)); /* 400px */

引数

log(value [, base]?) 関数は、引数として 2 つのカンマ区切りの計算式を受け取ります。

• value

  • 0 以上の<number> に解決される計算式で、対数を取る値です。

• base

  • 省略可能。0 以上の<number> に解決される計算式で、対数の底です。指定されていない場合、自然対数の底e が使用されます。

返値

base が指定されている場合、value の対数を返します。

base が指定されていない場合、value の自然対数 (底e) を返します。

形式文法

<log()> =
log(<calc-sum> ,<calc-sum>?)

<calc-sum> =
<calc-product>[[ '+'| '-']<calc-product>]*

<calc-product> =
<calc-value>[[ '*'| /]<calc-value>]*

<calc-value> =
<number>|
<dimension>|
<percentage>|
<calc-keyword>|
  (<calc-sum>)

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

例

対数スケールでのlog() 関数の使用

この例では、対数スケール を用いてデータ値を視覚化するために、log() 関数をどのように使用できるかを示しています。この例では、それぞれの横棒の幅は、底 10 の対数スケール上のデータ値に対応しています。各要素において、それぞれの値は--value という名前のCSS カスタムプロパティ に割り当てられ、.bar クラスによってその幅が計算されています。

HTML

<div>50</div><div>100</div><div>500</div><div>10,000</div><div>2,000,000</div>

CSS

.bar {  width: calc(log(var(--value), 10) * 2em);}

.bar {  height: 2em;  background-color: tomato;  color: white;  display: flex;  align-items: center;  justify-content: center;  margin: 0.25em 0;}

結果

仕様書

ブラウザーの互換性

関連情報

• pow()
• sqrt()
• hypot()
• exp()