AIにスーパーマリオをCSSで描かせてみた

## 概要
ChatGPTを筆頭にコロナに負けず劣らず流行の兆しを見せているAI。
そんなAIに「HTMLとCSSでスーパーマリオを描いてみて！」と無茶ぶりしてみた。

## 利用するAI
ChatGPTは定員オーバーだったので、Notion AIを使いました。
https://www.notion.so/ja-jp/blog/notion-ai-is-here-for-everyone

## 出力内容
このドキュメントでは、CSS を使用してスーパー マリオのキャラクターを実装する手順について説明します。 キャラクターは、正方形、円、長方形などの基本的な CSS 形状を使用して作成されます。 手順は 5 つのステップに分かれており、各ステップは前のステップに基づいて構築され、完全なキャラクターを作成します。 正確性を確保するために、各セクションに記載されているコードを参照してください。

### ステップ 1: 頭の作成
マリオの頭を作成するには、赤い円形を使用します。 また、顔には白い半円を使用し、瞳孔には小さな黒い円形を使用します。 このセクションのコードは次のようになります。

```html
<div class="head">
  <div class="face"></div>
  <div class="pupil"></div>
</div>
```

```css
.head {
  background-color: red;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
}

.face {
  background-color: white;
  width: 50px;
  height: 25px;
  border-radius: 0 0 50% 50%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.pupil {
  background-color: black;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  top: 15px;
  left: 20px;
}
```

### ステップ 2: ボディの作成
マリオのボディは、シャツの赤い四角、2 つの長方形で構成される青いオーバーオール、および 2 つの白い円形のボタンの組み合わせになります。 このセクションのコードは次のようになります。

（青いオーバーオールを実装しようとしているので、AIはマリオをしっかり認識しているようですね！！）

```html
<div class="body">
  <div class="overall"></div>
  <div class="overall"></div>
  <div class="button"></div>
  <div class="button right"></div>
</div>
```

```css
.body {
  background-color: red;
  width: 50px;
  height: 75px;
  position: relative;
}

.overall {
  background-color: blue;
  width: 50px;
  height: 35px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.button {
  background-color: white;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 15px;
}

.button.right {
  left: 25px;
}
```

### ステップ 3: 腕と手を作成する
マリオの腕と手は、それぞれ 2 つの長方形で構成されます。 手袋用の白い円も追加します。 このセクションのコードは次のようになります。

```html
<div class="arm right">
  <div class="hand right">
    <div class="glove"></div>
  </div>
</div>
<div class="arm left">
  <div class="hand left">
    <div class="glove"></div>
  </div>
</div>
```

```css
.arm {
  background-color: red;
  width: 10px;
  height: 30px;
  position: absolute;
}

.arm.right {
  transform: rotate(30deg);
  top: 40px;
  left: 45px;
}

.arm.left {
  transform: rotate(-30deg);
  top: 40px;
  left: 5px;
}

.hand {
  background-color: white;
  width: 20px;
  height: 10px;
  border-radius: 30%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.hand.right {
  transform: rotate(-10deg);
  top: 10px;
  left: -5px;
}

.hand.left {
  transform: rotate(10deg);
  top: 10px;
  right: -5px;
}

.glove {
  background-color: white;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  top: -5px;
  left: -3px;
}
```

### ステップ 4: 脚と靴の作成
マリオの足と靴は、2 つの長方形と 2 つの正方形で構成されます。 靴下用の白い円も追加します。 このセクションのコードは次のようになります。

```html
<div class="leg right">
  <div class="shoe right"></div>
  <div class="sock"></div>
</div>
<div class="leg left">
  <div class="shoe left"></div>
  <div class="sock"></div>
</div>
```

```css
.leg {
  background-color: blue;
  width: 15px;
  height: 35px;
  position: absolute;
}

.leg.right {
  bottom: 0;
  left: 18px;
}

.leg.left {
  bottom: 0;
  left: 5px;
}

.shoe {
  background-color: brown;
  width: 18px;
  height: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.shoe.right {
  transform: rotate(10deg);
  bottom: -5px;
  left: -4px;
}

.shoe.left {
  transform: rotate(-10deg);
  bottom: -5px;
  right: -4px;
}

.sock {
  background-color: white;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  top: -5px;
  left: -3px;
}
```

### ステップ 5: 最後の仕上げ
最後の仕上げとして、`position` プロパティを使用してキャラクターのさまざまな部分を配置します。 また、`transform` プロパティを使用して、体の一部を回転させます。 最後に、`z-index` プロパティを使用して、さまざまなパーツが正しくレイヤー化されていることを確認します。 このセクションのコードは次のようになります。

```html
<div class="mario">
  <div class="head">
    <div class="face"></div>
    <div class="pupil"></div>
  </div>
  <div class="arm right">
    <div class="hand right">
      <div class="glove"></div>
    </div>
  </div>
  <div class="arm left">
    <div class="hand left">
      <div class="glove"></div>
    </div>
  </div>
  <div class="body">
    <div class="overall"></div>
    <div class="overall"></div>
    <div class="button"></div>
    <div class="button right"></div>
  </div>
  <div class="leg right">
    <div class="shoe right"></div>
    <div class="sock"></div>
  </div>
  <div class="leg left">
    <div class="shoe left"></div>
    <div class="sock"></div>
  </div>
</div>
```

```css
.mario {
  position: relative;
  margin: 0 auto;
  width: 100px;
  height: 150px;
}

.head {
  z-index: 2;
}

.arm {
  z-index: 1;
}

.arm.right {
  transform-origin: top right;
}

.arm.left {
  transform-origin: top left;
}

.leg {
  z-index: 1;
}

.leg.right {
  transform-origin: bottom right;
}

.leg.left {
  transform-origin: bottom left;
}

.hand {
  z-index: 2;
}

.shoe {
  z-index: 2;
}

.glove {
  z-index: 3;
}

.sock {
  z-index: 3;
}
```

完成！！

## 結果
AIがHTMLとCSSで作ったスーパーマリオ。
果たして、どんな形になっているのか！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122485/7aabc3fd-e014-a6d2-d9b3-e08d98123a1e.png)


残念！！！
せめて顔があってほしかったなぁ。


## 結論
AIにHTML/CSSで絵を描かせることはまだ難しい。
でも文章はかなり得意なので、ブログや記事を書く際は有効活用すべし。