CSS `sqrt()` 関数

Baseline 広く利用可能

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

もっと詳しく
完全な互換性情報を見る

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: 0 以上の、 <number> に解決される計算式です。

返値

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

.boxes {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-around;
}
.box {
 width: var(--size-0);
 height: var(--size-0);
 background-color: tomato;
 color: white;
 display: flex;
 align-items: center;
 justify-content: center;
}

計算したサイズは、各セレクターの 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);
}