こんにちは！最近テレビゲームばっかりやっているフロントエンドエンジニアのイリサワです。
(今はウィッチャー3とPS4リメイク版のクラッシュ・バンディクーをやっています。この間FF9をクリアしたんですけど、ありえないくらい泣いてしまいました…。)

さて今回は、CSSだけで超絶イケてる背景を作る方法を徹底解説します。
いやね、「ソースをコピペするだけでかっこいい背景が実装できるよ、簡単な解説も置いておくね」って感じの親切なサイトはもう結構あるんですよ(筆者もめっちゃくちゃお世話になりました)。なのである程度知識がある方や単にソースを拝借したいだけの方はそっち見た方が断然良いと思うのですが、「なぜそうなるのか？」まで理解したいweb初心者にはちょっぴりハードルが高いかも？な気がしなくもないんですよね。
そんなわけで本記事では、もうほんとタイトルの通り、CSSオンリーで背景パターンを作る方法を、マウンテンゴリラが読んでもわかるくらいに懇切丁寧に解説します。
このサイトに紹介されているような、イルでドープな背景パターンを自力で作れるようになるのがゴールです。

お題：バー●リーのマフラー

はい。こちらがCSSだけで作った手編みのマフラーとソースコードです。今日はみなさんにもこれを編んでもらいます。

See the Pen Burberry by Yuki Irisawa (@yk1979) on CodePen.

(タイトルで一応伏せたのにクラス名がこれでは元も子もない感じである)

世界一わかりやすい解説

background-imageを複数設定する

上から順番にコードを読んでいきましょう。

    background-color: #999;
    background-size: 80px 80px;

ここまではわかりますね。

    background-image:
      linear-gradient(top, rgba(255, 0, 0, 0.5) 3%, rgba(255, 0, 0, 0.5) 3%, transparent 3%, transparent 97%, rgba(255, 0, 0, 0.5) 97%, rgba(255, 0, 0, 0.5) 100%),
      linear-gradient(0deg, rgba(255, 0, 0, 0.5) 3%, rgba(255, 0, 0, 0.5) 3%, transparent 3%, transparent 97%, rgba(255, 0, 0, 0.5) 97%, rgba(255, 0, 0, 0.5) 100%),
      linear-gradient(top, transparent, transparent 35%, rgba(0, 0, 0, 0.5) 35%, rgba(0, 0, 0, 0.5) 41%, rgba(255, 255, 255, 0.5) 41%, rgba(255, 255, 255, 0.5) 47%, rgba(0, 0, 0, 0.5) 47%, rgba(0, 0, 0, 0.5) 53%, rgba(255, 255, 255, 0.5) 53%, rgba(255, 255, 255, 0.5) 59%, rgba(0, 0, 0, 0.5) 59%, rgba(0, 0, 0, 0.5) 65%, transparent 65%, transparent 100%),
      linear-gradient(0deg, transparent, transparent 35%, rgba(0, 0, 0, 0.5) 35%, rgba(0, 0, 0, 0.5) 41%, rgba(255, 255, 255, 0.5) 41%, rgba(255, 255, 255, 0.5) 47%, rgba(0, 0, 0, 0.5) 47%, rgba(0, 0, 0, 0.5) 53%, rgba(255, 255, 255, 0.5) 53%, rgba(255, 255, 255, 0.5) 59%, rgba(0, 0, 0, 0.5) 59%, rgba(0, 0, 0, 0.5) 65%, transparent 65%, transparent 100%);

web初心者、あるいはマウンテンゴリラのあなたは、恐らくここで「？？？」ってなったのではないでしょうか？数字がいっぱいで気持ち悪い！(講師の立場としては「うん」と言ってほしいところ)

では、background-imageがこんな感じだったらどうでしょう？

  background-image:
    url("https://blog.nijibox.jp/wp-content/uploads/creatorsblog//2017/10/cake_l.png"), 　// 背景1のイメージ
    url("https://blog.nijibox.jp/wp-content/uploads/creatorsblog//2017/10/croissant_l.png"), 　// 背景2のイメージ
    url("https://blog.nijibox.jp/wp-content/uploads/creatorsblog//2017/10/macaron_l.png"), 　// 背景3のイメージ
    url("https://blog.nijibox.jp/wp-content/uploads/creatorsblog//2017/10/pancake_l.png"); 　// 背景4のイメージ

だいぶわかりやすくなりました！最初のマフラーのコードも、やってることはこれと同じです。
CSS3より、ひとつの要素に複数の背景をあてることができるようになりましたが、ここではそれを応用して背景に4つの画像を重ねています。こんな風にカンマで区切って記述するだけでOKです。

ここで最初のコードをもう一回見てみると、background-imageが4つの値(linear-gradient)を持っているのがわかります。linear-gradientというのはグラデーションを作る関数なんですけど、やり方次第でボーダーやストライプも作ることができるんですよ〜。

  background-image:
    linear-gradient(top, rgba(255, 0, 0, 0.5) 3%, rgba(255, 0, 0, 0.5) 3%, transparent 3%, transparent 97%, rgba(255, 0, 0, 0.5) 97%, rgba(255, 0, 0, 0.5) 100%),  // 背景1
    linear-gradient(0deg, rgba(255, 0, 0, 0.5) 3%, rgba(255, 0, 0, 0.5) 3%, transparent 3%, transparent 97%, rgba(255, 0, 0, 0.5) 97%, rgba(255, 0, 0, 0.5) 100%),  // 背景2
    linear-gradient(top, transparent, transparent 35%, rgba(0, 0, 0, 0.5) 35%, rgba(0, 0, 0, 0.5) 41%, rgba(255, 255, 255, 0.5) 41%, rgba(255, 255, 255, 0.5) 47%, rgba(0, 0, 0, 0.5) 47%, rgba(0, 0, 0, 0.5) 53%, rgba(255, 255, 255, 0.5) 53%, rgba(255, 255, 255, 0.5) 59%, rgba(0, 0, 0, 0.5) 59%, rgba(0, 0, 0, 0.5) 65%, transparent 65%, transparent 100%),  // 背景3
    linear-gradient(0deg, transparent, transparent 35%, rgba(0, 0, 0, 0.5) 35%, rgba(0, 0, 0, 0.5) 41%, rgba(255, 255, 255, 0.5) 41%, rgba(255, 255, 255, 0.5) 47%, rgba(0, 0, 0, 0.5) 47%, rgba(0, 0, 0, 0.5) 53%, rgba(255, 255, 255, 0.5) 53%, rgba(255, 255, 255, 0.5) 59%, rgba(0, 0, 0, 0.5) 59%, rgba(0, 0, 0, 0.5) 65%, transparent 65%, transparent 100%);  // 背景4

つまり、linear-gradientで作ったボーダーやストライプを、画像の時と同じように重ねて…

こうしてるわけですね〜。あーなんかそう言われてみたら結構簡単じゃん、って思いませんか？？

linear-gradient関数で模様を作る

じゃ次はグラデーションを作る関数を応用して、ボーダーとストライプの模様を作りましょう！まずはこちらをご覧ください。

step1では普通のグラデーションですが、step2ではグラデーションの領域を上半分だけにして、下半分のグラデーションをなくしました。これと同じテクニックで、step3では上半分のグラデーションもなくしてしまいます。step4で上下の比率をいじって、ボーダーのパーツができました！ここから更に角度を変えて、ボーダーの模様が指定の位置に現れるように調整を加えたのがstep5です。この仕組みが理解できちゃえば、もうこんなチンケな記事に頼ることなく好きな柄のマフラーを量産できます。

実際に作ってみましょう

お待ちかねの作り方コーナーです。ここまでくるの長過ぎ、て思ったあなたはきっとマウンテンゴリラではないのですね。

step1　2色のグラデーションを作る

  .canvas {
    background-image:
      linear-gradient(lightblue,white);
  }

linear-gradientの基本形です。始点が水色、終点が白の、2色グラデーションが作れます。
上のコードのwhiteの後ろにカンマで区切って他の色を追加すれば、3色、4色のグラデーションも作れますよ。

step2　下半分のグラデーションをなくす

  .canvas {
    background-image:
      linear-gradient(lightblue, white 50%);
  }

グラデーションの終点であるwhiteの後ろに、50%という値がセットされました。
これはグラデーションの終点の位置を表していて、要素全体を100%として見たときに、0% → 50% が水色から白へのグラデーション として表現されるのです。(step1のように特に指定がない場合は、終点の位置は自動で100%になります)

step3　上半分のグラデーションもなくす

  .canvas {
    background-image:
      linear-gradient(lightblue 50%, white 50%);
  }

今度は始点であるlightblueの後ろにも50%という値が入りました。
グラデーションの始点が50%、終点が50%と、同じ数字が入ってるのでちょっと分かりづらいんですが、さっきと同じように考えるとこれはつまり 50% → 50% が水色から白のグラデーション になっているんです。これだと実質グラデーションにはならないんで、50%の位置で色が切り替わるわけですね。

ここでちょっと補足なんですけど、このstep3のコードは、以下のコードの省略系なんです。

  .canvas {
    background-image:
      linear-gradient(lightblue 0%, lightblue 50%, white 50%, white 100%);
  }

こっちの書き方の方が分かりやすいですね！つまり…

ってこと。
0%, 100% の位置にあたる色の指定がない場合、最初に書かれた値と最後に書かれた値でそれが補完されるんです。

step4　グラデーションの比率を調整（＆アンチエイリアス処理）

じゃあstep3の応用で、最初の3%は水色、あとは白、の要素を作ってみましょう。

  .canvas {
    background-image:
    linear-gradient(lightblue 3%, white 3%);
  }

…なんだか水色と白の境がギザギザしちゃいました。
色と色の境界の値が奇数値だと、こんな感じでジャギーが出ちゃうことがあります。(ブラウザによってはこの現象が回避されていることがあるので、失敗サンプルは画像です。)

このジャギーがなんで出ちゃうのかはちょっとわかんないんですけど(徹底解説するんじゃねーのかよポンコツ、というご指摘、ごもっともすぎて言葉になりません)これは以下のように記述することで回避できます。

  .canvas {
    background-image:
    linear-gradient(lightblue 3%, lightblue 3%, white 3%);
  }

もしくはこう

  .canvas {
    background-image:
    linear-gradient(lightblue 2.9%, white 3%);
  }

step5　仕上げ

最後に角度を調整して、最初と最後の3%の部分が水色になるようにグラデーションの記述を行っていきます。グラデーションの始点を指定する前に角度を表す「90deg」を入れると、グラデーションは横向きになります。(補足あり)

 .canvas {
   background-image:
   linear-gradient(90deg, lightblue 3%, lightblue 3%, white 3%, white 97%, white 97%, lightblue 97%);
 }

ジャギーを出さないための処理も合わせて書いてるのでやや見づらいコードになっていますが、順番に見てくと

…ってことですね。

ここではわかりやすいようにlightblue,whiteという色を使いましたが、whiteをtransparentに変えると、background-colorに別の色を設定して更なるレイヤードを楽しめます。これを何度も地道に繰り返して理想の模様を作ろう！クリエイティブって実はとっても泥臭いんだ！

いろいろなbackground系プロパティを調整して自由自在の柄にアレンジ

background-sizeの値を変えることで、柄の大きさを変えられます、こんな風に。

  background-size: 100px 50px;

background-colorを変えるとこうなる！パチモンのブランド品が量産できます。

  background-color: #dec9a7;

background-positionをいじって模様の表示位置を変えると、また違った表情のチェックに！(ショップ店員みたいな物言いになってしまった)

  background-position: 10px 90px;

まとめ〜君もマフラー職人になれる〜

ここでもう一度最初のマフラーのコードを読んでみると、もう全然難しくないですね！チェックの色や太さを自分好みにアレンジしてオリジナルのパターンを作ったら、気になるあの子に手編みの電子マフラーを贈りましょう！！
今回はlinear-gradientを使ったパターンを紹介しましたが、いずれradial-gradientを使った水玉パターンの作り方とか、今回の記事で触れられなかったrepeating-linear-gradientなんかについても徹底的に書きたいなあ。

マジでお世話になったサイト

8ステップで完成！CSS3で「斜めのストライプ」を作る方法
チェック・ひし型・ドット背景を画像を使わずCSSで表現