hypot()

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() 関数を使用してサイズを計算します。

HTML

<div class="boxes">
  <div class="box">100px</div>
  <div class="box one">100px</div>
  <div class="box two">141.42px</div>
  <div class="box three">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()