最終更新日 2021.09.5
CSS

鬼滅の刃の和柄をCSSで表現！竈門家は市松模様のカラーパターンが豊富

鬼滅の刃の影響で和柄がスゴい人気！子供はもちろんご年配の方も鬼滅柄のアイテムを持たれてるほどですしね（笑）。

主人公の竈門炭治郎の羽織の市松模様もわかりやすくてとてもインパクトのあるデザインです。市松模様自体は昔からありますがここへきて一気に脚光を浴びた感じです。

今回はそんな竈門炭治郎の市松模様をCSSで表現してみます。さらによく見ると竈門家はみんなカラー違いで市松模様を着用しています。ひとりを除いては…

目次 [閉じる]

竈門炭治郎の市松模様
竈門禰豆子の市松模様
竈門炭十郎の市松模様
竈門葵枝の市松模様
竈門竹雄の市松模様
竈門花子の市松模様
竈門茂の市松模様
竈門六太の着物柄
竈門炭治郎の市松模様を使ってみよう（おまけ）

竈門炭治郎の市松模様

鬼滅の刃の主人公で竈門家の長男の炭治郎（たんじろう）は羽織が特徴的な市松模様です。

tanjiro.html

            
                <!DOCTYPE html>
                <html>
                <head>
                <meta charset="UTF-8">
                <title>竈門炭治郎の柄</title>
                <style>
                * {
                  padding: 0;
                  margin: 0;
                  box-sizing: border-box
                }
                 
                .ichimatsu {
                  width: 100%;
                  height: 100vh;
                  background: linear-gradient(45deg, #0d090a 25%, transparent 25%) 0 0/100px 100px, linear-gradient(45deg, transparent 75%, #0d090a 75%) 50px 50px/100px 100px, linear-gradient(45deg, #0d090a 25%, transparent 25%) 50px 50px/100px 100px, linear-gradient(45deg, transparent 75%, #0d090a 75%) 100px 100px/100px 100px, #51b896
                }
                </style>
                </head>
                <body>
                  <div class="ichimatsu"></div>
                </body>
                </html>

これを表示すると…

竈門禰豆子の市松模様

竈門家の長女で鬼舞辻無惨に鬼にされた禰豆子（ねずこ）は着物の麻の葉文様が人気です。でも今回は帯の市松模様をご紹介。

nezuko.html

            
                <!DOCTYPE html>
                <html>
                <head>
                <meta charset="UTF-8">
                <title>竈門禰豆子の柄</title>
                <style>
                * {
                  padding: 0;
                  margin: 0;
                  box-sizing: border-box
                }
                 
                .ichimatsu {
                  width: 100%;
                  height: 100vh;
                  background: linear-gradient(45deg, #9f2849 25%, transparent 25%) 0 0/100px 100px, linear-gradient(45deg, transparent 75%, #9f2849 75%) 50px 50px/100px 100px, linear-gradient(45deg, #9f2849 25%, transparent 25%) 50px 50px/100px 100px, linear-gradient(45deg, transparent 75%, #9f2849 75%) 100px 100px/100px 100px, #fef2f2
                }
                </style>
                </head>
                <body>
                  <div class="ichimatsu"></div>
                </body>
                </html>

これを表示すると…

竈門炭十郎の市松模様

炭治郎と禰豆子の父親の炭十郎（たんじゅうろう）は着物の羽織が市松模様ですね。

tanjuro.html

            
                <!DOCTYPE html>
                <html>
                <head>
                <meta charset="UTF-8">
                <title>竈門炭十郎の柄</title>
                <style>
                * {
                  padding: 0;
                  margin: 0;
                  box-sizing: border-box
                }
                 
                .ichimatsu {
                  width: 100%;
                  height: 100vh;
                  background: linear-gradient(45deg, #171b1a 25%, transparent 25%) 0 0/100px 100px, linear-gradient(45deg, transparent 75%, #171b1a 75%) 50px 50px/100px 100px, linear-gradient(45deg, #171b1a 25%, transparent 25%) 50px 50px/100px 100px, linear-gradient(45deg, transparent 75%, #171b1a 75%) 100px 100px/100px 100px, #e56c00
                }
                </style>
                </head>
                <body>
                  <div class="ichimatsu"></div>
                </body>
                </html>

これを表示すると…

竈門葵枝の市松模様

炭治郎と禰豆子の母親の葵枝（きえ）は着物が市松模様です。

kie.html

            
                <!DOCTYPE html>
                <html>
                <head>
                <meta charset="UTF-8">
                <title>竈門葵枝の柄</title>
                <style>
                * {
                  padding: 0;
                  margin: 0;
                  box-sizing: border-box
                }
                 
                .ichimatsu {
                  width: 100%;
                  height: 100vh;
                  background: linear-gradient(45deg, #744f85 25%, transparent 25%) 0 0/100px 100px, linear-gradient(45deg, transparent 75%, #744f85 75%) 50px 50px/100px 100px, linear-gradient(45deg, #744f85 25%, transparent 25%) 50px 50px/100px 100px, linear-gradient(45deg, transparent 75%, #744f85 75%) 100px 100px/100px 100px, #ecded8
                }
                </style>
                </head>
                <body>
                  <div class="ichimatsu"></div>
                </body>
                </html>

これを表示すると…

竈門竹雄の市松模様

竈門家の次男の竹雄（たけお）はマフラーが市松模様。炭治郎によく似てます（笑）。

takeo.html

            
                <!DOCTYPE html>
                <html>
                <head>
                <meta charset="UTF-8">
                <title>竈門竹雄の柄</title>
                <style>
                * {
                  padding: 0;
                  margin: 0;
                  box-sizing: border-box
                }
                 
                .ichimatsu {
                  width: 100%;
                  height: 100vh;
                  background: linear-gradient(45deg, #100f0a 25%, transparent 25%) 0 0/100px 100px, linear-gradient(45deg, transparent 75%, #100f0a 75%) 50px 50px/100px 100px, linear-gradient(45deg, #100f0a 25%, transparent 25%) 50px 50px/100px 100px, linear-gradient(45deg, transparent 75%, #100f0a 75%) 100px 100px/100px 100px, #5cbbb4
                }
                </style>
                </head>
                <body>
                  <div class="ichimatsu"></div>
                </body>
                </html>

これを表示すると…

竈門花子の市松模様

竈門家の次女の花子（はなこ）は羽織のポケットが市松模様になってます。

hanako.html

            
                <!DOCTYPE html>
                <html>
                <head>
                <meta charset="UTF-8">
                <title>竈門花子の柄</title>
                <style>
                * {
                  padding: 0;
                  margin: 0;
                  box-sizing: border-box
                }
                 
                .ichimatsu {
                  width: 100%;
                  height: 100vh;
                  background: linear-gradient(45deg, #b74274 25%, transparent 25%) 0 0/100px 100px, linear-gradient(45deg, transparent 75%, #b74274 75%) 50px 50px/100px 100px, linear-gradient(45deg, #b74274 25%, transparent 25%) 50px 50px/100px 100px, linear-gradient(45deg, transparent 75%, #b74274 75%) 100px 100px/100px 100px, #ffe9f1
                }
                </style>
                </head>
                <body>
                  <div class="ichimatsu"></div>
                </body>
                </html>

これを表示すると…

竈門茂の市松模様

竈門家の三男の茂（しげる）は着物が市松模様です。

shigeru.html

            
                <!DOCTYPE html>
                <html>
                <head>
                <meta charset="UTF-8">
                <title>竈門茂の柄</title>
                <style>
                * {
                  padding: 0;
                  margin: 0;
                  box-sizing: border-box
                }
                 
                .ichimatsu {
                  width: 100%;
                  height: 100vh;
                  background: linear-gradient(45deg, #2c1f27 25%, transparent 25%) 0 0/100px 100px, linear-gradient(45deg, transparent 75%, #2c1f27 75%) 50px 50px/100px 100px, linear-gradient(45deg, #2c1f27 25%, transparent 25%) 50px 50px/100px 100px, linear-gradient(45deg, transparent 75%, #2c1f27 75%) 100px 100px/100px 100px, #d7d1a1
                }
                </style>
                </head>
                <body>
                  <div class="ichimatsu"></div>
                </body>
                </html>

これを表示すると…

竈門六太の着物柄

竈門家の四男の六太（ろくた）ですが、唯一、竈門家で市松模様がありません。まだ小さいからですかね、市松模様ではないけどよく似た柄です。

rokuta.html

            
                <!DOCTYPE html>
                <html>
                <head>
                <meta charset="UTF-8">
                <title>竈門六太の柄</title>
                <style>
                * {
                  padding: 0;
                  margin: 0;
                  box-sizing: border-box
                }
                 
                .ichimatsu {
                  width: 100%;
                  height: 100vh;
                  background: linear-gradient(to right, #f7f9f7 25%, #2086b7 25%) 0 0/ 100px 25px, linear-gradient(to right, #2086b7 0, #2086b7 0) 0 25px/ 100px 25px, linear-gradient(to right, #2086b7 50%, #f7f9f7 50%, #f7f9f7 75%, #2086b7 75%) 0 50px/ 100px 25px, linear-gradient(to right, #2086b7 0, #2086b7 0) 0 75px/ 100px 25px, linear-gradient(to right, #f7f9f7 25%, #2086b7 25%) 0 100px/ 100px 25px, linear-gradient(to right, #2086b7 0, #2086b7 0) 0 125px/ 100px 25px, linear-gradient(to right, #2086b7 50%, #f7f9f7 50%, #f7f9f7 75%, #2086b7 75%) 0 150px/ 100px 25px, linear-gradient(to right, #2086b7 0, #2086b7 0) 0 175px/ 100px 25px, linear-gradient(to right, #f7f9f7 25%, #2086b7 25%) 0 200px/ 100px 25px, linear-gradient(to right, #2086b7 0, #2086b7 0) 0 225px/ 100px 25px, linear-gradient(to right, #2086b7 50%, #f7f9f7 50%, #f7f9f7 75%, #2086b7 75%) 0 250px/ 100px 25px, linear-gradient(to right, #2086b7 0, #2086b7 0) 0 275px/ 100px 25px, linear-gradient(to right, #f7f9f7 25%, #2086b7 25%) 0 300px/ 100px 25px, linear-gradient(to right, #2086b7 0, #2086b7 0) 0 325px/ 100px 25px, linear-gradient(to right, #2086b7 50%, #f7f9f7 50%, #f7f9f7 75%, #2086b7 75%) 0 350px/ 100px 25px, linear-gradient(to right, #2086b7 0, #2086b7 0) 0 375px/ 100px 25px, #000;
                  background-repeat: repeat-x
                }
                </style>
                </head>
                <body>
                  <div class="ichimatsu"></div>
                </body>
                </html>

これを表示すると…

竈門炭治郎の市松模様を使ってみよう（おまけ）

それでは竈門炭治郎の柄を使ってちょこっとデザインしてみましたのでご覧ください。

おもに見出しのデザインになりますね。これはほんの一例なのでこの柄を使ってあんな事やこんな事を色々と試して頂けると嬉しいです。自分の思うデザインを自分の力でやってみる事が大事！

幸せが壊れるときはいつも、血の匂いがする

まずは市松模様を左部分に縦長の長方形として配置する見出しデザインです。こちらのタグはすぐ下のコードです。

tanjiro01.html

            
                <!DOCTYPE html>
                <html>
                <head>
                <meta charset="UTF-8">
                <title>炭治郎柄の見出しデザインその一</title>
                <style>
                * {
                  padding: 0;
                  margin: 0;
                  box-sizing: border-box
                }
                 
                html {
                  font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
                  font-size: 62.5%;
                  letter-spacing: 0.09em;
                  font-feature-settings: "palt"
                }
                 
                .tanjiro01 {
                  font-size: 2rem;
                  font-weight: 600;
                  padding-left: 30px;
                  position: relative
                }
                 
                .tanjiro01::before {
                  content: "";
                  width: 12px;
                  height: 60px;
                  margin: auto;
                  background: linear-gradient(45deg, #0d090a 25%, transparent 25%) 0 0/12px 12px, linear-gradient(45deg, transparent 75%, #0d090a 75%) 6px 6px/12px 12px, linear-gradient(45deg, #0d090a 25%, transparent 25%) 6px 6px/12px 12px, linear-gradient(45deg, transparent 75%, #0d090a 75%) 12px 12px/12px 12px, #51b896;
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0
                }
                </style>
                </head>
                <body>
                  <h1 class="tanjiro01">幸せが壊れるときはいつも、血の匂いがする</h1>
                </body>
                </html>

今ここで倒すんだ！たとえ相討ちになったとしても！

次は市松模様の横長の長方形を上下に配置した見出しデザインです。こちらのタグはすぐ下のコードです。

tanjiro02.html

            
                <!DOCTYPE html>
                <html>
                <head>
                <meta charset="UTF-8">
                <title>炭治郎柄の見出しデザインその二</title>
                <style>
                * {
                  padding: 0;
                  margin: 0;
                  box-sizing: border-box
                }
                 
                html {
                  font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
                  font-size: 62.5%;
                  letter-spacing: 0.09em;
                  font-feature-settings: "palt"
                }
                 
                .tanjiro02 {
                  font-size: 2rem;
                  font-weight: 600;
                  padding: 30px 20px;
                  position: relative
                }
                 
                .tanjiro02::before {
                  content: "";
                  width: 100%;
                  height: 12px;
                  margin: auto;
                  background: linear-gradient(45deg, #0d090a 25%, transparent 25%) 0 0/12px 12px, linear-gradient(45deg, transparent 75%, #0d090a 75%) 6px 6px/12px 12px, linear-gradient(45deg, #0d090a 25%, transparent 25%) 6px 6px/12px 12px, linear-gradient(45deg, transparent 75%, #0d090a 75%) 12px 12px/12px 12px, #51b896;
                  position: absolute;
                  top: 0;
                  right: 0;
                  left: 0
                }
                 
                .tanjiro02::after {
                  content: "";
                  width: 100%;
                  height: 12px;
                  margin: auto;
                  background: linear-gradient(45deg, #0d090a 25%, transparent 25%) 0 0/12px 12px, linear-gradient(45deg, transparent 75%, #0d090a 75%) 6px 6px/12px 12px, linear-gradient(45deg, #0d090a 25%, transparent 25%) 6px 6px/12px 12px, linear-gradient(45deg, transparent 75%, #0d090a 75%) 12px 12px/12px 12px, #51b896;
                  position: absolute;
                  right: 0;
                  bottom: 0;
                  left: 0
                }
                </style>
                </head>
                <body>
                  <h1 class="tanjiro02">今ここで倒すんだ！たとえ相討ちになったとしても！</h1>
                </body>
                </html>

俺は長男だから我慢できたけど次男だったら我慢できなかった

こちらは左部分に円のモチーフを配置してその中に市松模様を描いた見出しデザインです。こちらのタグはすぐ下のコードです。

tanjiro03.html

            
                <!DOCTYPE html>
                <html>
                <head>
                <meta charset="UTF-8">
                <title>炭治郎柄の見出しデザインその三</title>
                <style>
                * {
                  padding: 0;
                  margin: 0;
                  box-sizing: border-box
                }
                 
                html {
                  font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
                  font-size: 62.5%;
                  letter-spacing: 0.09em;
                  font-feature-settings: "palt"
                }
                 
                .tanjiro03 {
                  font-size: 2rem;
                  font-weight: 600;
                  padding: 30px 20px 30px 80px;
                  position: relative
                }
                 
                .tanjiro03::before {
                  content: "";
                  width: 60px;
                  height: 60px;
                  margin: auto;
                  background: linear-gradient(45deg, #0d090a 25%, transparent 25%) 0 0/20px 20px, linear-gradient(45deg, transparent 75%, #0d090a 75%) 10px 10px/20px 20px, linear-gradient(45deg, #0d090a 25%, transparent 25%) 10px 10px/20px 20px, linear-gradient(45deg, transparent 75%, #0d090a 75%) 20px 20px/20px 20px, #51b896;
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  border-radius: 50%
                }
                </style>
                </head>
                <body>
                  <h1 class="tanjiro03">俺は長男だから我慢できたけど次男だったら我慢できなかった</h1>
                </body>
                </html>

神様どうか、この人が今度生まれてくる時は、鬼になんてなりませんように

最後は背面に市松模様のボックスを配置し、その上に白色の透過したボックスを重ねています。こちらのタグはすぐ下のコードです。

tanjiro04.html

            
                <!DOCTYPE html>
                <html>
                <head>
                <meta charset="UTF-8">
                <title>炭治郎柄の見出しデザインその四</title>
                <style>
                * {
                  padding: 0;
                  margin: 0;
                  box-sizing: border-box
                }
                 
                html {
                  font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
                  font-size: 62.5%;
                  letter-spacing: 0.09em;
                  font-feature-settings: "palt"
                }
                 
                .tanjiro04 {
                  padding: 12px;
                  background: linear-gradient(45deg, #0d090a 25%, transparent 25%) 0 0/12px 12px, linear-gradient(45deg, transparent 75%, #0d090a 75%) 6px 6px/12px 12px, linear-gradient(45deg, #0d090a 25%, transparent 25%) 6px 6px/12px 12px, linear-gradient(45deg, transparent 75%, #0d090a 75%) 12px 12px/12px 12px, #51b896;
                }
                 
                .tanjiro04 p {
                  font-size: 2rem;
                  font-weight: 600;
                  padding: 20px;
                  background: rgba(255, 255, 255, 0.9)
                }
                </style>
                </head>
                <body>
                  <div class="tanjiro04">
                    <p>神様どうか、この人が今度生まれてくる時は、鬼になんてなりませんように</p>
                  </div>
                
</body>
                </html>