hypot() はCSS の関数で、各引数の 2 乗の合計値の平方根を返す指数関数です。

pow() とsqrt() は単位のない数値のみを扱いますが、hypot() は単位を持つ値を受け入れます。ただし、すべての値は同じ型である必要があります。

構文

/* <number> 値 */width: hypot(2em); /* 2em */width: hypot(3em, 4em); /* 5em */width: hypot(30px, 40px); /* 50px */width: hypot(48px, 64px); /* 80px */width: hypot(3px, 4px, 5px); /* 7.0710678118654755px */

引数

hypot(x [, ...]#) 関数は、1 つ以上のカンマ区切りの計算式を引数として受け取ります。

x,x2, ...,xN

<number>、<dimension>、または<percentage> に解決される計算式です。

返値

<number>、<dimension>、または<percentage> (入力に基づく) を返します。これは、各引数の 2 乗の合計値の平方根です。

• いずれかの入力がinfinite の場合、+∞ を返します。
• 引数が 1 つの場合、その絶対値を返します。hypot(2em) とhypot(-2em) はどちらも2em に解決されます。

形式文法

<hypot()> =
hypot(<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

例

hypot 関数をもとにしたサイズ

この例では、hypot() 関数を使用してサイズを計算します。

HTML

<div>  <div>100px</div>  <div>100px</div>  <div>141.42px</div>  <div>250px</div></div>

CSS

ここではサイズを定義するために、CSS カスタムプロパティ を利用しています。はじめに最初のサイズ (--size-0) を宣言し、これを使用して他のサイズを計算します。

• --size-1 は、--size-0 (100px) の斜辺の長さとして計算されます。値は 2 乗され、他に値がないためその平方根が返され、結果は 100px になります。
• --size-2 は、2 つの--size-0 (100px) の斜辺の長さとして計算されます。値は 2 乗され (100px * 100px = 10000px²)、それに再び--size-0 の 2 乗が加算され (10000px² + 10000px² = 20000px²)、その合計値の平方根 (√(20000px²)) が返され、結果は 141.42px になります。
• --size-3 は、--size-0 * 1.5 (150px) と--size-0 * 2 (200px) を用いて計算されます。これらの 2 乗の和の平方根が結果となります。それぞれの値は 2 乗され (22500px² と 40000px²)、それらが加算され (62500px²)、合計値の平方根 (√(62500px²)) が 250px になります。

:root {  --size-0: 100px;  --size-1: hypot(var(--size-0)); /*  100px */  --size-2: hypot(var(--size-0), var(--size-0)); /*  141.42px */  --size-3: hypot(    calc(var(--size-0) * 1.5),    calc(var(--size-0) * 2)  ); /*  250px */}

.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 の値として使用されます。

.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);}

結果

仕様書

ブラウザーの互換性

関連情報

• pow()
• sqrt()
• log()
• exp()