【CSS Modules】repeating-radial-gradient()関数の使い方
repeating-radial-gradient()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
repeating-radial-gradient()関数は、CSSの背景などに円形または楕円形のグラデーションを生成し、そのパターンを繰り返し適用する機能を提供する関数です。この関数は、通常のradial-gradient()関数が単一のグラデーションを作成するのに対し、指定された色のストップポイントに基づいてグラデーションのパターンを、まるでタイルを敷き詰めるように繰り返して表示します。
この関数を使用することで、複雑な背景パターンやデザイン要素を手軽にCSSのみで作成できます。グラデーションの形を円（circle）または楕円（ellipse）から選択し、その大きさや中心位置を指定することが可能です。さらに、複数の色とその停止位置（カラーストップ）を詳細に設定することで、グラデーションがどのように変化し、どのタイミングで次の繰り返しが始まるかを制御します。
例えば、赤から青へ、そして青から緑へと色が変化するグラデーションを定義し、それを繰り返すことで、ストライプ状や波紋のような視覚効果を生成することができます。カラーストップを適切に設定することで、色の急激な変化や滑らかな移行を表現し、多彩なデザインに応用できます。ただし、繰り返しパターンであるため、カラーストップの指定によっては予期せぬ模様が生成される可能性もあるため、意図したデザインになるよう注意深く設定することが重要です。
構文(syntax)
1repeating-radial-gradient( 2 circle farthest-corner at center, 3 red 0%, 4 yellow 10%, 5 red 20% 6)
引数(parameters)
[ <radial-gradient-shape> || <radial-gradient-size> ] [ at <position> ]? , <color-stop-list>
<radial-gradient-shape>: グラデーションの形状を指定します（例:circle,ellipse）。省略可能です。<radial-gradient-size>: グラデーションのサイズを指定します（例:closest-corner,farthest-side）。省略可能です。at <position>: グラデーションの中心位置を指定します（例:50% 50%,top left）。省略可能です。<color-stop-list>: グラデーションで使用する色のリストと、それぞれの色の位置を指定します。
戻り値(return)
image
repeating-radial-gradient() 関数は、中心から外側に向かって繰り返し模様を描画する画像を指定した背景画像として返します。