零弐壱蜂

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

竈門炭治郎とは

「鬼滅の刃」という作品をご存じだろうか。単行本の累計発行部数が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を用いてを行う。

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

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

緑色

全体的な背景色として緑色（#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()で作成した三角形

交差するように配置する

  1. background-sizeで背景画像の幅・高さ（400px）を指定する。
    background-repeatは初期値がrepeatなので繰り返される
  2. 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）
repeating-linear-gradient 1repeating-linear-gradient 2checkered pattern

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

repeating-linear-gradientではなくrepeating-conic-gradientを使う（追記）

repeating-linear-gradientではなくrepeating-conic-gradientを使っても市松模様を作ることができる。

実装内容

実装内容は以下の通り。conic-gradientは角度を指定してグラデーションを作成できるため、市松模様を作成するなら読みやすいコードになる。

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

  /* 実装 */
  width: 100%;
  height: 100%;
  background-image: repeating-conic-gradient(
    var(--color-green) 90deg,
    var(--color-black) 90deg 180deg,
    var(--color-green) 180deg 270deg,
    var(--color-black) 270deg
  );
  background-position:
    0 0,
    calc(var(--square-size) / 2) calc(var(--square-size) / 2);
  background-size: var(--square-size) var(--square-size);
}

解説

conic-gradientは、中心点から放射状に色が変化していくような円錐状のグラデーションを描くことができる。

以下のコードでは、円錐形のグラデーションが4つの象限にわたって緑と黒の市松模様を形成している。

body {
  background-image: repeating-conic-gradient(
    var(--color-green) 90deg,
    var(--color-black) 90deg 180deg,
    var(--color-green) 180deg 270deg,
    var(--color-black) 270deg
  );
}

repeating-conic-gradient指定の解説

  • var(--color-green) 90deg: この指定は、0度から90度までの角度で--color-greenという色になる。
    最初の象限が緑色になる。
  • var(--color-black) 90deg 180deg: 90度から180度の範囲で--color-blackという色になる。
    2つ目の象限が黒色になる。
  • var(--color-green) 180deg 270deg: 180度から270度の範囲で再び--color-greenという色になる。
    3つ目の象限が緑色になる。
  • var(--color-black) 270deg: 270度から360度（0度）までの範囲で--color-blackという色になる。
    4つ目の象限が黒色になる。

各色が90度の範囲になっているため市松模様が形成される。

完成

〆

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

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

参考