【CSS Modules】conic-gradient()関数の使い方
conic-gradient()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
conic-gradient()関数は、CSSにおいて円錐グラデーションを生成する関数です。この関数は、指定された中心点を基点とし、その周囲を角度に沿って複数の色を滑らかに変化させる画像を生成します。生成されたグラデーションは、主にHTML要素の背景画像を定義するbackground-imageプロパティの値として利用されます。
この関数は、グラデーションの開始角度、中心位置、そして複数のカラー・ストップ（色と停止位置のペア）を引数として受け取ります。開始角度はfrom <angle>で指定し、グラデーションがどの角度から始まるかを定義します。中心位置はat <position>で指定し、グラデーションの中心となる座標を設定します。これらの引数はオプションであり、省略された場合はデフォルト値が適用されます。
最も重要なカラー・ストップは、色 角度または色 始点角度 終点角度の形式で指定します。例えば、red 0deg 90deg, blue 90deg 180degと記述することで、0度から90度までは赤色、90度から180度までは青色というように、角度に応じた色の変化を詳細に制御できます。これにより、円グラフのような形状や、扇形に色を配置するような視覚効果を容易に作成することが可能です。
conic-gradient()関数によって生成される円錐グラデーションは、ウェブページのデザインに豊かで多様な表現をもたらし、視覚的な魅力を高めるために幅広く活用されます。
構文(syntax)
1.example-element { 2 background: conic-gradient(from 0deg at center, red, orange 60deg, yellow 120deg, green 180deg, blue 240deg, purple 300deg, red 360deg); 3}
引数(parameters)
[ from <angle> ]?, [ at <position> ]?, <color-stop-list>
- from <angle>?: グラデーションの開始角度を度数（deg）で指定します。省略された場合は0deg（上方向）から始まります。
- at <position>?: グラデーションの中心位置を指定します。省略された場合は
centerになります。 - <color-stop-list>: 色と、その色がグラデーションのどの位置（パーセンテージまたは角度）まで表示されるかを指定するリストです。
戻り値(return)
image
conic-gradient() 関数は、中心から放射状に色が変化する円錐形のグラデーション画像を生成します。この画像は、背景や要素の background-image プロパティなどで使用できます。