CSSでできる！おしゃれな斜めストライプの背景デザイン

minimaru

2023年4月12日 01:14

WEBデザインの仕事をしています。
この仕事をしていると必ず配慮すべき課題の一つとして、ページの読み込みの速さがあります。

そこで、代替不可の要素以外はできる限りデータサイズが小さいCSSでまかなえないかと考えるのですが、背景デザインもそのひとつ。

私が特にお気に入りなのは、斜めストライプ柄で、シンプルな割に、ページの雰囲気をポップに明るく変えてくれるので重宝しています。

設定方法

今回は例として、ページ全体の背景デザインとしてストライプ柄を設定してみます。

先にCSSでスタイル設定を行い、それをHTMLのbodyタグにクラス付けします。

グリーン系

まず、グリーン系の色のサンプルです。
サンプル画像のようにデザインのストライプ柄には濃いラインと薄いラインがありますが、濃いライン用にWEBカラーコード（例：#60B560）を決めて、その色の不透明度を下げることで薄い方の色を作るという仕組みです。

▼ CSS（style.css）

.bg-stripe-green{
  background-color: #60B560;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 3rem 3rem;
}

▼ HTML
ここではページ全体に反映させるため、bodyタグにスタイルを設定します。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>斜めストライプ背景</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body class="bg-stripe-green">
</body>
</html>

ここから先は参考用として、各カラーバリエーションのCSSのみ載せておきます。

.bg-stripe-pgreen{
  background-color: #B9DDD6;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 3rem 3rem;
}

.bg-stripe-ygreen{
　　　　background-color: #C4EB70;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 3rem 3rem;
}

ブルー系

.bg-stripe-blue{
  background-color: #265BA8;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 3rem 3rem;
}

.bg-stripe-pblue{
  background-color: #C8E7FC;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 3rem 3rem;
}

ピンク系

.bg-stripe-pink{
  background-color: #C4326B;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 3rem 3rem;
}

.bg-stripe-babypink{
  background-color: #fadbda;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 3rem 3rem;
}

オレンジ系

.bg-stripe-orange{
  background-color: #FCBA02;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 3rem 3rem;
}

まとめ

いかがでしたでしょうか。

CSS内のカラーコード（#で始まる6桁の番号）や透過（transparent）の割合、線幅（background-size）を変えることでカスタマイズができますので、ぜひ色々といじってみてお好みのストライプ柄を見つけてくださいね。

自分用の備忘録として残しておりますが、この記事を見つけてくれた皆さんにとっても、なにかのお役に立てれば幸いです！

この記事が気に入ったらサポートをしてみませんか？