log()

構文

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

.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()