【改良版】html/cssで動くレスポンシブなドット絵

これは一年前の話

動くドット絵を描いたら面白そう!

cssでドット絵を描く人は意外といましたが、

  • divのみで描く
  • box-shadowで描く

など、方法は人によって様々!
調べた感じレスポンシブなドット絵を描いてる人はいないようだったので試しに作ってみることにしました!

それで誕生したのがこの子!

一部の方にスライドは公開していたのですが、コードは公開していなかったので少し手直しして以下にまとめました!
この書き方だとCSSが長くなってしまい書くのも大変なのでもっと良い書き方ができると良いなと思っています。

(html/cssでドット絵を書くこと自体使い道があるのかも謎ですが、JavaScriptか何かで専用のツールを作成した方が効率が良いかもしれないです・・)

HTML

<div class="character">
  <div id="girlCenter">
  </div>
  <div id="girlRight">
  </div>
  <div id="girlLeft">
  </div>
</div>

CSS

.character {
  width: 100%;
}
.character > div {
  display: none;
  flex-wrap: wrap;
}
.character > div span {
  width: 5%;
  padding-top: 5%;
}

/* girlCenter
-------------------------------*/
/* 線画 */
#girlCenter span:nth-child(6), #girlCenter span:nth-child(7), #girlCenter span:nth-child(8), #girlCenter span:nth-child(9), #girlCenter span:nth-child(10), #girlCenter span:nth-child(11), #girlCenter span:nth-child(12), #girlCenter span:nth-child(13),
#girlCenter span:nth-child(25), #girlCenter span:nth-child(34),
#girlCenter span:nth-child(45), #girlCenter span:nth-child(55),
#girlCenter span:nth-child(64), #girlCenter span:nth-child(75),
#girlCenter span:nth-child(84), #girlCenter span:nth-child(95),
#girlCenter span:nth-child(104), #girlCenter span:nth-child(115),
#girlCenter span:nth-child(124), #girlCenter span:nth-child(135), #girlCenter span:nth-child(136),
#girlCenter span:nth-child(144), #girlCenter span:nth-child(157),
#girlCenter span:nth-child(165), #girlCenter span:nth-child(174), #girlCenter span:nth-child(177),
#girlCenter span:nth-child(186), #girlCenter span:nth-child(193), #girlCenter span:nth-child(195), #girlCenter span:nth-child(196),
#girlCenter span:nth-child(205), #girlCenter span:nth-child(208), #girlCenter span:nth-child(209), #girlCenter span:nth-child(210), #girlCenter span:nth-child(211), #girlCenter span:nth-child(214),
#girlCenter span:nth-child(224), #girlCenter span:nth-child(235),
#girlCenter span:nth-child(244), #girlCenter span:nth-child(255),
#girlCenter span:nth-child(266), #girlCenter span:nth-child(273),
#girlCenter span:nth-child(285), #girlCenter span:nth-child(294),
#girlCenter span:nth-child(305), #girlCenter span:nth-child(314),
#girlCenter span:nth-child(327), #girlCenter span:nth-child(329), #girlCenter span:nth-child(330), #girlCenter span:nth-child(332) {
  background: #212733;
}
/* 髪の毛 */
#girlCenter span:nth-child(26), #girlCenter span:nth-child(27), #girlCenter span:nth-child(28), #girlCenter span:nth-child(29), #girlCenter span:nth-child(30), #girlCenter span:nth-child(31), #girlCenter span:nth-child(32), #girlCenter span:nth-child(33),
#girlCenter span:nth-child(46), #girlCenter span:nth-child(48), #girlCenter span:nth-child(49), #girlCenter span:nth-child(50), #girlCenter span:nth-child(51), #girlCenter span:nth-child(52), #girlCenter span:nth-child(53), #girlCenter span:nth-child(54),
#girlCenter span:nth-child(67),  #girlCenter span:nth-child(69), #girlCenter span:nth-child(71), #girlCenter span:nth-child(74),
#girlCenter span:nth-child(86), #girlCenter span:nth-child(87), #girlCenter span:nth-child(88), #girlCenter span:nth-child(89), #girlCenter span:nth-child(90), #girlCenter span:nth-child(91), #girlCenter span:nth-child(92),
#girlCenter span:nth-child(105), #girlCenter span:nth-child(106), #girlCenter span:nth-child(107), #girlCenter span:nth-child(109), #girlCenter span:nth-child(111), #girlCenter span:nth-child(112), #girlCenter span:nth-child(113), #girlCenter span:nth-child(114),
#girlCenter span:nth-child(125), #girlCenter span:nth-child(126), #girlCenter span:nth-child(133), #girlCenter span:nth-child(134),
#girlCenter span:nth-child(145), #girlCenter span:nth-child(154), #girlCenter span:nth-child(156),
#girlCenter span:nth-child(175) {
  background: #403018;
}
/* 髪の毛ハイライト */
#girlCenter span:nth-child(47), #girlCenter span:nth-child(49), #girlCenter span:nth-child(51),
#girlCenter span:nth-child(65), #girlCenter span:nth-child(66), #girlCenter span:nth-child(68), #girlCenter span:nth-child(70), #girlCenter span:nth-child(72), #girlCenter span:nth-child(73),
#girlCenter span:nth-child(85), #girlCenter span:nth-child(70), #girlCenter span:nth-child(93), #girlCenter span:nth-child(94),
#girlCenter span:nth-child(155),
#girlCenter span:nth-child(176) {
  background: #7f5f2f;
}
/* 肌 */
#girlCenter span:nth-child(128), #girlCenter span:nth-child(129), #girlCenter span:nth-child(130),
#girlCenter span:nth-child(147), #girlCenter span:nth-child(149), #girlCenter span:nth-child(150), #girlCenter span:nth-child(152),
#girlCenter span:nth-child(167), #girlCenter span:nth-child(169), #girlCenter span:nth-child(170), #girlCenter span:nth-child(172),
#girlCenter span:nth-child(188), #girlCenter span:nth-child(189), #girlCenter span:nth-child(190), #girlCenter span:nth-child(191) {
  background: #ffe7c6;
}
/* 肌影 */
#girlCenter span:nth-child(108), #girlCenter span:nth-child(110),
#girlCenter span:nth-child(127), #girlCenter span:nth-child(131), #girlCenter span:nth-child(132),
#girlCenter span:nth-child(146), #girlCenter span:nth-child(153),
#girlCenter span:nth-child(166), #girlCenter span:nth-child(173),
#girlCenter span:nth-child(187), #girlCenter span:nth-child(192),
#girlCenter span:nth-child(245), #girlCenter span:nth-child(254),
#girlCenter span:nth-child(328), #girlCenter span:nth-child(331) {
  background: #e9a474;
}
/* 目 */
#girlCenter span:nth-child(148), #girlCenter span:nth-child(151) {
  background: #000;
}
/* 目の下 */
#girlCenter span:nth-child(168), #girlCenter span:nth-child(171) {
  background: #e8bfa2;
}
/* 服 */
#girlCenter span:nth-child(206), #girlCenter span:nth-child(207), #girlCenter span:nth-child(212), #girlCenter span:nth-child(213),
#girlCenter span:nth-child(227), #girlCenter span:nth-child(228), #girlCenter span:nth-child(229), #girlCenter span:nth-child(230), #girlCenter span:nth-child(231), #girlCenter span:nth-child(232),
#girlCenter span:nth-child(248), #girlCenter span:nth-child(249), #girlCenter span:nth-child(250), #girlCenter span:nth-child(251) {
  background: #fff;
}
/* 服影 */
#girlCenter span:nth-child(225), #girlCenter span:nth-child(226), #girlCenter span:nth-child(233), #girlCenter span:nth-child(234),
#girlCenter span:nth-child(246), #girlCenter span:nth-child(247), #girlCenter span:nth-child(252), #girlCenter span:nth-child(253) {
  background: #d8d7d6;
}
/* ピンク */
#girlCenter span:nth-child(270), #girlCenter span:nth-child(271),
#girlCenter span:nth-child(287), #girlCenter span:nth-child(289), #girlCenter span:nth-child(291),
#girlCenter span:nth-child(307), #girlCenter span:nth-child(309), #girlCenter span:nth-child(312) {
  background: #f67076;
}
/* 濃いピンク */
#girlCenter span:nth-child(267), #girlCenter span:nth-child(268), #girlCenter span:nth-child(269), #girlCenter span:nth-child(272),
#girlCenter span:nth-child(286), #girlCenter span:nth-child(288), #girlCenter span:nth-child(290), #girlCenter span:nth-child(292), #girlCenter span:nth-child(293),
#girlCenter span:nth-child(306), #girlCenter span:nth-child(308), #girlCenter span:nth-child(310), #girlCenter span:nth-child(311), #girlCenter span:nth-child(313),
#girlCenter span:nth-child(347), #girlCenter span:nth-child(348), #girlCenter span:nth-child(351), #girlCenter span:nth-child(352) {
  background: #b35156;
}


/* girlRight
-------------------------------*/
/* 線画 */
#girlRight span:nth-child(26), #girlRight span:nth-child(27), #girlRight span:nth-child(28), #girlRight span:nth-child(29), #girlRight span:nth-child(30), #girlRight span:nth-child(31), #girlRight span:nth-child(32), #girlRight span:nth-child(33),
#girlRight span:nth-child(45), #girlRight span:nth-child(54),
#girlRight span:nth-child(65), #girlRight span:nth-child(75),
#girlRight span:nth-child(84), #girlRight span:nth-child(95),
#girlRight span:nth-child(104), #girlRight span:nth-child(115),
#girlRight span:nth-child(124), #girlRight span:nth-child(135),
#girlRight span:nth-child(144), #girlRight span:nth-child(155), #girlRight span:nth-child(156),
#girlRight span:nth-child(164), #girlRight span:nth-child(177),
#girlRight span:nth-child(185), #girlRight span:nth-child(194), #girlRight span:nth-child(197),
#girlRight span:nth-child(206), #girlRight span:nth-child(213), #girlRight span:nth-child(215), #girlRight span:nth-child(216),
#girlRight span:nth-child(225), #girlRight span:nth-child(228), #girlRight span:nth-child(229), #girlRight span:nth-child(230), #girlRight span:nth-child(231), #girlRight span:nth-child(234),
#girlRight span:nth-child(245), #girlRight span:nth-child(247), #girlRight span:nth-child(255),
#girlRight span:nth-child(265), #girlRight span:nth-child(275),
#girlRight span:nth-child(286), #girlRight span:nth-child(293),
#girlRight span:nth-child(305), #girlRight span:nth-child(314),
#girlRight span:nth-child(325), #girlRight span:nth-child(334),
#girlRight span:nth-child(347), #girlRight span:nth-child(350), #girlRight span:nth-child(352) {
  background: #212733;
}
/* 髪の毛 */
#girlRight span:nth-child(46), #girlRight span:nth-child(47), #girlRight span:nth-child(48), #girlRight span:nth-child(49), #girlRight span:nth-child(50), #girlRight span:nth-child(51), #girlRight span:nth-child(52), #girlRight span:nth-child(53),
#girlRight span:nth-child(66), #girlRight span:nth-child(68), #girlRight span:nth-child(69), #girlRight span:nth-child(70), #girlRight span:nth-child(71), #girlRight span:nth-child(72), #girlRight span:nth-child(73), #girlRight span:nth-child(74),
#girlRight span:nth-child(87),  #girlRight span:nth-child(89), #girlRight span:nth-child(91), #girlRight span:nth-child(94),
#girlRight span:nth-child(106), #girlRight span:nth-child(107), #girlRight span:nth-child(108), #girlRight span:nth-child(109), #girlRight span:nth-child(110), #girlRight span:nth-child(111), #girlRight span:nth-child(112),
#girlRight span:nth-child(125), #girlRight span:nth-child(126), #girlRight span:nth-child(127), #girlRight span:nth-child(129), #girlRight span:nth-child(131), #girlRight span:nth-child(132), #girlRight span:nth-child(133), #girlRight span:nth-child(134),
#girlRight span:nth-child(145), #girlRight span:nth-child(146), #girlRight span:nth-child(153), #girlRight span:nth-child(154),
#girlRight span:nth-child(165), #girlRight span:nth-child(174), #girlRight span:nth-child(176),
#girlRight span:nth-child(195) {
  background: #403018;
}
/* 髪の毛ハイライト */
#girlRight span:nth-child(67), #girlRight span:nth-child(69), #girlRight span:nth-child(71),
#girlRight span:nth-child(85), #girlRight span:nth-child(86), #girlRight span:nth-child(88), #girlRight span:nth-child(90), #girlRight span:nth-child(92), #girlRight span:nth-child(93),
#girlRight span:nth-child(105), #girlRight span:nth-child(113), #girlRight span:nth-child(114),
#girlRight span:nth-child(175),
#girlRight span:nth-child(196) {
  background: #7f5f2f;
}
/* 肌 */
#girlRight span:nth-child(148), #girlRight span:nth-child(149), #girlRight span:nth-child(150),
#girlRight span:nth-child(167), #girlRight span:nth-child(169), #girlRight span:nth-child(170), #girlRight span:nth-child(172),
#girlRight span:nth-child(187), #girlRight span:nth-child(189), #girlRight span:nth-child(190), #girlRight span:nth-child(192),
#girlRight span:nth-child(208), #girlRight span:nth-child(209), #girlRight span:nth-child(210), #girlRight span:nth-child(211) {
  background: #ffe7c6;
}
/* 肌影 */
#girlRight span:nth-child(128), #girlRight span:nth-child(130),
#girlRight span:nth-child(147), #girlRight span:nth-child(151), #girlRight span:nth-child(152),
#girlRight span:nth-child(166), #girlRight span:nth-child(173),
#girlRight span:nth-child(186), #girlRight span:nth-child(193),
#girlRight span:nth-child(207), #girlRight span:nth-child(212),
#girlRight span:nth-child(267), #girlRight span:nth-child(274),
#girlRight span:nth-child(348), #girlRight span:nth-child(351) {
  background: #e9a474;
}
/* 目 */
#girlRight span:nth-child(168), #girlRight span:nth-child(171) {
  background: #000;
}
/* 目の下 */
#girlRight span:nth-child(188), #girlRight span:nth-child(191) {
  background: #e8bfa2;
}
/* 服 */
#girlRight span:nth-child(226), #girlRight span:nth-child(227), #girlRight span:nth-child(232), #girlRight span:nth-child(233),
#girlRight span:nth-child(248), #girlRight span:nth-child(249), #girlRight span:nth-child(250), #girlRight span:nth-child(251), #girlRight span:nth-child(252),
#girlRight span:nth-child(268), #girlRight span:nth-child(269), #girlRight span:nth-child(270), #girlRight span:nth-child(271) {
  background: #fff;
}
/* 服影 */
#girlRight span:nth-child(246), #girlRight span:nth-child(253), #girlRight span:nth-child(254),
#girlRight span:nth-child(266), #girlRight span:nth-child(272), #girlRight span:nth-child(273) {
  background: #d8d7d6;
}
/* ピンク */
#girlRight span:nth-child(290), #girlRight span:nth-child(291),
#girlRight span:nth-child(307), #girlRight span:nth-child(309), #girlRight span:nth-child(311),
#girlRight span:nth-child(327), #girlRight span:nth-child(329), #girlRight span:nth-child(332) {
  background: #f67076;
}
/* 濃いピンク */
#girlRight span:nth-child(287), #girlRight span:nth-child(288), #girlRight span:nth-child(289), #girlRight span:nth-child(292),
#girlRight span:nth-child(306), #girlRight span:nth-child(308), #girlRight span:nth-child(310), #girlRight span:nth-child(312), #girlRight span:nth-child(313),
#girlRight span:nth-child(326), #girlRight span:nth-child(328), #girlRight span:nth-child(330), #girlRight span:nth-child(331), #girlRight span:nth-child(333),
#girlRight span:nth-child(348),
#girlRight span:nth-child(371), #girlRight span:nth-child(372) {
  background: #b35156;
}


/* girlLeft
-------------------------------*/
/* 線画 */
#girlLeft span:nth-child(26), #girlLeft span:nth-child(27), #girlLeft span:nth-child(28), #girlLeft span:nth-child(29), #girlLeft span:nth-child(30), #girlLeft span:nth-child(31), #girlLeft span:nth-child(32), #girlLeft span:nth-child(33),
#girlLeft span:nth-child(45), #girlLeft span:nth-child(54),
#girlLeft span:nth-child(65), #girlLeft span:nth-child(75),
#girlLeft span:nth-child(84), #girlLeft span:nth-child(95),
#girlLeft span:nth-child(104), #girlLeft span:nth-child(115),
#girlLeft span:nth-child(124), #girlLeft span:nth-child(135),
#girlLeft span:nth-child(144), #girlLeft span:nth-child(155), #girlLeft span:nth-child(156),
#girlLeft span:nth-child(164), #girlLeft span:nth-child(177),
#girlLeft span:nth-child(185), #girlLeft span:nth-child(194), #girlLeft span:nth-child(197),
#girlLeft span:nth-child(206), #girlLeft span:nth-child(213), #girlLeft span:nth-child(215), #girlLeft span:nth-child(216),
#girlLeft span:nth-child(225), #girlLeft span:nth-child(228), #girlLeft span:nth-child(229), #girlLeft span:nth-child(230), #girlLeft span:nth-child(231), #girlLeft span:nth-child(234),
#girlLeft span:nth-child(244), #girlLeft span:nth-child(252), #girlLeft span:nth-child(254),
#girlLeft span:nth-child(264), #girlLeft span:nth-child(274),
#girlLeft span:nth-child(286), #girlLeft span:nth-child(293),
#girlLeft span:nth-child(305), #girlLeft span:nth-child(314),
#girlLeft span:nth-child(325), #girlLeft span:nth-child(334),
#girlLeft span:nth-child(347), #girlLeft span:nth-child(349), #girlLeft span:nth-child(352) {
  background: #212733;
}
/* 髪の毛 */
#girlLeft span:nth-child(46), #girlLeft span:nth-child(47), #girlLeft span:nth-child(48), #girlLeft span:nth-child(49), #girlLeft span:nth-child(50), #girlLeft span:nth-child(51), #girlLeft span:nth-child(52), #girlLeft span:nth-child(53),
#girlLeft span:nth-child(66), #girlLeft span:nth-child(68), #girlLeft span:nth-child(69), #girlLeft span:nth-child(70), #girlLeft span:nth-child(71), #girlLeft span:nth-child(72), #girlLeft span:nth-child(73), #girlLeft span:nth-child(74),
#girlLeft span:nth-child(87),  #girlLeft span:nth-child(89), #girlLeft span:nth-child(91), #girlLeft span:nth-child(94),
#girlLeft span:nth-child(106), #girlLeft span:nth-child(107), #girlLeft span:nth-child(108), #girlLeft span:nth-child(109), #girlLeft span:nth-child(110), #girlLeft span:nth-child(111), #girlLeft span:nth-child(112),
#girlLeft span:nth-child(125), #girlLeft span:nth-child(126), #girlLeft span:nth-child(127), #girlLeft span:nth-child(129), #girlLeft span:nth-child(131), #girlLeft span:nth-child(132), #girlLeft span:nth-child(133), #girlLeft span:nth-child(134),
#girlLeft span:nth-child(145), #girlLeft span:nth-child(146), #girlLeft span:nth-child(153), #girlLeft span:nth-child(154),
#girlLeft span:nth-child(165), #girlLeft span:nth-child(174), #girlLeft span:nth-child(176),
#girlLeft span:nth-child(195) {
  background: #403018;
}
/* 髪の毛ハイライト */
#girlLeft span:nth-child(67), #girlLeft span:nth-child(69), #girlLeft span:nth-child(71),
#girlLeft span:nth-child(85), #girlLeft span:nth-child(86), #girlLeft span:nth-child(88), #girlLeft span:nth-child(90), #girlLeft span:nth-child(92), #girlLeft span:nth-child(93),
#girlLeft span:nth-child(105), #girlLeft span:nth-child(113), #girlLeft span:nth-child(114),
#girlLeft span:nth-child(175),
#girlLeft span:nth-child(196) {
  background: #7f5f2f;
}
/* 肌 */
#girlLeft span:nth-child(148), #girlLeft span:nth-child(149), #girlLeft span:nth-child(150),
#girlLeft span:nth-child(167), #girlLeft span:nth-child(169), #girlLeft span:nth-child(170), #girlLeft span:nth-child(172),
#girlLeft span:nth-child(187), #girlLeft span:nth-child(189), #girlLeft span:nth-child(190), #girlLeft span:nth-child(192),
#girlLeft span:nth-child(208), #girlLeft span:nth-child(209), #girlLeft span:nth-child(210), #girlLeft span:nth-child(211) {
  background: #ffe7c6;
}
/* 肌影 */
#girlLeft span:nth-child(128), #girlLeft span:nth-child(130),
#girlLeft span:nth-child(147), #girlLeft span:nth-child(151), #girlLeft span:nth-child(152),
#girlLeft span:nth-child(166), #girlLeft span:nth-child(173),
#girlLeft span:nth-child(186), #girlLeft span:nth-child(193),
#girlLeft span:nth-child(207), #girlLeft span:nth-child(212),
#girlLeft span:nth-child(265), #girlLeft span:nth-child(272),
#girlLeft span:nth-child(348), #girlLeft span:nth-child(351) {
  background: #e9a474;
}
/* 目 */
#girlLeft span:nth-child(168), #girlLeft span:nth-child(171) {
  background: #000;
}
/* 目の下 */
#girlLeft span:nth-child(188), #girlLeft span:nth-child(191) {
  background: #e8bfa2;
}
/* 服 */
#girlLeft span:nth-child(226), #girlLeft span:nth-child(227), #girlLeft span:nth-child(232), #girlLeft span:nth-child(233),
#girlLeft span:nth-child(247), #girlLeft span:nth-child(248), #girlLeft span:nth-child(249), #girlLeft span:nth-child(250), #girlLeft span:nth-child(251),
#girlLeft span:nth-child(268), #girlLeft span:nth-child(269), #girlLeft span:nth-child(270), #girlLeft span:nth-child(271) {
  background: #fff;
}
/* 服影 */
#girlLeft span:nth-child(245), #girlLeft span:nth-child(246), #girlLeft span:nth-child(253),
#girlLeft span:nth-child(266), #girlLeft span:nth-child(267), #girlLeft span:nth-child(273) {
  background: #d8d7d6;
}
/* ピンク */
#girlLeft span:nth-child(290), #girlLeft span:nth-child(291),
#girlLeft span:nth-child(307), #girlLeft span:nth-child(309), #girlLeft span:nth-child(311),
#girlLeft span:nth-child(327), #girlLeft span:nth-child(329), #girlLeft span:nth-child(332) {
  background: #f67076;
}
/* 濃いピンク */
#girlLeft span:nth-child(287), #girlLeft span:nth-child(288), #girlLeft span:nth-child(289), #girlLeft span:nth-child(292),
#girlLeft span:nth-child(306), #girlLeft span:nth-child(308), #girlLeft span:nth-child(310), #girlLeft span:nth-child(312), #girlLeft span:nth-child(313),
#girlLeft span:nth-child(326), #girlLeft span:nth-child(328), #girlLeft span:nth-child(330), #girlLeft span:nth-child(331), #girlLeft span:nth-child(333),
#girlLeft span:nth-child(351),
#girlLeft span:nth-child(367), #girlLeft span:nth-child(368) {
  background: #b35156;
}

JavaScript

  const girlCenter = document.getElementById('girlCenter'),
       girlRight = document.getElementById('girlRight'),
        girlLeft = document.getElementById('girlLeft');
  for(i = 1; i <= 380; i++){
    const span = document.createElement('span');
      girlCenter.appendChild(span);
  }
  for(i = 1; i <= 380; i++){
    const span = document.createElement('span');
      girlRight.appendChild(span);
  }
  for(i = 1; i <= 380; i++){
    const span = document.createElement('span');
      girlLeft.appendChild(span);
  }
  let count = 100;
  function girlMove(){
      count--;
      const id = setTimeout(girlMove, 1000);

      if(count < 0){
          clearTimeout(id);
      } else {
          if(count % 4 === 1){
              girlCenter.style.display = 'none';
               girlRight.style.display = 'flex';
          }
          else if(count % 4 === 3){
              girlCenter.style.display = 'none';
                girlLeft.style.display = 'flex';
          }
          else {
              girlCenter.style.display = 'flex';
               girlRight.style.display = 'none';
                girlLeft.style.display = 'none';
          }
      }
  }
  girlMove();

一年後の気付き

一年も経つと直したい箇所がたくさんあるね(直しきれてない)

成長の証だね!