CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのrepeating-linear-gradient()で線形グラデーションを繰り返す方法

CSSで線形グラデーションを繰り返し表示したい場合は、repeating-linear-gradient() 関数を使用します。通常の linear-gradient() はグラデーションが要素いっぱいに一度だけ描画されますが、この関数を使うと指定したカラーストップのパターンが自動的に繰り返され、ストライプ模様などを簡単に作成できます。

repeating-linear-gradient() の基本構文

background: repeating-linear-gradient(角度または方向, 色1 位置1, 色2 位置2, ...);

各色の位置（パーセントやピクセル）を指定することで、その範囲のグラデーションが要素全体にわたって繰り返し描画されます。

実装例

以下のコードでは、緑・オレンジ・マルーン（暗い赤褐色）の3色を使った繰り返し線形グラデーションを実装しています。

<!DOCTYPE html>
<html>
<head>
  <style>
    #demo {
      height: 300px;
      background: repeating-linear-gradient(green 20%, orange 40%, maroon 40%);
    }
  </style>
</head>
<body>
  <p>繰り返し線形グラデーションのサンプルです。</p>
  <div id="demo"></div>
</body>
</html>

コードのポイント

  • green 20%：上から20%までが緑から次の色へ変化する区間になります。
  • orange 40%：20%〜40%の間でオレンジへグラデーションします。
  • maroon 40%：40%の位置でマルーンに即座に切り替わり、以降このパターンが繰り返されます。

同じ位置に2つの色を指定すると境界がくっきりしたストライプになり、位置に間隔を持たせると滑らかなグラデーションになります。角度を指定すれば斜めの縞模様なども自由に表現できるため、背景装飾やボーダー風のデザインに幅広く活用できます。

  1. CSSで背景に放射状グラデーション（radial-gradient）を設定する方法

    CSSのradial-gradient()関数を使用すると、中心点から外側に向かって色が変化する放射状グラデーションを、背景画像として簡単に設定できます。複数の色を指定するだけで、滑らかなグラデーションが自動的に生成されるため、ボタンやバナー、セクション背景などのデザインに幅広く活用できます。radial-gradient()の基本構文background: radial-gradient(色1, 色2, 色3, ...);色はカンマ区切りで複数指定でき、左側に記述した色が中心になり、右側の色が外周へと変化していきます。実装例次のコードでは、緑（green）・オレンジ（orange）・栗色（m

  2. CSSでスクロールに連動して変化するグラデーション背景を実装する方法

    Webページをスクロールしたときに、背景のグラデーションが自然に変化していく演出は、サイトに動きと深みを与えてくれる効果的なテクニックです。CSSだけでこの効果を実現するには、linear-gradient()を使ったグラデーション背景と、十分な高さを持つbody要素を組み合わせます。 仕組みのポイント この手法の鍵となるのは、以下の2点です。 bodyの高さを250vhなど画面より大きく設定する: ページ全体が長くなることでスクロールが発生します。グラデーションはbody全体に描画されるため、スクロールに応じて見えている部分が変化し、まるでグラデーションが「動いている」ように見えます。 l