このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

CSS log() 関数

Baseline
広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2023年12月以降、すべてのブラウザーで利用可能です。

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> [ [ '+' | '-' ]