CSS Grid Layoutを使ってクリスマスモチーフのドット絵作ってみた

#  はじめに
普段GENEROSITYでデザイナーをしている櫻木です。
社内でアドベントカレンダーに参加するとのことで、少し畑違いですが今回参加させていただきました。
デザインに興味のあるエンジニアの方やコードに興味のあるデザイナーの方に試してもらえるように、クリスマスにちなんだドット絵を作成しました。

# 1.イラレでドット絵を作成する
イラレ上に好きなイラストを持ってきます。（今回はadobe stockの画像を使用しました）

![img1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3935446/22167abf-b632-8818-e6eb-47f5bd600f0f.jpeg)

画像を選択した上で、オブジェクトからモザイクオブジェクトを作成を選択。
お好みのタイル数を記入してOKを押します。タイル数はChatGPTに計算させると楽ちんでした。

![img2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3935446/7bc44666-2dca-2c96-5f33-8a1516d20861.jpeg)

そうするとこうなります。

![img3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3935446/fe6fe51a-77fb-4a56-297a-e60e0b2a24bc.jpeg)


後は、色のついているところを丸にしたり、色を統一にするなど微調整をかけていきます。
遊び要素として目のモチーフを今回はバツ印にしました笑

![img4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3935446/e59e07b2-33f1-c6f9-4492-dce3d2191a4f.jpeg)


イラレでの作業はこれで完成です！

# 2.CSS Grid Layoutを使ってドット絵を描写していく

htmlを書いていきます。

```html:HTML
<div class="content">
  <div class="grid-container">
    <div class="grid-item"></div>
  </div>
  <p class="text">Merry Christmas</p>
</div>
```
cssでグリットを指定していきます。
```css:CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(19, 20.5263px);
  grid-template-rows: repeat(42, 20.0952px);
  gap: 0; 
  width: 390px;
  height: 844px;
  background-color: #EFEFEF;
}
```
javascriptでグリットセルを作っていきます。
```js:Javascript
const containers = document.querySelectorAll('.grid-container');
const columns = 19;
const rows = 42;

containers.forEach(container => {
  for (let i = 0; i < columns * rows; i++) {
    const div = document.createElement('div');
    div.classList.add('grid-item');
    container.appendChild(div);
  }
});
```

後は、地道に色のつくところをcssで指定していくだけです。

```css:CSS
.grid-item:nth-child(330),
:nth-child(n+332):nth-child(-n+334),
:nth-child(336) {
  background-color: #F9C2C2;
  border-radius: 100%; 
}
```
完成がこちらになります。

◽️サンタ
<p class="codepen" data-height="844" data-default-tab="html,result" data-slug-hash="pvzjgoL" data-pen-title="santa" data-user="hiroto-sakuragi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/hiroto-sakuragi/pen/pvzjgoL">
  santa</a> by hiroto sakuragi (<a href="https://codepen.io/hiroto-sakuragi">@hiroto-sakuragi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

◽️トナカイ
<p class="codepen" data-height="844" data-default-tab="html,result" data-slug-hash="MYgaKjq" data-pen-title="tonakai" data-user="hiroto-sakuragi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/hiroto-sakuragi/pen/MYgaKjq">
  tonakai</a> by hiroto sakuragi (<a href="https://codepen.io/hiroto-sakuragi">@hiroto-sakuragi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

◽️雪だるま
<p class="codepen" data-height="844" data-default-tab="html,result" data-slug-hash="xbKwVJL" data-pen-title="Untitled" data-user="hiroto-sakuragi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/hiroto-sakuragi/pen/xbKwVJL">
  Untitled</a> by hiroto sakuragi (<a href="https://codepen.io/hiroto-sakuragi">@hiroto-sakuragi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

◽️クリスマスツリー
<p class="codepen" data-height="844" data-default-tab="html,result" data-slug-hash="azovZxP" data-pen-title="tree" data-user="hiroto-sakuragi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/hiroto-sakuragi/pen/azovZxP">
  tree</a> by hiroto sakuragi (<a href="https://codepen.io/hiroto-sakuragi">@hiroto-sakuragi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#  最後に
デザイナーとしてどんな記事を書こうか迷いましたが、普段の業務とは違う制作物を作れて楽しかったです。
エンジニアの方やデザイナーの方にぜひ試してもらえると嬉しいです✌️