【CSS Modules】cos()関数の使い方

cos()関数は、CSSのスタイルシート内で数学的なコサイン値を計算する関数です。この関数は、与えられた角度のコサインを求め、その結果を数値として返します。

cos()関数は単一の引数を取ります。この引数は、コサインを計算したい角度を表す数値であり、CSSの角度単位（例えば、deg（度）、rad（ラジアン）、grad（グラード）、turn（ターン））を必ず指定する必要があります。単位が指定されていない場合、無効な値として扱われることがあります。

計算結果として、cos()関数は-1から1の範囲の浮動小数点数を返します。例えば、cos(0deg)は1を、cos(90deg)は0を、cos(180deg)は-1を返します。

この関数は、主にcalc()関数と組み合わせて使用され、要素のサイズ、位置、色相などのプロパティ値を動的に計算する際に非常に有用です。例えば、カスタムプロパティと組み合わせて、複雑なレイアウトやアニメーションのタイミング関数を柔軟に制御することが可能になります。これにより、JavaScriptを使用せずにCSSだけでより高度なUI表現を実現したり、レスポンシブデザインで画面サイズに応じて動的に値を調整したりする場面で活用できます。

cos()関数を利用することで、三角関数を用いた規則的なパターンや動きをCSSで表現できるようになり、より複雑で洗練されたウェブデザインの実現に貢献します。

Copy
1.element {
2  width: calc(100px * cos(60deg));
3}

<angle> | <number>

• angle: 角度を表す値
• number: 数値を表す値

number

指定された角度のコサイン値を返します。この値は-1から1の範囲になります。