サンプル

今回は以下のような「斜めのストライプ」の背景パターンのCSSでの作り方を、8つのステップにわけて解説していきたいと思います。

まず、前準備として以下のようにdiv要素を作っておきます。このdiv要素に対してCSSを指定していきます。

それから、斜めストライプを作成する上で必要なCSSは、「linear-gradient()関数」と「background-sizeプロパティ」となります。事前にご確認ください。

• linear-gradient – CSS | MDN
• background-size – CSS | MDN

ステップ1　ストライプを表示する領域を作る

まずストライプを表示させるための領域を確保します。ここでは以下のように幅、高さ、ボーダーを指定しています。

.div2269 {
  width: 150px;
  height: 150px;
  border: 1px solid #000;
}

ブラウザでの表示結果は以下のようになります。

ステップ2　グラデーションを指定する

ステップ1で確保した領域に対して、linear-gradient()関数を使ってグラデーションをかけます。ストライプは2色のボーダーでできているので、使用したい2色を選んでグラデーションを作ります。

.div2269 {
  width: 150px;
  height: 150px;
  border: 1px solid #000;
  /* 上⇒下への白からピンクに変わっていくグラデーションを指定 */
  background-image: linear-gradient(#fff, #ffc0cb);
}

ブラウザでの表示結果は以下のようになります。

ステップ3　上半分のグラデーションをなくす

白からピンクに変わっていくグラデーションの上半分を白のみで表示させるようにします。linear-gradient()関数の引数に指定した#fffの後にスペースを開けて50%と指定すると、上から50%までの領域は白のみで表示されるようになります。

.div2269 {
  width: 150px;
  height: 150px;
  border: 1px solid #000;
  /* #fffの後にスペースを開けて50%と指定 */
  background-image: linear-gradient(#fff 50%, #ffc0cb);
}

ブラウザでの表示結果は以下のようになります。

ステップ4　下半分のグラデーションをなくす

上半分のグラデーションをなくしたら、今度は下半分をピンクのみで表示させるようにします。linear-gradient()関数の引数「#fff 50%, #ffc0cb」の間に「#ffc0cb 50%」を挿入します。そうすることで2色のボーダーが表示されるようになります。

.div2269 {
  width: 150px;
  height: 150px;
  border: 1px solid #000;
  /* 「#fff 50%, #ffc0cb」の間に「#ffc0cb 50%」を挿入 */
  background-image: linear-gradient(#fff 50%, #ffc0cb 50%, #ffc0cb);
}

ブラウザでの表示結果は以下のようになります。

ステップ5　ボーダーを斜めにする

2色のボーダーが出来上がったところで、今度はその2色のボーダーを斜めに表示させるようにします。ここでは-45度傾けていますが、linear-gradient()関数の引数の一番前に「-45deg」と角度を指定すると、グラデーション（ここではすでにグラデーションではなくなっていますが）を-45度傾けることができます。

.div2269 {
  width: 150px;
  height: 150px;
  border: 1px solid #000;
  /* linear-gradient()関数の引数の一番前に「-45deg」と指定 */
  background-image:
    linear-gradient(-45deg, #fff 50%, #ffc0cb 50%, #ffc0cb);
}

ブラウザでの表示結果は以下のようになります。

ステップ6　ボーダーの領域を細かく分割する

ここのステップは、説明がわかりやすくなるために入れています。「background-sizeプロパテ」ィを使うと背景画像のサイズを指定することができます。ここでは、ひとまず幅50px、高さ50pxで指定し、「150px × 150px」の領域を9分割しています。

.div2269 {
  width: 150px;
  height: 150px;
  border: 1px solid #000;
  background-image:
    linear-gradient(-45deg, #fff 50%, #ffc0cb 50%, #ffc0cb);
  /* 幅50px、高さ50pxで背景画像のサイズを指定 */
  background-size: 50px 50px;
}

ブラウザでの表示結果は以下のようになります。だいぶ斜めストライプっぽくなってきました。

ステップ7　ストライプを作る

最後の難関となります。上記で9分割したそれぞれのパーツを以下のように4つのボーダーが入るようにしていきます。ステップ3とステップ4では半分ずつ色をわけましたが、今度は半分で分けた部分をさらに半分ずつ色をわけるようにします。これを並べる事で斜めのストライプが出来上がります。

こちらもステップ3とステップ4と同じように以下のように「linear-gradient()関数」を使ってボーダーを作っていきます。

.div2269 {
  width: 150px;
  height: 150px;
  border: 1px solid #000;
  /* -45度斜めから25%、50%、75%、100%と
    ボーダーが交互に色違いとなるように指定 */
  background-image: linear-gradient(
    -45deg,
    #fff 25%,
    #ffc0cb 25%, #ffc0cb 50%,
    #fff 50%, #fff 75%,
    #ffc0cb 75%, #ffc0cb
  );
  background-size: 50px 50px;
}

ブラウザでの表示結果は以下のようになります。これで斜めのストライプが出来上がりました。

ステップ8　ストライプのサイズの調整

最後に出来上がったストライプのサイズをbackground-sizeで指定します。ステップ6と同じです。細かく分割すれば、それだけ細いストライプになっていきます。ここでは幅8px、高さ8pxの背景サイズにして、幅150px、高さ150pxの領域に対して約351分割させています。

.div2269 {
  width: 150px;
  height: 150px;
  border: 1px solid #000;
  background-image: linear-gradient(
    -45deg,
    #fff 25%,
    #ffc0cb 25%, #ffc0cb 50%,
    #fff 50%, #fff 75%,
    #ffc0cb 75%, #ffc0cb
  );
  /* 幅8px、高さ8pxで背景画像のサイズを指定 */
  background-size: 8px 8px;
}

ブラウザでの表示結果は以下のようになります。

まとめ

以上で、「斜めのストライプ」の出来上がりです。けっこうlinear-gradient()関数の指定のところが複雑ではありますが、ステップ踏んで見ていくと理解しやすくなると思います。そして一回理解してしまえば、もう問題なくいろんなタイプのストライプを作ることができると思います。

今回はクロスブラウザーは考えずに説明しているので、特にSafariやIEではうまく表示されないと思います。上記でも紹介した以下のサイトを参考に適宜プレフィックスなどをつけて対応してみてください。

• linear-gradient – CSS | MDN
• background-size – CSS | MDN