log()

Baseline 2023
Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

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

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

構文

css
/* <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

html
<div class="bar" style="--value: 50">50</div>
<div class="bar" style="--value: 100">100</div>
<div class="bar" style="--value: 500">500</div>
<div class="bar" style="--value: 10000">10,000</div>
<div class="bar" style="--value: 2000000">2,000,000</div>

CSS

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

結果

仕様書

Specification
CSS Values and Units Module Level 4
# exponent-funcs

ブラウザーの互換性

BCD tables only load in the browser

関連情報