竈門炭治郎をCSSだけで再現する

2020/12/23

本稿は、ZOZOテクノロジーズ #4 Advent Calendar 2020 23日目の記事です。

竈門炭治郎とは

「鬼滅の刃」という作品をご存知だろうか。単行本の累計発行部数が 1 億 2000 万部を突破し、『劇場版「鬼滅の刃」無限列車編』の興行収入は 2020 年 12 月 20 日時点で 311 億円を突破し、社会現象化している作品である。

その作中でキャラクターたちが着用している羽織は、特徴のある模様が多い。作中に炭焼きをし家族の暮らしを支える「竈門炭治郎」という少年がいる。炭治郎は、いつも「緑と黒の市松模様」の羽織を着用しており、作品を知らない人でも目にしたことが多いだろう。

市松模様は、古来より織模様として存在している。海外では「チェス盤柄」と呼ばれており、グラフィックを扱うソフトウェアの透明部分を表すのにも使われている。我々にとって身近な模様だろう。また、2020 年東京オリンピックでは、随所で市松模様をモチーフにしたデザインが取り入れられていることも記憶に新しい。

今回は、そんな生活に溶け込んだ模様である竈門炭治郎（緑と黒の市松模様）を CSS だけで再現してみる。

完成品

まず完成したものを始めにお見せする。

これが竈門炭治郎だ。

実装方法

概要

実装仕様は下記の通り。

CSS の定義
- background-color
- background-image
- background-position
- background-size

緑と黒の市松模様を JavaScript を利用して動的に組み合わせたり、HTML 要素を複数組み合わせたりするわけではなく、単一の要素（body 要素）に対して背景色を実装するだけで再現をしていく。

実装内容

body {
  /* 変数 */
  --color-green: #58ba97;
  --color-black: #2c2421;
  --square-size: 400px;

  /* 実装 */
  width: 100%;
  height: 100%;
  background-color: var(--color-green);
  background-image: 
    repeating-linear-gradient(45deg, var(--color-black) 25%, transparent 25%, transparent 75%, var(--color-black) 75%, var(--color-black)),
    repeating-linear-gradient(45deg, var(--color-black) 25%, transparent 25%, transparent 75%, var(--color-black) 75%, var(--color-black));
  background-position: 0 0, calc(var(--square-size) / 2) calc(var(--square-size) / 2);
  background-size: var(--square-size) var(--square-size);
}

解説

市松模様は、大きくbackground-colorとbackground-imageを用いてを行う。

おおまかなイメージとしては、三角形の組み合わせで市松模様の黒い四角形を表現する。

◥と◣の組み合わせ、◣と◥の組み合わせを配置する
三角の位置を調整して■になるよう交差させて配置しなおす

緑色

全体的な背景色として緑色（#58ba97）を指定する。

body {
  background-color: #58ba97;
}

後述になるが、黒塗り部分はbackground-imageで再現するため、ここでは緑色の定義のみで完了となる。

黒色と交差

2 つの三角形を生成する

background-imageにはカンマ区切りで複数指定ができる。今回はrepeating-linear-gradient()を用いて作成した三角形を二箇所に指定する。
先述で定義した緑色の上に重ねる形で市松模様の黒色（#2c2421）部分を定義する。

body {
  background-image:
    repeating-linear-gradient(45deg, #2c2421 25%, transparent 25%, transparent 75%, #2c2421 75%, #2c2421),
    repeating-linear-gradient(45deg, #2c2421 25%, transparent 25%, transparent 75%, #2c2421 75%, #2c2421);
}

上記の記述で、下記のような図形ができる。

repeating-linear-gradient 1 — `repeating-linear-gradient()`で作成した三角形

交差するように配置する

background-sizeで背景画像の幅・高さ（400px）を指定する。
background-repeatは初期値がrepeatなので繰り返される
background-positionで 2 つの三角形が交差するように配置をずらして（0 0, 200px 200px）四角形を作成する。
background-sizeが 400px なので、その半分の 200px 位置へ配置する

body {
  background-position: 0 0, 200px 200px;
  background-size: 400px 400px;
}

パターン（1）	パターン（2）	合成後（1）+（2）

上記のように作成した図形を背景に配置して緑と黒の市松模様する。

〆

CSS を極めれば様々なことができるようになる。

何でもできるわけではないが、昨日の自分より確実に強い自分になれる。