【CSS Modules】radial-gradient()関数の使い方
radial-gradient()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
radial-gradient()関数は、要素の背景に円形または楕円形のグラデーションを作成する関数です。この関数を使用することで、中心から外側に向かって滑らかに色が変化する効果を表現できます。
グラデーションの中心位置、形状（円か楕円か）、サイズ、そして色の変化の仕方を詳細に指定することが可能です。例えば、atキーワードを使用することでグラデーションの中心位置を調整でき、circleやellipseキーワードでグラデーションの形状を円形または楕円形に設定します。また、グラデーションのサイズはclosest-corner、farthest-corner、closest-side、farthest-sideなどのキーワードで指定でき、中心から最も近い角や遠い角、あるいは最も近い辺や遠い辺まで広がるように設定できます。
色の変化は、一つ以上の色と、その色がグラデーション全体の中でどの位置に来るかを示す位置情報（オプション）を組み合わせて指定します。たとえば、「red 0%, blue 100%」と指定すると、グラデーションの中心が赤色で、そこから外側に向かって青色に変化する効果が作成されます。複数の色を指定することで、より複雑な色の変化を表現することも可能です。
この関数は、Webデザインにおいて、ボタンの背景やセクションの区切り、装飾的な要素など、多様な場面で視覚的な奥行きやアクセントを加えるために広く利用されています。透明度を持つ色を指定することもできるため、他の要素と重ね合わせることでさらに豊かな表現が可能です。
構文(syntax)
1radial-gradient(circle at center, red, blue);
引数(parameters)
[ <shape> || <size> ] [ at <position> ]? , <color-stop-list>
[ <shape> || <size> ]: グラデーションの形状とサイズを指定します。[ at <position> ]?: グラデーションの中心位置を指定します。<color-stop-list>: グラデーションで使用する色のリストと、それぞれの位置を指定します。
戻り値(return)
<image>
radial-gradient()関数は、指定した形状と色でグラデーションを表現する画像データを返します。