css
投稿日
投稿者 dennie

【CSS】repeating-linear-gradient

repeating-linear-gradient は CSS の関数です。repeating-linear-gradient関数を使用すると線形グラデーションの繰り返しを実現できます。

繰り返しを行わない linear-gradient を理解すると、より repeating-linear-gradient が理解できると思います。

参考

【CSS】linear-gradient

基本のポイント

具体的な例を見た方が理解が早いですが、基本的なポイントは以下の通りです。

色の開始位置、終了位置

基本的に色の開始位置、終了位置が重要になってきます。ここで言う開始位置、終了位置と言うのはグラデーションの開始、終了の事を指します。

開始位置

開始位置は px(ピクセル) や %(パーセント)を指定出来ます。
開始位置が指定されない場合、値は0になります。

終了位置

終了位置も開始位置と同様に px(ピクセル) や %(パーセント)を指定出来ます。
終了位置が指定されない場合、値は100%(終了位置の最大)となります。

繰り返し回数

繰り返す回数は自動的に計算されます。

繰り返しの基本

グラデーションの繰り返し

まずは、グラデーションを繰り返す場合の基本を確認します。指定の基本は以下の通りです。

repeating-linear-gradient(開始色 開始位置, 終了色 終了位置);

開始位置、終了位置の省略

開始位置、終了位置を指定しない場合、通常のグラデーションになります。これは開始位置を省略すると開始位置が0になり、終了位置を省略すると終了位置が要素の最大位置になるからです。

今回の例では、開始位置は0になります。これは開始位置が省略されているからです。
終了位置は100pxになります。これは終了位置が省略されているので、終了位置はboxクラスのheightの100pxになります。boxクラスのheightが終了位置になる理由は、グラデーションの方向を指定しない場合、上から下へグラデーションが行われるからです。
従ってグラデーションが1回繰り返されていることになるので、通常のグラデーションとなります。

HTML

<div class="box repeating-gradient-01"></div>

CSS

.box {
  height: 100px;
  width: 100px;
}

.repeating-gradient-01 {
  background:repeating-linear-gradient(red, blue); /* 開始位置、終了位置の省略 */
}

結果

終了位置の指定

終了位置を指定するとグラデーションが繰り返されます。ただし、終了位置は要素の最大位置より小さくして下さい。
終了位置を最大位置より小さく指定すると、開始、終了のグラデーションが繰り返し表示されます。

今回の例では最大位置は100px(boxのheight)になります。終了位置を50pxにしているので、グラデーションが2回繰り返されます。

HTML

<div class="box repeating-gradient-02"></div>

CSS

.box {
  height: 100px;
  width: 100px;
}

.repeating-gradient-02 {
  background:repeating-linear-gradient(red, blue 50px); /* 終了位置を指定 */
}

結果

なお、明示的に開始位置を0に指定した例は以下になります。結果は先ほどと同じになります。

HTML

<div class="box repeating-gradient-03"></div>

CSS

.box {
  height: 100px;
  width: 100px;
}

.repeating-gradient-03 {
  background:repeating-linear-gradient(red 0, blue 50px); /* 開始位置に0を指定、終了位置を指定 */
}

結果

終了位置の%(パーセント)指定

終了位置に%(パーセント)を指定出来ます。パーセントで指定した場合、終了位置は最大位置のパーセントになります。

今回の例では最大位置は100px(boxのheight)になります。終了位置を25%にしているので、グラデーションが4回(100/25=4回)繰り返されます。なお、25px(100/4=25px)が4回繰り返されます。

HTML

<div class="box repeating-gradient-04"></div>

CSS

.box {
  height: 100px;
  width: 100px;
}

.repeating-gradient-04 {
  background:repeating-linear-gradient(red, blue 25%); /* 終了位置を%(パーセント)で指定 */
}

結果

縞模様

repeating-linear-gradient関数を利用して縞模様を表現出来ます。

今までは開始色の開始位置と終了色の終了位置を指定しましたが、開始色についても終了位置、終了色についても開始位置を指定します。

repeating-linear-gradient(開始色 開始位置, 開始色 終了位置, 終了色 開始位置, 終了色 終了位置);

基本の縞模様

ポイントは開始色の終了位置と終了色の開始位置を同じにして下さい。

今回の例では、赤が0~30px、青が30px~50pxの組み合わせが、最大位置100px(boxのheight)の中で繰り返し表示されます。

HTML

<div class="box repeating-gradient-striped"></div>

CSS

.box {
  height: 100px;
  width: 100px;
}

.repeating-gradient-striped {
  background:repeating-linear-gradient(red, red 30px,blue 30px, blue 50px);
}

結果

© DeNnie.Lab All Rights Reserved.