Zenn
⚔️

炭治郎の模様を壁紙にしたい(CSS編)

2021/01/24に公開
CSS
tech

背景

二次曲線 様の下記の記事に影響されて調べて見ました。

炭次郎の模様を壁紙にしたいゾ！
https://zenn.dev/hyperbola/articles/d62132d83519b8

結論

CSSで下記のコードを貼り付けるとすぐにホームページが炭治郎になります

body {
  background-color: #008080;
  background-image: 
    linear-gradient(45deg,#000000 0%, #000000 25%, transparent 25%, transparent 75%, #000000 75%, #000000 100%),
    linear-gradient(45deg,#000000 0%, #000000 25%, transparent 25%, transparent 75%, #000000 75%, #000000 100%);
  background-position: 0 0, 25px 25px;
  background-repeat: repeat;
  background-size: 50px 50px;
}

調査したこと

方法1:background-repeat

CSSで背景を画像指定した場合に繰り返される仕様になっていて、これでも実装可能でした。
https://www.w3schools.com/cssref/pr_background-repeat.asp

ただ、画像を用意する必要があるため面倒だったのでURL引数を元に画像を生成するサービスを探しました。
https://dummyimage.com/

URLによる画像生成

こんな感じのURLを指定すると、下記のような画像が生成されるようです。
https://dummyimage.com/300x150/177d48/000000.png&text=test

dummyimagetest

しかし、これだと単色でテキスト入りの画像しか生成できず、２色の画像を生成することは出来ません…

方法2:repeating-linear-gradient

CSSに繰り返しの線形グラデーションを生成する事ができそうだったので、こちらを利用してみます。

repeating-linear-gradient
https://www.w3schools.com/cssref/func_repeating-linear-gradient.asp

タイル状に表示するやり方があったので一旦、そちらを参考に色だけそれっぽくしました。

body {
    background-color: #008080;
    background-image: 
      linear-gradient(45deg,#000000 0%, #000000 25%, transparent 25%, transparent 75%, #000000 75%, #000000 100%),
      linear-gradient(45deg,#000000 0%, #000000 25%, transparent 25%, transparent 75%, #000000 75%, #000000 100%);
    background-position: 0 0, 25px 25px;
    background-size: 50px 50px;
}

参考：https://www.nxworld.net/css-gradient-pattern.html

ただ、これだと理解が不足している感じがしたので、どうやってタイル化しているかを調べます。

repeating-linear-gradient:色

まず、repeating-linear-gradientでは大きくは下記の点を指定できます。

  1. グラデーションを開始する場所/角度
  2. グラデーションの色と その色が何%を占めるか
  3. それらは何度繰り返されるか？

今回のコードを確認すると、linear-gradient(45deg,#000000 0%, #000000 25%, transparent 25%, transparent 75%, #000000 75%, #000000 100%)という部分だけ見ていきましょう。

  1. グラデーションを開始する場所/角度 → 45deg
  2. グラデーションの色と その色が何%を占めるか → #000000 0%, #000000 25%, transparent 25%, transparent 75%, #000000 75%, #000000 100%
  3. それらは何度繰り返されるか？ →これは最後の色の%で指定でき、今回は100%なので繰り返さないということになります。

※transparentは透明色です。

このグラデーションだけを実行すると下記のようになります。

※私の切り取り方が下手で上に黒い線などが出ていますが無視してください…

これを見ると45℃の角度で 黒25%→透明50%→黒25% と別れて表示されているのがわかります。

repeating-linear-gradient:繰り返し

最終結果を見ると2つの同じrepeating-linear-gradientが設定されています。
これは繰り返して同じ背景色を配置するということになります。
なんの設定も無しに設定してしまうと、同一の場所に表示されてしまうので意味はないのですが、今回はbackground-position: 0 0, 25px 25px;という設定がされています。
1つ目のbackgroundは 左から0px/上から0pxの位置に、2つ目のbackgroundは 左から0px/上から0pxに配置されることになります。

その結果このように表示されることになります。

background-repeat:繰り返し

最後にbackground-repeatの設定です、
これは背景画像を繰り返す設定で繰り返し方を指定することが出来ます。
さらに、今回は画像サイズがbackground-size: 50px 50px;というように50pxの正方形を指定してあります。
その結果それぞれの三角形が重なり合って、正方形になります。

Discussion