【CSS Modules】repeating-linear-gradient()関数の使い方
repeating-linear-gradient()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
repeating-linear-gradient()関数は、CSSのbackground-imageプロパティなどで使用され、直線的なグラデーションパターンを生成し、それを繰り返し表示する機能を提供する関数です。この関数は、linear-gradient()関数が一度限りのグラデーションを作成するのに対し、指定されたグラデーションがその長さに応じて無限に繰り返される点が特徴です。
この関数を使うことで、開発者は背景に縞模様やチェック柄、あるいはより複雑な幾何学的なパターンを簡単に実装できます。基本的な書式では、まずグラデーションの進行方向を角度（例: 45deg）やキーワード（例: to right）で指定します。その後に、複数の「カラー停止点」を定義します。カラー停止点とは、特定の色と、その色がグラデーション内でどこまで到達するかを示す位置（パーセンテージやピクセルなどの長さ）を組み合わせたものです。
例えば、red 0%, red 10%, blue 10%, blue 20%のように設定することで、赤と青の幅10%のストライプが交互に現れ、それが連続して繰り返される背景を作成できます。これにより、Webページのデザインに視覚的なリズムや奥行きを加えたり、特定の要素を目立たせたりすることが可能です。システムエンジニアがWebデザインに視覚的なアクセントやパターンを加える際に、CSSのみで柔軟かつ軽量な背景を実現する強力な手段となります。
構文(syntax)
1background-image: repeating-linear-gradient(to right, red, yellow 20%, blue 40%);
引数(parameters)
[ <angle> | to <side-or-corner> ]?, <color> [ <percentage> | <length> ]?, <color> [ <percentage> | <length> ]? [, <color> [ <percentage> | <length> ]? ...]
- <angle> | to <side-or-corner>?: グラデーションの方向を指定します。角度 (<angle>) または "to" キーワードに続けて辺 (<side>) または角 (<corner>) を指定します。省略可能です。
- <color> [ <percentage> | <length> ]?: グラデーションの色とその位置を指定します。色 (<color>) は必須で、それに続くパーセンテージ (<percentage>) または長さ (<length>) で位置を指定します。省略可能です。
- <color> [ <percentage> | <length> ]?: 2つ目のグラデーションの色とその位置を指定します。
- [, <color> [ <percentage> | <length> ]? ...]: 3つ目以降のグラデーションの色とその位置をカンマ区切りで追加できます。
戻り値(return)
image
この関数は、指定した色と位置の間で線形にグラデーションを繰り返し描画した画像（<image>）を返します。