コピペで簡単 CSS でストライプを作る方法

コピペで簡単 CSS でストライプを作る方法を紹介します。
例えば、CSS だけでストライプの背景を作りたいときに便利な方法です。

  1. 横ストライプを作る方法
  2. 縦ストライプを作る方法
  3. 斜めストライプを作る方法

横ストライプを作る方法

CSS で横ストライプを作る方法方法を紹介します。
ストライプを作るには CSS セレクタの background-imagelinear-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 でグラデーションを作れる background-imagelinear-gradient を使って、ストライプを表現します。
まずはグラデーションの角度を指定、角度によっては縦ストライプや斜めストライプを作ることもできます。
続いてグラデーションの間隔と色を指定、最後に background-size でサイズを指定して完成です。
サイズの指定次第では、細かいストライプから少し間隔を開けたポップなストライプも作成することができます。

間隔を開けたストライプ

縦ストライプを作る方法

CSS で縦ストライプを作る方法方法を紹介します。
実際の見た目はこんな感じです。

縦ストライプ

ベースの HTML は次の通りです。

<div class="tate-stripe">縦ストライプ</div>

CSS はこちら。

.tate-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(90deg,
#fff 25%, #000 25%, #000 50%, #fff 50%, #fff 75%,#000 75%, #000
);
background-size: 4px 4px;
}

ストライプだけの記述はこちら。

.tate-stripe {
background-image: linear-gradient(90deg,
#fff 25%, #000 25%, #000 50%, #fff 50%, #fff 75%,#000 75%, #000
);
background-size: 4px 4px;
}

斜めストライプを作る方法

CSS で斜めストライプを作る方法方法を紹介します。
実際の見た目はこんな感じです。

斜めストライプ

ベースの HTML は次の通りです。

<div class="naname-stripe">斜めストライプ</div>

CSS はこちら。

.naname-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(-45deg,
#fff 25%, #000 25%, #000 50%, #fff 50%, #fff 75%,#000 75%, #000
);
background-size: 4px 4px;
}

ストライプだけの記述はこちら。

.naname-stripe {
background-image: linear-gradient(-45deg,
#fff 25%, #000 25%, #000 50%, #fff 50%, #fff 75%,#000 75%, #000
);
background-size: 4px 4px;
}

まとめ

コピペで簡単 CSS でストライプを作る方法を紹介しました。

スポンサーリンク

私が続けて読みたい関連記事