【CSS Modules】tan()関数の使い方
tan()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
tan()関数は、CSSの数学関数の一つとして、引数として与えられた角度の正接（タンジェント）を計算する関数です。この関数は、指定された角度のタンジェント値を数値として返します。引数には、deg（度）、rad（ラジアン）、grad（グラジアン）、turn（ターン）といった角度の単位を持つ値を指定することができます。例えば、tan(45deg)は1を、tan(0.25turn)も1を返します。
戻り値は単位のない数値であり、これは直角三角形における対辺と隣辺の長さの比率を表します。tan()関数は、主にCSSカスタムプロパティ（CSS変数）やcalc()関数と組み合わせて使用されることで、複雑なレイアウトの調整や動的な要素の配置において、角度に基づく比率の計算が必要な場合に有用です。例えば、JavaScriptで計算する代わりに、CSSだけで特定の角度に応じた要素のサイズや位置の調整に活用することが可能になります。
この関数を利用することで、三角関数を用いたデザインやアニメーションの表現の幅が広がります。しかし、90度や270度などの特定の角度ではタンジェント値が定義されない（無限大となる）ため、これらの角度を引数として与える際には注意が必要です。正確な計算に基づいてウェブページの表現を豊かにするための強力なツールの一つです。
公式リファレンス: tan()
構文(syntax)
1.element { 2 --calculated-value: tan(45deg); 3}
引数(parameters)
<angle>
- angle: <angle>: タンジェントを計算する角度を指定します。角度の単位には、度（deg）、ラジアン（rad）、グラジアン（grad）、ターン（turn）などが使用できます。
戻り値(return)
<number>
与えられた角度（ラジアン）の正接（タンジェント）を返します。