1. TOP
  2. リファレンス
  3. CSSで背景を斜めのストライプにする方法!サンプルコード紹介

CSSで背景を斜めのストライプにする方法!サンプルコード紹介

背景に斜めのストライプを適用するには、初めにまっすぐのボーダーを適用し、それを斜めに傾けるという手順で行うとわかりやすいです。

この方法を使えば、下記のようなストライプを適用することができます。

 <div id="demo_122"></div>
#demo_122 {
   background:repeating-linear-gradient(45deg, tomato 0, tomato 10px, white 10px, white 20px);
   height: 300px;
 }

背景にボーダーを引く方法

背景にボーダーを引くには、CSSのrepeating-linear-gradient関数を使います。repeating-linear-gradientを使うと、指定された色の組み合わせを繰り返し表示することができます。

repeating-linear-gradientは、背景画像のプロパティであるbackground-imageなどに適用します。ショートハンドで書く場合は、backgroundに適用しても構いません。

バックラウンドやショートハンドについては下記を参考にしてください。

下記のように記述します。

background-image:repeating-linear-gradient (ストライプの角度, 色1 始点, 色1 [,色2 始点、色2 終点, 色3…] ); 

/* 下記でもOK */
background:repeating-linear-gradient (ストライプの角度, 色1 始点, 色1 [,色2 始点、色2 終点, 色3…] ); 

一つ目の値にはストライプの角度を指定し、そのあとは「色の始点と終点」を続けて指定していきます。

ちなみに色は、カンマで区切ればいくつでも指定することができます。2つの色を指定すればその2色を繰り返しますし、3色ならそれを繰り返します。

簡単な例を見てみましょう。

<div id="demo_121"></div>
#demo_121 {
   background-image:repeating-linear-gradient(to bottom, tomato 0, tomato 10px, white 10px, white 20px);
   height: 300px;
 }

オレンジと白の2色を指定しているので、2色が繰り返されるボーダーが引けました。

さらに使い方など詳しく解説していきます。

repeating-linear-gradientの使い方

repeating-linear-gradientの値は、以下の二つを指定する必要があります。

  • ボーダーの角度
  • 色の始点と終点

ボーダーの角度

角度はキーワードで指定する方法や、数値で角度を指定する方法もあります。

角度をキーワードで指定

キーワードで指定する場合、toに続けて「top / bottom / left / right」の4方向への指定を行います。省略が可能で、その場合は初期値の「to bottom」になります。

ボーダーの角度

  • to top
    上へ向かう
  • to right
    右へ向かう
  • こo bottom
    下へ向かう。 ←初期値です。
  • こto left
    左へ向かう

またキーワードを2つ組み合わせるこのによって、斜め方向への指定も可能です。

  • to top right…右上角へ向かう
  • to bottom right…右下角へ向かう
  • to bottom left…左下角へ向かう
  • to top left…左上角へ向かう

角度を数値で指定

degという単位を使って、角度を数値で指定します。例えば30度の傾きにしたい場合は、30degという具合に指定します。

色の始点と終点

色の始点と終点を指定します。「色」につづけて半角スペースで区切って「位置」を指定します。

background-image:repeating-linear-gradient(to bottom, tomato 0, tomato 10px, white 10px, white 20px);

例えば tomato 0, tomato 10pxとした場合、「tomato 0」が開始時の色と位置、「tomato 10px」が終了時の色と位置です。

開始位置の色がオレンジで基準点からの距離が0、終了位置がオレンジ色で基準点からの距離が10pxということになります。

つまり、上からオレンジ色の10pxの線ですね。

続けて2色目を指定します。white 10px, white 20pxとすることで、基準点からの距離が10pxの場所を開始位置、基準点からの距離が20pxの場所を終了位置とした線を引いてみましょう。

これで、基準点からの距離が10pxのところから10pxの白い線が引かれます。

2色を設定したので、自動的にオレンジと白が繰り返されボーダー模様になります。

<div id="demo_121"></div>
#demo_121 {
   background-image:repeating-linear-gradient(to bottom, tomato 0, tomato 10px, white 10px, white 20px);
   height: 300px;
 }

%での指定もできる

%で指定することも出来ます。

値は始点を0%、終点を100%とした割合となります。例えば50%に設定すれば、角度が横方向の場合は横に半分、縦方向の場合は縦に半分になります。

<div id="demo_124">縦に半分</div>
 <br>
 <div id="demo_124-2">横に半分</div>
 <br>
 #demo_124 {
   background:repeating-linear-gradient(to bottom, tomato 0, tomato 50%, royalblue 50%, royalblue 100%);
   height: 300px;
 }
 #demo_124-2 {
   background:repeating-linear-gradient(to right, tomato 0, tomato 50%, royalblue 50%, royalblue 100%);
    height: 300px;
 }
 
縦に半分

横に半分

色はカラーコードやカラーネームで指定できるほか、「transparent」を使うこともできます。「transparent」を設定すると透明になり、下の要素の色が透けるようになります。

斜めに傾ける

まっすぐのボーダーをが作成できたので、あとは斜めに傾ければストライプの完成です。

試しに45度に傾けてみましょう。

 <div id="demo_122"></div>
#demo_122 {
   background:repeating-linear-gradient(45deg, tomato 0, tomato 10px, white 10px, white 20px);
   height: 300px;
 }

きれいなストライプが完成しました。

各ブラウザ対応済み

repeating-linear-gradientの各ブラウザの対応状況ですが、ほとんどのブラウザで対応されています。

Image

緑が対応ずみ、赤が非対応を表します。 (参照:https://caniuse.com/#search=repeating-linear-gradient)

opera miniのユーザーはかなり少ないので、問題なく使うことが出来ると考えて良いでしょう。

応用編

repeating-linear-gradientを使えば、ストライプだけでなく様々な模様を表現できます。応用編としていくつか紹介します。

5色ストライプ

色は何色でも追加できるので、5色のストライプなども表現できます。

<div id="demo_126"></div>
 #demo_126 {
   background:repeating-linear-gradient(45deg, tomato 0, tomato 10px, gold 10px, gold 20px, darkcyan 20px, darkcyan 30px, darkorange 30px, darkorange 40px, pink 40px, pink 50px);
   /*   以下装飾 */
   height: 300px;
 }

幅が違うストライプ

幅を変えることも出来るので、下記のようなデザインもCSSだけで表現することが出来ます。

<div id="demo_127"></div>
 #demo_127 {
   background:repeating-linear-gradient(45deg, tomato 0, tomato 10px, gold 10px, gold 50px, darkcyan 50px, darkcyan 60px, darkorange 60px, darkorange 110px, pink 110px, pink 120px);
   /*   以下装飾 */
   height: 300px;
 }

上級編 チェック柄をつくってみよう

background-imageは複数指定することが出来ます。カンマ区切りで2つ目、3つ目と指定することが出来ます。

repeating-linear-gradientも例外ではなく、複数のボーダーを重ねることが出来ます。複数指定する場合は下記のように書きます。

background-image:repeating-linear-gradient(1つめの指定), repeating-linear-gradient(2つめの指定);

これを応用すればチェック柄などの背景を作ることも出来ます。

<div id="demo_128"></div>
 #demo_128 {
   background-image:repeating-linear-gradient(to bottom,  rgba(255,107,100,0.5) 0, rgba(255,107,100,0.5) 10px, transparent 10px, transparent 20px),
     repeating-linear-gradient(to right, rgba(255,107,100,0.5) 0, rgba(255,107,100,0.5) 10px, transparent 10px, transparent 20px);
   /*   以下装飾 */
   height: 300px;
 }
 

上記の例は、縦のストライプと横のボーダーを重ねているだけです。ポイントとしては、

  • 色のついていない部分はtransparentを設定して、下のボーダーが透けるようにする
  • rgba(255,107,100,0.5)を使って、色を透過させてチェックの重なり感をだしている

という点です。

さらに、片方に45度の傾き、もう片方に-45度の傾きをつけると、斜めのチェック柄を作ることも出来ます。

<div id="demo_129"></div>
 #demo_129 {
   background-image:repeating-linear-gradient(45deg,  rgba(255,107,100,0.5) 0, rgba(255,107,100,0.5) 10px, transparent 10px, transparent 20px),
     repeating-linear-gradient(-45deg,  rgba(255,107,100,0.5) 0, rgba(255,107,100,0.5) 10px, transparent 10px, transparent 20px);
   /*   以下装飾 */
   height: 300px;
 }

アイディア次第でいろんな柄を作ることが出来ますね。

まとめ

  • 背景に斜めのストライプを適用するには、まっすぐのボーダーを適用し、それを斜めに傾ける
  • 背景にボーダーを引くには、CSSのrepeating-linear-gradient関数を使う
  • repeating-linear-gradientには、ボーダーの角度と、色の始点と終点を指定する
  • 各ブラウザ対応済みなので問題なく使える
  • background-imageは複数指定することが出来るので、応用すれば5色やチェック柄なども表現できる