鬼滅の刃の影響で、和柄のデザインが幅広い世代（一部の界隈？）で人気のようです。
中でも、主人公「竈門炭治郎かまどたんじろう」が着用する羽織の市松模様は特に有名で、そのデザインは視覚的にもインパクト大です。
この市松模様は古くからある伝統的なデザインですが、鬼滅の刃によって再び脚光を浴びることとなりました。

今日は、この竈門炭治郎の市松模様をCSSを使って再現します。

サンプルを見る

CSSで竈門炭治郎の市松模様バックグラウンドを作る

今回はrepeating-conic-gradientの使い方を紹介します。
これを用いることで簡単にパターンを作ることが可能です。

HTMLサンプル：

<div class="tanjiro-background"></div>

CSSサンプル：

.tanjiro-background {
	width: 100%;
	height: 100vh;
	background-size: 150px 150px;
	background-repeat: repeat;
	background-image:
		repeating-conic-gradient(from 0deg,
		#0d090a 0deg 90deg,
		#51b896 90deg 180deg
	);
	background-position: center;
}

解説

このコードではrepeating-conic-gradientを使って市松模様を再現しています。
CSSグラデーションの特性を活かして、交互に色を切り替えることで、繰り返しパターンを生成しています。

  • 背景色：黒色（#0d090a）と緑色（#51b896）で構成し、炭治郎の羽織の柄を再現。
  • 背景サイズ：background-size: 150px 150px;で、市松模様の1つのブロックのサイズを指定しています。
  • 背景位置：background-position: center;で背景を中央に配置していますが、不要であればこれは削除してもOKです。

市松模様をアレンジして、竈門禰豆子や他のキャラクターの柄も再現することができます。
色を変更するだけで、さまざまな和柄デザインが簡単に作れるので、ぜひ挑戦してみてください。

ちなみに。
オンズの『CSS背景パターン作成ツール』を使うと簡単に市松模様を生成できます。

CSS背景パターン作成ツール