CSS で背景にストライプ柄を設定する方法【縦・横・斜めの縞模様】

当ブログのヘッダーに採用しているストライプ柄は、画像ではなく CSS で表現しています。

わざわざ画像を用意して background-image: URL() で指定しなくても、CSS の記述だけでストライプ柄は表現できます。利用するのはグラデーションの適用に使われる関数 linear-gradient です。

background-image: linear-gradient()

通常は無段階のグラデーション変化を表するのに用いられますが、記述方法を変えるだけでストライプ柄が表現できるようになります。

プログラム実装例

.stripe {
  background-image: linear-gradient(
    0deg, /* 回転する角度 */
    #595959 12%, /* 1色目が終わる位置 */
    #444444 12%, /* 2色目の開始位置 */
    #444444 36%, /* 2色目が終わる位置 */
    #5a5a5a 36%, /* 3色目の開始位置 */
    #5a5a5a 64%, /* 3色目が終わる位置 */
    #6a6a6a 64%, /* 4色目の開始位置 */
    #6a6a6a 77%, /* 4色目が終わる位置 */
    #505050 77%, /* 5色目の開始位置 */
    #505050 100% /* 5色目が終わる位置 */
  );
  background-size: 100% 100%; /* 背景のサイズ */
}

ポイント

background-size はストライプ柄を繰り返す場合の単位サイズを指定するものです。linear-gradient 関数内は動的にサイズが変えられるパーセントで表記して、background-size は必要に応じて px 等の固定サイズで指定するのが良いです。

上記記述方法であれば IE11 を含むモダンブラウザに対応しています。もし非対応ブラウザを考慮するなら background-color プロパティで単色の背景色を指定すると良いです。

ストライプ柄サンプル

横ストライプ／２色ボーダー柄

.stripe1 {
  background-image: linear-gradient(
    0deg,
    #a4d3e4 50%,
    #efefef 50%, #efefef 100%
  );
  background-size: 100% 30px;
}

横ストライプ／３色ボーダー柄

.stripe2 {
  background-image: linear-gradient(
    0deg,
    #F4EDD8 33.33%,
    #D3CF9C 33.33%, #D3CF9C 66.66%,
    #A8C9CB 66.66%, #A8C9CB 100%
  );
  background-size: 100% 90px;
}

横ストライプ／応用

.stripe3 {
  background-image: linear-gradient(
    0deg,
    #708AA0 13%,
    #9ABEDC 13%, #9ABEDC 24%,
    #5C7183 24%, #5C7183 32%,
    #647B8F 32%, #647B8F 53%,
    #82A0BA 53%, #82A0BA 69%,
    #5E7486 69%, #5E7486 83%,
    #5E7486 83%, #5E7486 90%,
    #576B7C 90%, #576B7C 100%
  );
  background-size: 100% auto;
}

縦ストライプ／２色

.stripe4 {
  background-image: linear-gradient(
    90deg,
    #ffffff 70%,
    #fb5b5b 70%, #fb5b5b 100%
  );
  background-size: 40px 10px;
}

縦ストライプ／応用編

.stripe5 {
  background-image: linear-gradient(
    90deg, 
    #ffffff 10%,
    #EDB52C 10%, #EDB52C 13%,
    #ffffff 13%, #ffffff 22%,
    #EA7264 22%, #EA7264 25%,
    #ffffff 25%, #ffffff 35%,
    #EDB52C 35%, #EDB52C 38%,
    #ffffff 38%, #ffffff 48%,
    #28715E 48%, #28715E 51%,
    #ffffff 51%, #ffffff 61%,
    #D3B27F 61%, #D3B27F 64%,
    #ffffff 64%, #ffffff 74%,
    #F9B4AD 74%, #F9B4AD 77%,
    #ffffff 77%, #ffffff 87%,
    #899764 87%, #899764 90%,
    #ffffff 90%, #ffffff 100%
  );
  background-size: 100% 90px;
}

パーセント指定の場合、適用させるタグのサイズによっては色の境界線がにじみます。

斜めストライプ

.stripe6 {
  background-image: linear-gradient(
    45deg, 
    #ffffff 25%,
    #c7dc8f 25%, #c7dc8f 50%,
    #ffffff 50%, #ffffff 75%,
    #c7dc8f 75%, #c7dc8f 100%
  );
  background-size: 40px 40px;
}

縦横ストライプ重ね

.stripe7 {
  background-image: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.3) 15%, rgba(255, 0, 0, 0.3) 15%,
    rgba(255, 0, 0, 0.3) 25%, rgba(255, 255, 255, 0.3) 25%,
    rgba(255, 255, 255, 0.3) 40%, rgba(0, 0, 255, 0.3) 40%,
    rgba(0, 0, 255, 0.3) 55%, rgba(255, 255, 255, 0.3) 55%,
    rgba(255, 255, 255, 0.3) 100% ),
    linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.3) 15%, rgba(255, 0, 0, 0.3) 15%,
    rgba(255, 0, 0, 0.3) 25%, rgba(255, 255, 255, 0.3) 25%,
    rgba(255, 255, 255, 0.3) 40%, rgba(0, 0, 255, 0.3) 40%,
    rgba(0, 0, 255, 0.3) 55%, rgba(255, 255, 255, 0.3) 55%,
    rgba(255, 255, 255, 0.3) 100%
  );
  background-size: 60px 60px;
}

カラー指定を rgba で設定して透過カラーにしておくと、背景を重ねられます。 background-image のプロパティ値はカンマ区切りで複数設定できるので、横の背景と 90° 回転させた縦の背景を重ねて表現しています。

ある程度の基礎が分かればいくらでも応用が利くので、ぜひ試してみてください。