repeating-linear-gradient()

リピーティングリニアグラディエント（関数）

意味繰り返しの線形グラデーションを作成する関数

repeating-linear-gradient()とは？

repeating-linear-gradient()関数は、線形グラデーションを作成し、それを繰り返すパターンを生成するために使用します。この関数は、色の遷移が周期的に繰り返される背景などを作る際に便利です。

repeating-linear-gradient()の具体的な使い方

斜め方向の繰り返しグラデーションを作成する例

<style>
  .repeating-linear-gradient-bg {
    background: repeating-linear-gradient(45deg, yellow, blue 10%, yellow 20%);
    padding: 20px;
    color: white;
  }
</style>

<div class='repeating-linear-gradient-bg'>
  Repeating Linear Gradient
</div>

45度の角度で黄色から青へのグラデーションを作成し、10%ごとに黄色が再び始まる繰り返しパターンを背景に設定しています。

縦縞パターンを作成する例

<style>
  .stripe-pattern {
    background: repeating-linear-gradient(
      to right,
      transparent,
      transparent 10px,
      #ccc 10px,
      #ccc 20px
    );
    height: 100px;
    width: 100%;
  }
</style>

<div class='stripe-pattern'></div>

透明な背景と灰色の縦縞を10px間隔で繰り返すパターンを作成しています。

repeating-linear-gradient()に関するよくある質問

Q. 繰り返しの間隔は？

A. 色の停止位置を指定することで繰り返しの間隔を制御できます。例えば、20%ごとに繰り返す場合は、最後の色の停止位置を20%に設定します。

Q. linear-gradientとの違いは？

A. repeating-linear-gradientは指定したパターンを自動的に繰り返します。linear-gradientは1回のグラデーションのみを作成します。

Q. パターンのカスタマイズは？

A. 色の数、各色の停止位置、角度を変更することで、様々なパターンを作成できます。透明色を使用することで、より複雑なデザインも可能です。

repeating-linear-gradient()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのrepeating-linear-gradient()やattr()、clamp()、url()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。