Perl Web開発者のHTML・CSS入門

斜めストライプを背景色に設定する方法

斜めストライプを背景色に設定する方法です。斜めの大きな２回繰り返すグラデーションを作成して、背景サイズを小さな値にすることで、斜めストライプを背景色に設定できます。

斜めストライプを背景色に設定するCSS

斜めストライプを背景色に設定するCSSです。ストライプ幅は、1pxです。

background: repeating-linear-gradient(-45deg,#fff 0%,#fff 25%,#DBEDFF 25%, #DBEDFF 50%);
background-size:4px 4px;

ストライプ色を変えるには?

#fffは間隔の白色です。その後ろの二つの「#DBEDFF」を変更しましょう。

background: repeating-linear-gradient(-45deg,#fff 0%,#fff 25%,red 25%, red 50%);
background-size:4px 4px;

ストライプ幅を変えるには

background-sizeを使うことで調整できます。

background: repeating-linear-gradient(-45deg,#fff 0%,#fff 25%,#DBEDFF 25%, #DBEDFF 50%);
background-size:8px 8px;

background: repeating-linear-gradient(-45deg,#fff 0%,#fff 25%,#DBEDFF 25%, #DBEDFF 50%);
background-size:16px 16px;

背景サイズを指定しないとどうなるの?

こうなります。

background: repeating-linear-gradient(-45deg,#fff 0%,#fff 25%,#DBEDFF 25%, #DBEDFF 50%);

4pxを指定すると、ストライプ幅は1pxになるのは、このような背景を4pxの正方形に入れようとしているからですね。