【コピペOK！21選】CSSでストライプ柄の背景を実装する方法！サンプルコード有

こんにちは。サイバーブリッジweb担当の久保田です。

今回はCSS3の「background-image: linear-gradient();バックグラウンド イメージ ライナー グラディエント」を使ってストライプ柄背景のデザインを作りました。

コピペOKですので、お気に召したデザインがありましたら是非使ってください。

仕組みを解説

まずはベースとなるサンプルコードです。

body {
background-image: linear-gradient(
	-45deg,
	#dfdfdf 25%, /*1つ目の色の終点*/
	#ffffff 25%, /*2つ目の色の始点*/
	#ffffff 50%, /*2つ目の色の終点*/
	#dfdfdf 50%, /*3つ目の色の始点*/
	#dfdfdf 75%, /*3つ目の色の終点*/
	#ffffff 75%, /*4つ目の色の始点*/
	#ffffff　　　 /*4つ目の色の終点*/
);
background-size: 40px 40px; /*ストライプ線の太さ*/
}

通常「background-image: linear-gradient();」は線形グラデーションを指定する際に使用しますが、「-45deg」で角度をつけてストライプ柄に見せています。

続いて色を指定していきますが、普通に記述すると単純なグラデーションになってしまいます。
グラデーションには色の始点と終点があり、それらを同じ色にしてストライプ柄を作っていきます。

「background-size:」でストライプ線の太さを調整します。
サンプルの40pxを好きな数値で変更可能ですが、必ず高さと幅を同じ数値で記述してください。

上記のコードは分かりやすく改行していますが、1行にまとめて記述可能です。

background-image:linear-gradient(-45deg, #dfdfdf 25%, #ffffff 25%, #ffffff 50%, #dfdfdf 50%, #dfdfdf 75%, #ffffff 75%, #ffffff);

それではサンプルをどうぞ･:*+.\(( °ω° ))/.:+

ピンク系・レッド系

ピンク × ホワイト

background-image:linear-gradient(-45deg, #fff 25%, #eac7cd 25%, #eac7cd 50%, #fff 50%, #fff 75%, #eac7cd 75%, #eac7cd);

ピンク × クリーム

background-image:linear-gradient(-45deg, #E69DB0  25%, #F1ECE6 25%, #F1ECE6 50%, #E69DB0  50%, #E69DB0  75%, #F1ECE6 75%, #F1ECE6);

ピンク × ブラウン

background-image:linear-gradient(-45deg, #BA807E 25%, #F8E9EC 25%, #F8E9EC 50%, #BA807E  50%, #BA807E 75%, #F8E9EC 75%, #F8E9EC);

ピンク × オレンジ

background-image:linear-gradient(-45deg, #F7C8DC 25%, #FAD4BF 25%, #FAD4BF 50%, #F7C8DC  50%, #F7C8DC 75%, #FAD4BF 75%, #FAD4BF);

レッド × ピンク

background-image:linear-gradient(-45deg, #C63E43 25%, #F192BE 25%, #F192BE 50%, #C63E43  50%, #C63E43 75%, #F192BE 75%, #F192BE);

ピンク × ダークグレー

background-image:linear-gradient(-45deg, #48444A 25%, #EBADC5 25%, #EBADC5 50%, #48444A  50%, #48444A 75%, #EBADC5 75%, #EBADC5);

ピンク × チェリーブラウン

background-image:linear-gradient(-45deg, #6D414E 25%, #D8B1C6 25%, #D8B1C6 50%, #6D414E  50%, #6D414E 75%, #D8B1C6 75%, #D8B1C6);

ピンク × ピンク

background-image:linear-gradient(-45deg, #ffcccc 25%, #ffeff7 25%, #ffeff7 50%, #ffcccc  50%, #ffcccc 75%, #ffeff7 75%, #ffeff7);

ブルー系

ブルー × オフホワイト

background-image:linear-gradient(-45deg, #DAE9EE 25%, #FFFEF9 25%, #FFFEF9 50%, #DAE9EE  50%, #DAE9EE 75%, #FFFEF9 75%, #FFFEF9);

ネイビー × ライトグレー

background-image:linear-gradient(-45deg, #1D2E45 25%, #D4D2D3 25%, #D4D2D3 50%, #1D2E45  50%, #1D2E45 75%, #D4D2D3 75%, #D4D2D3);

ブルー × ブルー

background-image:linear-gradient(-45deg, #3D4581 25%, #738BC3 25%, #738BC3 50%, #3D4581  50%, #3D4581 75%, #738BC3 75%, #738BC3);

ブルー × グレー

background-image:linear-gradient(-45deg, #2FA1CC 25%, #B7BABE 25%, #B7BABE 50%, #2FA1CC  50%, #2FA1CC 75%, #B7BABE 75%, #B7BABE);

ブルー × パープル

background-image:linear-gradient(-45deg, #1F3880 25%, #453DAE 25%, #453DAE 50%, #1F3880  50%, #1F3880 75%, #453DAE 75%, #453DAE);

グリーン系

グリーン × クリームイエロー

background-image:linear-gradient(-45deg, #BFFFA8 25%, #FBFFCC 25%, #FBFFCC 50%, #BFFFA8  50%, #BFFFA8 75%, #FBFFCC 75%, #FBFFCC);

グリーン × ブラウン

background-image:linear-gradient(-45deg, #4E1413 25%, #8BC2B8 25%, #8BC2B8 50%, #4E1413  50%, #4E1413 75%, #8BC2B8 75%, #8BC2B8);

グリーン × グリーン

background-image:linear-gradient(-45deg, #445A41 25%, #CADBC9 25%, #CADBC9 50%, #445A41  50%, #445A41 75%, #CADBC9 75%, #CADBC9);

グリーン ×　ブルー

background-image:linear-gradient(-45deg, #37767D 25%, #B6D7E6 25%, #B6D7E6 50%, #37767D  50%, #37767D 75%, #B6D7E6 75%, #B6D7E6);

ブラック系

ホワイト × パールホワイト

background-image:linear-gradient(-45deg, #f9f8f7 25%, #ffffff 25%, #ffffff 50%, #f9f8f7  50%, #f9f8f7 75%, #ffffff 75%, #ffffff);

ライトグレー × パールホワイト

background-image:linear-gradient(-45deg, #dfdfdf 25%, #f9f8f7 25%, #f9f8f7 50%, #dfdfdf  50%, #dfdfdf 75%, #f9f8f7 75%, #f9f8f7);

グレー × ライトグレー

background-image:linear-gradient(-45deg, #dfdfdf 25%, #aaaaaa 25%, #aaaaaa 50%, #dfdfdf  50%, #dfdfdf 75%, #aaaaaa 75%, #aaaaaa);

ブラック × ライトグレー

background-image:linear-gradient(-45deg, #dfdfdf 25%, #191919 25%, #191919 50%, #dfdfdf  50%, #dfdfdf 75%, #191919 75%, #191919);

以上になります。
結構目がチカチカしますが大丈夫だったでしょうか？

また気が向いたら追加します･:*+.\(( °ω° ))/.:+