【CSS Modules】linear-gradient()関数の使い方
linear-gradient()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
linear-gradient()関数は、CSSのbackground-imageプロパティなどで使用され、2つ以上の色を直線的に滑らかに変化させる線形グラデーションを作成する関数です。この関数を利用することで、Webページのデザインに奥行きや動きのある視覚効果を、画像ファイルを用意することなく純粋なCSSのみで加えることができます。
グラデーションの方向は、キーワード（例: to top, to right, to bottom left）または角度（例: 0deg, 90deg, 180deg）で指定します。その後に、グラデーションを構成する複数の色をカンマ区切りで記述します。各色には、オプションで色の停止位置（color stop）をパーセンテージや長さの単位で指定することが可能です。この色停止位置により、特定の色がグラデーション内でどの位置から始まり、どの位置で終わるかを細かく制御し、より複雑で精度の高いグラデーションパターンを実現できます。
例えば、Webサイトのヘッダー部分に上品な色の変化を持たせたり、ボタンに立体感を加えたりする際に活用されます。linear-gradient()関数で生成されるグラデーションは、画像データではなくCSSの描画命令であるため、解像度に依存せず、どのような拡大・縮小にも対応し、常にクリアな表示を提供します。これにより、外部画像ファイルの読み込みを削減し、ウェブページの表示速度向上にも貢献する、効率的で柔軟なデザイン手法として広く利用されています。
構文(syntax)
1background-image: linear-gradient(to right, red 0%, yellow 50%, blue 100%);
引数(parameters)
[ <angle> | to <side-or-corner> ]?, <color-stop-list>
- <angle> | to <side-or-corner>?: グラデーションの方向を指定します。角度（例: 45deg）または方向（例: to top, to bottom right）で指定できます。省略可能です。
- <color-stop-list>: グラデーションに使用する色とその位置を指定します。カンマ区切りで、色と任意で位置（例: red 0%, blue 100%）を指定します。
戻り値(return)
<image>
linear-gradient() 関数は、指定された方向に沿って色が滑らかに変化するグラデーション画像を生成します。この画像は、背景画像として要素に適用できます。