CSSを使用してウェブサイトにスタイルを追加する方法は数多くありますが、その中でもストライプパターンは特に人気のあるデザイン手法の一つです。この記事では、CSSのbackground-imageプロパティを使って、ストライプ（ボーダー）パターンを簡単に作成する方法を紹介します。
基本的なストライプパターンの作成
まず、基本的なストライプパターンを作成する方法を見てみましょう。linear-gradient関数を使用して、ストライプの色と角度を設定します。
.stripes {
width: 200px;
height: 200px;
background-image: linear-gradient(45deg, #ffcc00 25%, transparent 25%, transparent 50%, #ffcc00 50%, #ffcc00 75%, transparent 75%, transparent);
background-size: 20px 20px;
}このコードでは、45度の角度で黄色と透明のストライプを交互に配置しています。background-sizeプロパティでストライプの幅と高さを設定することにより、パターンが繰り返されます。
水平および垂直ストライプの作成
ストライプパターンは、水平または垂直に配置することもできます。角度を0度または90度に設定することで、簡単に変更できます。
水平ストライプ
.horizontal-stripes {
width: 200px;
height: 200px;
background-image: linear-gradient(0deg, #ffcc00 50%, #ffffff 50%);
background-size: 100% 40px;
}垂直ストライプ
.vertical-stripes {
width: 200px;
height: 200px;
background-image: linear-gradient(90deg, #ffcc00 50%, #ffffff 50%);
background-size: 40px 100%;
}カスタムストライプの作成
複雑なデザインやカスタムストライプパターンも簡単に作成できます。linear-gradient関数の色と位置、およびbackground-sizeプロパティを調整することで、独自のデザインを作成できます。
.custom-stripes {
width: 200px;
height: 200px;
background-image: linear-gradient(45deg, #ffcc00 20%, #ffffff 20%, #ffffff 40%, #00ccff 40%, #00ccff 60%, #ffcc00 60%, #ffcc00 80%, #ffffff 80%);
background-size: 20px 20px;
}まとめ
CSSのbackground-imageプロパティとlinear-gradient関数を使用することで、簡単にストライプパターンを作成できます。角度や色、サイズを調整することで、様々なデザインを楽しむことができます。以下に示したコードを試して、あなたのウェブサイトに素敵なストライプパターンを追加してみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSストライプ</title>
<style>
.stripes {
width: 200px;
height: 200px;
background-image: linear-gradient(45deg, #ffcc00 25%, transparent 25%, transparent 50%, #ffcc00 50%, #ffcc00 75%, transparent 75%, transparent);
background-size: 20px 20px;
}
.horizontal-stripes {
width: 200px;
height: 200px;
background-image: linear-gradient(0deg, #ffcc00 50%, #ffffff 50%);
background-size: 100% 40px;
}
.vertical-stripes {
width: 200px;
height: 200px;
background-image: linear-gradient(90deg, #ffcc00 50%, #ffffff 50%);
background-size: 40px 100%;
}
.custom-stripes {
width: 200px;
height: 200px;
background-image: linear-gradient(45deg, #ffcc00 20%, #ffffff 20%, #ffffff 40%, #00ccff 40%, #00ccff 60%, #ffcc00 60%, #ffcc00 80%, #ffffff 80%);
background-size: 20px 20px;
}
</style>
</head>
<body>
<div class="stripes"></div>
<div class="horizontal-stripes"></div>
<div class="vertical-stripes"></div>
<div class="custom-stripes"></div>
</body>
</html>この方法を使えば、簡単に独自のストライプデザインを作成し、ウェブサイトをより魅力的にすることができます。ぜひ試してみてください！
