【CSS Modules】sin()関数の使い方
sin()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
sin()関数は、引数に指定された角度のサイン（正弦）値を計算して返す関数です。この関数は、CSSの数学関数の一つとして提供されており、ウェブページのデザインやアニメーションにおいて、動的な数値計算が必要な場面で利用されます。引数には、角度を表す<angle>型の値を受け取ります。例えば、deg（度）、rad（ラジアン）、grad（グラジアン）、turn（ターン）といった単位を持つ値を指定できます。これにより、様々な角度表現に対応可能です。
sin()関数は、指定された角度のサイン値を、-1から1までの範囲の単位なしの<number>型として返します。この戻り値は、例えば要素を回転させるtransformプロパティの角度計算や、leftやtopといった配置プロパティのピクセル値の算出、あるいはアニメーションの特定の時点でのオフセットを計算する際に非常に役立ちます。この関数単体で使うよりも、calc()関数と組み合わせて、他の数値と乗算や加算を行うことで、具体的なピクセル値や他のCSSプロパティの値を導き出すことが一般的です。
特に、カスタムプロパティ（CSS変数）と組み合わせることで、JavaScriptなしで要素の動きや配置を制御する高度なアニメーションやレスポンシブなレイアウト作成に応用できます。例えば、円形に要素を配置したり、波打つような動きを表現したりする場合に、cos()関数など他の三角関数と合わせて使用されることが一般的です。CSSで数学的な計算を利用することで、より柔軟で表現豊かなユーザーインターフェースを構築できるようになります。この関数を理解することは、現代のCSSにおける動的なスタイリングをマスターするための重要なステップの一つです。
構文(syntax)
1--my-sine-value: sin(30deg);
引数(parameters)
<angle> | <number>
- <angle> | <number>: CSSの角度（例: 45deg）または数値を指定します。
戻り値(return)
sin()関数は、角度のサイン値を計算し、その結果を<number>型で返します。