CSS でストライプ（縞模様）を作る方法
最終更新日 - 公開日 2017.05.14
by
CSS でストライプ（縞模様）を作る方法を紹介します。
例えば、背景画像を使わずにストライプ（縞模様）を作りたいときに便利な方法です。
linear-gradient を使った方法
ストライプを作るには CSS セレクタの background-image の linear-gradient または repeating-linear-gradient を使用します。まずは linear-gradient を使用したストライプの作り方を紹介します。
linear-gradient を使った横ストライプを作る方法
CSS スタイル linear-gradient を使った横ストライプを作る方法方法を紹介します。
linear-gradient を使ったストライプの見た目はこんな感じです。
ベースの HTML は次の通りです。
<div class="yoko-stripe">横ストライプ</div>
CSS はこちら。
.yoko-stripe {
position: relative;
width: 240px;
margin: 0 auto;
padding: 15px;
font-size: 16px;
line-height: 1.3;
text-align: center;
letter-spacing: 0.05em;
border-radius: 8px;
background-image: linear-gradient(0deg,
#fff 25%, #000 25%, #000 50%, #fff 50%, #fff 75%,#000 75%, #000
);
background-size: 4px 4px;
}
ストライプだけの記述はこちら。
.yoko-stripe {
background-image: linear-gradient(0deg,
#fff 25%, #000 25%, #000 50%, #fff 50%, #fff 75%,#000 75%, #000
);
background-size: 4px 4px;
}
CSS スタイル linear-gradient は、本来グラデーションを表現するために使用するスタイルです。
今回はこれを応用することでストライプの表示を実現しています。
まずはグラデーションの角度を指定、角度によっては縦ストライプや斜めストライプを作ることもできます。
続いてグラデーションの間隔と色を指定、最後に background-size でサイズを指定して完成です。
例えば、間隔の指定次第で、次のような間隔を開けたストライプの表現が可能です。
linear-gradient を使った縦ストライプを作る方法
CSS スタイル linear-gradient を使った縦ストライプを作る方法方法を紹介します。
実際の見た目はこんな感じです。
ストライプだけの記述はこちら。
.tate-stripe {
background-image: linear-gradient(90deg,
#fff 25%, #000 25%, #000 50%, #fff 50%, #fff 75%,#000 75%, #000
);
background-size: 4px 4px;
}
linear-gradient を使った斜めストライプを作る方法
CSS スタイル linear-gradient を使った斜めストライプを作る方法方法を紹介します。
実際の見た目はこんな感じです。
ストライプだけの記述はこちら。
.naname-stripe {
background-image: linear-gradient(-45deg,
#fff 25%, #000 25%, #000 50%, #fff 50%, #fff 75%,#000 75%, #000
);
background-size: 4px 4px;
}
repeating-linear-gradient を使った方法
CSS でストライプを作るための別の方法として repeating-linear-gradient を使用する方法もあります。
repeating-linear-gradient はグラデーションの繰り返しに特化したスタイルになります。
linear-gradient と比べると、こちらは記述も簡単で実装し易い気がします。
repeating-linear-gradient を使った横ストライプを作る方法
CSS スタイル repeating-linear-gradient を使った横ストライプを作る方法方法を紹介します。
repeating-linear-gradient を使った実際のストライプの見た目はこんな感じです。
ストライプだけの記述はこちら。
.yoko-stripe2 {
background: repeating-linear-gradient(
0deg, /* 角度の指定 */
#fff, /* 色A ... 開始 */
#fff 3px, /* 色A ... 終了 */
#000 3px, /* 色B ... 開始 */
#000 6px /* 色B ... 終了 */
);
}
ストライプの色数を増やしたい場合は次のように指定を追加します。
ストライプだけの記述はこちら。
.yoko-stripe3 {
background: repeating-linear-gradient(
0deg, /* 角度の指定 */
#fff, /* 色A ... 開始 */
#fff 3px, /* 色A ... 終了 */
#ef5350 3px, /* 色B ... 開始 */
#ef5350 6px, /* 色B ... 終了 */
#fff 6px, /* 色C ... 開始 */
#fff 9px, /* 色C ... 終了 */
#ffca28 9px, /* 色D ... 開始 */
#ffca28 12px /* 色D ... 終了 */
);
}
repeating-linear-gradient を使った縦ストライプを作る方法
CSS スタイル repeating-linear-gradient を使った縦ストライプを作る方法方法を紹介します。
repeating-linear-gradient を実際の使ったストライプの見た目はこんな感じです。
ストライプだけの記述はこちら。
.tate-stripe2 {
background: repeating-linear-gradient(
90deg, /* 角度の指定 */
#fff, /* 色A ... 開始 */
#fff 3px, /* 色A ... 終了 */
#000 3px, /* 色B ... 開始 */
#000 6px /* 色B ... 終了 */
);
}
repeating-linear-gradient を使った斜めストライプを作る方法
CSS スタイル repeating-linear-gradient を使った斜めストライプを作る方法方法を紹介します。
repeating-linear-gradient を実際の使ったストライプの見た目はこんな感じです。
ストライプだけの記述はこちら。
.naname-stripe2 {
background: repeating-linear-gradient(
45deg, /* 角度の指定 */
#fff, /* 色A ... 開始 */
#fff 3px, /* 色A ... 終了 */
#000 3px, /* 色B ... 開始 */
#000 6px /* 色B ... 終了 */
);
}
まとめ
CSS でストライプ（縞模様）を作る方法を紹介しました。
