【CSS Modules】skewY()関数の使い方
skewY()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
skewY()関数は、CSSのtransformプロパティと組み合わせて使用することで、ウェブページ上のHTML要素をY軸（垂直方向）に沿って傾ける、または歪ませる機能を提供する関数です。この関数は、指定された角度に基づいて要素の形状を変形させ、平行四辺形やひし形のように見せる効果を作り出します。
具体的には、skewY()関数に角度の値を引数として渡すことで、要素の上端と下端を水平方向にずらし、全体の見た目を垂直方向に歪ませます。例えば、transform: skewY(30deg);と記述すると、要素がY軸に対して30度傾いた状態になります。負の値を指定することも可能で、その場合は傾きの方向が反転します。角度の単位としては、度数（deg）やラジアン（rad）などが利用できます。
この関数は、単に要素の見た目を変更するだけでなく、デザインに視覚的なアクセントを加えたり、アニメーション効果の一部として動的な変形を表現したりする際に非常に有用です。特に、ユーザーインターフェースにおいて、要素に奥行き感や動きを持たせることで、より魅力的でインタラクティブな体験を提供するために利用されます。skewY()関数はCSSの2D変形機能の一つであり、他のtransform関数（例えば、translateX()やrotate()など）と組み合わせて使うことで、さらに複雑で多様な視覚効果を実現することが可能です。要素のコンテンツ自体も一緒に変形されるため、テキストや画像を含む要素に適用する際は、その表示に注意を払う必要があります。
公式リファレンス: skewY()
構文(syntax)
1.element { 2 transform: skewY(15deg); 3}
引数(parameters)
<angle>
- angle: CSSの角度単位（deg, turn, rad, gradなど）で、Y軸周りの傾きを指定します。
戻り値(return)
戻り値なし
戻り値はありません