pow()
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.
構文
css
/* <number> 値 */
width: calc(10px * pow(5, 2)); /* 10px * 25 = 250px */
width: calc(10px * pow(5, 3)); /* 10px * 125 = 1250px */
width: calc(10px * pow(2, 10)); /* 10px * 1024 = 10240px */
引数
pow(base, number) 関数は、カンマで区切られた 2 つの値を引数として受け入れます。
返値
<number> で、 basenumber、つまり base を number 乗した値を表します。
形式文法
<pow()> =
pow( <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
例
見出しを固定比率で変倍する
pow( ) 関数は、CSS モジュラースケールと同様の戦略に役立ちます。これは、ページ上のすべてのフォントサイズを、固定された比率で相互に関連付けます。
HTML
html
<h1>見出し 1</h1>
<h2>見出し 2</h2>
<h3>見出し 3</h3>
<h4>見出し 4</h4>
<h5>見出し 5</h5>
<h6>見出し 6</h6>
CSS
css
h1 {
font-size: calc(1rem * pow(1.5, 4));
}
h2 {
font-size: calc(1rem * pow(1.5, 3));
}
h3 {
font-size: calc(1rem * pow(1.5, 2));
}
h4 {
font-size: calc(1rem * pow(1.5, 1));
}
h5 {
font-size: calc(1rem * pow(1.5, 0));
}
h6 {
font-size: calc(1rem * pow(1.5, -1));
}
結果
仕様書
| Specification |
|---|
| CSS Values and Units Module Level 4 # exponent-funcs |