【CSS Modules】sqrt()関数の使い方
sqrt()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
sqrt()関数は、指定された数値の正の平方根を計算して返す関数です。この関数は、CSSプロパティの値として利用され、特にcalc()関数と組み合わせて要素のサイズ、位置、色などの値を動的に決定する際に役立ちます。
引数には単一の数値を指定します。例えば、sqrt(9)は3を返します。sqrt()関数は、他のCSS関数と組み合わせて、例えばcalc()内で利用することで、動的な数値計算の一部として機能します。これにより、デザインにおける特定の数学的関係性や比率を効率的に表現できます。例えば、ある要素の幅が別の要素の面積の平方根に等しいといった複雑なレイアウト要件を満たすことが可能です。
ただし、sqrt()関数には負の数を引数として指定することはできません。負の数を指定した場合、計算結果は無効となり、そのCSSプロパティは適用されません。また、この関数が返す値は、利用するCSSプロパティが要求する型（長さ、角度、時間など）と互換性がある必要があります。
sqrt()関数は、CSSの算術式を記述できる場所であればどこでも利用可能であり、レスポンシブデザインや動的なUI要素のスタイリングにおいて、より柔軟な制御を提供します。
公式リファレンス: sqrt()
構文(syntax)
1width: sqrt(25px);
引数(parameters)
value: <number> | <dimension>
- value: <number> | <dimension>: 平方根を計算したい数値または次元を指定します。
戻り値(return)
<number> または <length-percentage>
sqrt()関数は、引数として与えられた数値または長さ・パーセンテージの平方根を返します。