【CSS Modules】atan()関数の使い方
atan()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
atan()関数は、与えられた数値の逆正接（アークタンジェント）を計算する関数です。この関数は、引数として一つの数値または計算式を受け取り、その値の逆正接に対応する角度を返します。返される角度は、CSSで利用可能な角度単位（例えばdegやrad）で表現されます。
具体的には、指定された数値（例えば、比率y/x）の逆正接を求め、その結果を角度として提供します。戻り値の範囲は、-90度から90度の間（または-π/2ラジアンからπ/2ラジアン）です。これは、特定の比率を持つ直角三角形の鋭角の一つを算出するイメージです。
主に、要素の回転角度を動的に決定したり、グラフィック描画において特定の角度を計算する際に利用されます。例えば、CSSのtransformプロパティで要素を回転させる際に、JavaScriptなどからの入力に基づいて角度を算出する場面や、CSSカスタムプロパティと組み合わせてデザインシステムの動的な調整を行う際に活用できます。calc()関数内部でも使用できるため、他の数値やCSS変数と組み合わせた複雑な計算にも対応可能です。これにより、より柔軟で動的なデザイン表現が可能になります。
公式リファレンス: atan()
構文(syntax)
1atan(<number>)
引数(parameters)
<number> | <dimension>
- number | dimension: 角度を計算するための数値または次元を指定します
戻り値(return)
<angle>
atan() 関数は、指定された x 座標と y 座標の比率から計算される角度を返します。この角度は CSS の <angle> 型として表現されます。