【CSS Modules】repeating-conic-gradient()関数の使い方
repeating-conic-gradient()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
repeating-conic-gradient()関数は、CSSの背景画像として、中心点から放射状に色が変化し、そのパターンを繰り返し描画する円錐グラデーションを生成する関数です。この関数を使用することで、円の中心から始まる色の遷移を角度に応じて定義し、そのグラデーションを無限に繰り返すテクスチャやパターンを作成できます。
主に、背景画像（background-imageプロパティ）の値として指定され、ウェブページのデザインに複雑な幾何学的模様やチェック柄、放射状のストライプなどを簡単に実装することを可能にします。引数として、グラデーションの中心位置（デフォルトは要素の中心）、開始角度、そして複数の色停止点（color-stop）を指定します。各色停止点では、特定の色とその色が適用される角度を指定し、これらの色停止点の間で色が滑らかに変化します。
repeating-という接頭辞が付いているため、定義したグラデーションパターンが要素の領域全体を埋めるように自動的に繰り返されます。これにより、画像ファイルを使用せずにCSSだけで、繰り返しのある背景パターンを手軽に作成できる点が大きな特徴です。例えば、中心から放射状に広がる異なる色の扇形を繰り返し表示するようなデザインを実現する際に非常に有効です。複雑な背景デザインを軽量かつ柔軟に実装したい場合に役立つCSS関数と言えます。
構文(syntax)
1repeating-conic-gradient(red 0deg, yellow 90deg);
引数(parameters)
[ from <angle> ]? [ at <position> ]?, <color-stop>, <color-stop> [, <color-stop>]*
- from <angle>?: グラデーションの中心からの開始角度を度数 (deg) で指定します (省略可能)
- at <position>?: グラデーションの中心位置を指定します (省略可能)
- <color-stop>: 色とその位置を指定します。例:
red 0%、blue - <color-stop> [<color-stop>]*: 2つ以上の色とその位置の組み合わせを指定します
戻り値(return)
<image>
repeating-conic-gradient() 関数は、繰り返される円錐グラデーションを画像として生成します。これは、背景画像や要素のボーダーなどに適用できます。