【CSS Modules】hypot()関数の使い方
hypot()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
hypot()関数は、複数の引数の二乗和の平方根を計算する関数です。この関数は、数学におけるピタゴラスの定理を拡張したもので、例えば二つの数値 x と y を引数に取ると、sqrt(x*x + y*y) の結果を返します。これは、直角三角形の2辺の長さから斜辺の長さを求める計算と同じです。引数は1つ以上指定でき、それぞれの引数に長さ、角度、時間、周波数、解像度などのCSS単位を持つ値、または単位なしの数値を指定できます。すべての引数は同じタイプ（例えばすべて長さ）である必要があり、異なるタイプを混ぜることはできません。戻り値は計算結果を示す数値であり、引数に与えられた単位が引き継がれます。
この関数は、主にCSSのカスタムプロパティ（CSS変数）やcalc()関数と組み合わせて使用されます。これにより、要素のサイズや位置、変形などのプロパティ値を、動的な計算に基づいて決定することが可能になります。例えば、2つの異なる方向への移動量から最終的な距離を計算し、その結果を要素のwidthやheight、transformプロパティの値として利用することができます。これにより、より複雑なレイアウトやアニメーションを柔軟に制御するのに役立ちます。
構文(syntax)
1.element { 2 width: calc(hypot(30px, 40px)); 3}
引数(parameters)
<calc-sum> <calc-sum>+
- <calc-sum>: 1つ目の計算式。
- <calc-sum>+: 2つ目以降の計算式。
戻り値(return)
<number> | <length> | <angle> | <time> | <frequency> | <resolution> | <percentage>
CSSのhypot()関数は、直角三角形の斜辺の長さを計算します。その結果として、数値、または長さ、角度、時間、周波数、解像度、パーセンテージといったCSSの単位を持つ値を返します。