CSS ストライプの作り方
最終更新日 - 公開日 2017.05.14
by
CSS でストライプ（縞模様）を作る方法を紹介します。
例えば、画像を使わずにストライプ（縞模様）を作りたいときに便利な方法です。
linear-gradient を使った方法
CSS でストライプを表現するにはセレクタ background-image の linear-gradient または repeating-linear-gradient を使用します。まずは linear-gradient を使用した方法を紹介します。
CSS スタイル linear-gradient は、本来グラデーションを表現するために使用するスタイルです。
今回はこれを応用することでストライプの表示を実現しています。
linear-gradient の横ストライプ作成方法
CSS スタイル linear-gradient を使った横ストライプを作る方法を紹介します。実際に linear-gradient を使った見た目はこんな感じです。
ベース HTML は次の通りです。
<div class="yoko-stripe">横ストライプ</div>CSS はこちら。
.yoko-stripe {
background-image: linear-gradient(0deg,
#fff 25%, #e9cff7 25%, #e9cff7 50%, #fff 50%, #fff 75%,#e9cff7 75%, #e9cff7
);
background-size: 40px 40px;
}
まずはグラデーションの角度を指定、角度によっては縦ストライプや斜めストライプを作ることもできます。
続いてグラデーションの間隔と色を指定、最後に background-size でサイズを指定して完成です。
例えば、間隔の指定次第で、次のような間隔を開けたストライプの表現が可能です。
linear-gradient の縦ストライプ作成方法
CSS スタイル linear-gradient を使った縦ストライプを作る方法を紹介します。
実際の見た目はこんな感じです。
ストライプだけの記述はこちら。
.tate-stripe {
background-image: linear-gradient(90deg,
#fff 25%, #e9cff7 25%, #e9cff7 50%, #fff 50%, #fff 75%,#e9cff7 75%, #e9cff7
);
background-size: 120px 120px;
}
linear-gradient のストライプ作成方法
CSS スタイル linear-gradient を使った斜めストライプを作る方法を紹介します。
実際の見た目はこんな感じです。
ストライプだけの記述はこちら。
.naname-stripe {
background-image: linear-gradient(-45deg,
#fff 25%, #e9cff7 25%, #e9cff7 50%, #fff 50%, #fff 75%,#e9cff7 75%, #e9cff7
);
background-size: 120px 120px;
}
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 でストライプ（縞模様）を作る方法を紹介しました。
