ウェブデザインにおいて、背景にストライプパターンを取り入れることで、視覚的な魅力と動きを加えることができます。ストライプ背景はシンプルながらも効果的で、さまざまなデザインスタイルにマッチします。本記事では、CSSを使用してストライプ背景を作成する方法を、具体的なコード例とともに詳しく解説します。
ストライプ背景とは
ストライプ背景は、交互に色が変わる縦または斜めの線模様の背景デザインです。シンプルでありながら視覚的に印象的なデザインを実現でき、テキストや他のコンテンツを引き立てる効果があります。ストライプパターンは、ブランドアイデンティティの強化や、セクションの区切りとしても活用されます。
CodePen ソースコードサンプル
基本的なHTML構造
ストライプ背景を適用するための基本的なHTML構造は非常にシンプルです。以下のような<div>要素にクラスを付与し、CSSでスタイリングを行います。
<div class="stripe">
<p class="text">テキストテキストテキストテキストテキスト</p>
</div>解説:
<div class="stripe">: ストライプ背景を適用するコンテナ要素です。<p class="text">: 背景上に表示されるテキスト要素です。適宜スタイリングします。
CSSでストライプ背景を作成する方法
ストライプ背景を作成するために、CSSのrepeating-linear-gradientを使用します。以下に基本的なスタイルを示します。
.stripe {
--STRIPE_ROTATE: -45deg;
--STRIPE_COLOR_1: #a5d9ff;
--STRIPE_COLOR_2: #ffffff;
--STRIPE_WIDTH_1: 5px;
--STRIPE_WIDTH_2: 5px;
--STRIPE_WIDTH_3: 10px;
background: repeating-linear-gradient(
var(--STRIPE_ROTATE),
var(--STRIPE_COLOR_1),
var(--STRIPE_COLOR_1) var(--STRIPE_WIDTH_1),
var(--STRIPE_COLOR_2) var(--STRIPE_WIDTH_1),
var(--STRIPE_COLOR_2) var(--STRIPE_WIDTH_3)
);
}
.text {
text-align: center;
padding-block: 200px;
}ポイント:
- カスタムプロパティ（CSS変数）を使用して、ストライプの角度、色、幅を簡単に調整可能。
repeating-linear-gradientを用いて、連続したストライプパターンを生成。
コードの詳細解説
--STRIPE_ROTATE: ストライプの角度を設定。負の値は反時計回りの回転を意味します。--STRIPE_COLOR_1と--STRIPE_COLOR_1: ストライプの交互に使用する色。--STRIPE_WIDTH_1,--STRIPE_WIDTH_1,--STRIPE_WIDTH_3: ストライプの幅をピクセル単位で設定。repeating-linear-gradient: 線形グラデーションを繰り返してストライプを作成。最初の引数はグラデーションの角度。各カラーと幅の指定により、交互に色が変わるストライプパターンを形成。
