sqrt()
Baseline
2023
最近利用可能
December 2023以降、この機能は最新のバージョンの端末およびブラウザーで動作します。古い端末やブラウザーでは動作しないことがあります。
sqrt() CSS 関数 は指数関数で、数値の平方根を返します。
sqrt(x) は pow(x, 0.5) と同等です。
構文
css
/* <number> 値 */
width: calc(100px * sqrt(9)); /* 300px */
width: calc(100px * sqrt(25)); /* 500px */
width: calc(100px * sqrt(100)); /* 1000px */
引数
sqrt(x) 関数は、1 つの引数を受け取ります。
返値
x の平方根を <number> として返します。
xが+∞の場合、+∞を返します。xが0⁻の場合、0⁻を返します。xが0より小さい場合、NaNを返します。
形式文法
<sqrt()> =
sqrt( <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
例
平方根をもとにしたサイズの拡大
この例では、sqrt() 関数を使用してサイズを計算します。
HTML
html
<div class="boxes">
<div class="box">50px</div>
<div class="box one">100px</div>
<div class="box two">150px</div>
<div class="box three">200px</div>
</div>
CSS
ここではサイズを定義するために、CSS カスタムプロパティ を利用しています。はじめに最初のサイズ (--size-0) を宣言し、これを使用して他のサイズを計算します。
--size-1は、--size-0の値 (50px) に 4 の平方根 (2) を掛けて、100px になります。--size-2は、--size-0の値 (50px) に 9 の平方根 (3) を掛けて、150px になります。--size-3は、--size-0の値 (50px) に 16 の平方根 (4) を掛けて、200px になります。
css
:root {
--size-0: 50px;
--size-1: calc(var(--size-0) * sqrt(4)); /* 100px */
--size-2: calc(var(--size-0) * sqrt(9)); /* 150px */
--size-3: calc(var(--size-0) * sqrt(16)); /* 200px */
}
計算したサイズは、各セレクターの width と height の値として使用されます。
css
.one {
width: var(--size-1);
height: var(--size-1);
}
.two {
width: var(--size-2);
height: var(--size-2);
}
.three {
width: var(--size-3);
height: var(--size-3);
}
結果
仕様書
| 仕様書 |
|---|
| CSS Values and Units Module Level 4 # exponent-funcs |