Hello Droid! CSSでドロイド君を描いてみた

CSSでアンドロイドのキャラクター「ドロイド君」を作成する

## 目標

次の画像にあるドロイド君を作成する
![droid.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414375/63c74da0-9572-93dc-5cc6-475579c74e7f.png)

※できあがったコードは[こちら](https://github.com/y-kotti/create-droid)から確認できます。

## 準備

任意のディレクトリに下記ファイルを作成

- droid.html
- droid.css

droid.html の初期状態

```
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ドロイド君</title>
<link href="droid.css" rel="stylesheet">
</head>
<body>
  <div class="droid">
    <!-- ドロイド君のパーツをここに追加 -->
  </div>
</body>
</body>
</html>
```

droid.cssの初期状態

```
/* ドロイド君 */
.droid {
  margin: 50px;
}

/* 以下に追記していく */
```

## 作成

### 必要なパーツ検討

大きく分けて3パーツに分けられそう
![ドロイドパーツ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414375/fa0bc2c8-bc86-d784-76bc-b716420304f0.png)

さらに、体は手足と親子関係を築けそう

droid.htmlで表現するとこんな感じになる

```
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ドロイド君</title>
<link href="css/droid.css" rel="stylesheet">
</head>
<body>
  <div class="droid">
    <div class="droid__head">
      <div class="droid__antenna"></div>
      <div class="droid__eye"></div>
    </div>
    <div class="droid__body">
      <div class="droid__hand"></div>
      <div class="droid__leg"></div>
    </div>
  </div>
</body>
</body>
</html>
```

### 頭を作成

まずは頭のみ作成
![contour.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414375/0a25f24c-aad1-6121-e5cb-5ba1f90f1e2f.png)
これは半円で表現できそう。droid.css に以下を追記

```
.droid__head {
  width: 100px;
  height: 50px;
  border-radius: 100px 100px 0 0;
  background: #a0c437;
}
```

positionのrelative・absoluteとz-indexを使って、半円の上に目をのせる

```
.droid__head {
  width: 100px;
  height: 50px;
  border-radius: 100px 100px 0 0;
  background: #a0c437;
  /* 新規追加 */
  position: relative;
  z-index: 0;
}

.droid__eye {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* 疑似属性のbefore, afterを使わなくても良いが、使用するdiv タグの数を減らせる */
.droid__eye::before,
.droid__eye::after {
  top: 25px;
  left: 20px;
  width: 13px;
  height: 13px;
  border-radius: 10px;
  background: #ffffff;
  content: "";
  position: absolute;
}
```

ファイルを開くとこんな感じになる
![eye-over-head.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414375/bca49aec-ef36-4948-82fa-de000b4e1553.png)

目と同じようにアンテナ用のクラスも追加

```
.droid__antenna {
  position: relative;
  z-index: 1;
}

.droid__antenna::before,
.droid__antenna::after {
  border: 1px solid #a0c437;
  top: px;
  left: 15px;
  width: 15px;
  background: #a0c437;
  transform: rotate(50deg);
  content: "";
  position: absolute;
}

.droid__antenna::after {
  left: 70px;
  transform: rotate(-50deg);
}
```
これでようやく頭ができた
![head.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414375/138bac22-8900-f88c-1ba2-9b6982032b98.png)

### 頭の下に体を作成

下記を追記

```
.droid__body {
  width: 100px;
  height: 100px;
  background: #a0c437;
  border-radius: 0 0 5px 5px / 0 0 5px 5px; /* 体の下の角を少し丸くする */
}
```
![body-only.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414375/a2443de5-e7a3-07df-3416-190f082d9f90.png)

ファイルを開くと…ん、頭と体がくっついてしまった、、
`.droid__head` に `margin-bottom: 5px;`を追記して調整

これでいい感じになった
![body-only2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414375/f7f241ec-2e9c-2029-0113-6e03762e0f6c.png)

### 手足を追加

頭に目やアンテナを付けたときと同じように手足も付けられる

```
.droid__hand {
  z-index: 1;
  position: relative;
}

.droid__hand::before,
.droid__hand::after {
  left: -25px;
  width: 20px;
  height: 77px;
  background: #a0c437;
  border-radius: 20px/ 20px;
  content: "";
  position: absolute;
}

.droid__hand::after {
  left: 105px;
  border-radius: 20px/ 20px;
}

.droid__leg {
  position: relative;
  z-index: 1;
}

.droid__leg::before,
.droid__leg::after {
  top: 50px;
  left: 10px;
  width: 20px;
  height: 77px;
  background: #a0c437;
  border-radius: 20px/ 20px;
  content: "";
  position: absolute;
}

.droid__leg::after {
  left: 70px;
  border-radius: 20px/ 20px;
}
```

できあがり！
![droid.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414375/33100402-bf3c-e844-6e61-1b6388bdbc19.png)

### 少し工夫

ドロイド君がまばたきするようにしてみた
`.droid__eye::after`に`animation: blink-r infinite 7s;`を追加

さらに下記を追加

```
.droid__eye::before {
  animation: blink-l infinite 7s;
}

@keyframes blink-r {
  0% {
    transform: rotate(180deg) scaleY(1);
  }
  1% {
    transform: rotate(180deg) scaleY(0);
  }
  2% {
    transform: rotate(180deg) scaleY(1);
  }
  50% {
    transform: rotate(180deg) scaleY(1);
  }
  51% {
    transform: rotate(180deg) scaleY(0);
  }
  52% {
    transform: rotate(180deg) scaleY(1);
  }
  53% {
    transform: rotate(180deg) scaleY(1);
  }
  54% {
    transform: rotate(180deg) scaleY(0);
  }
  55% {
    transform: rotate(180deg) scaleY(1);
  }
  100% {
    transform: rotate(90deg) scaleY(1);
  }
}

@keyframes blink-l {
  0% {
    transform: rotate(180deg) scaleY(1);
  }
  1% {
    transform: rotate(180deg) scaleY(0);
  }
  2% {
    transform: rotate(180deg) scaleY(1);
  }
  50% {
    transform: rotate(180deg) scaleY(1);
  }
  51% {
    transform: rotate(180deg) scaleY(0);
  }
  52% {
    transform: rotate(180deg) scaleY(1);
  }
  53% {
    transform: rotate(180deg) scaleY(1);
  }
  54% {
    transform: rotate(180deg) scaleY(0);
  }
  55% {
    transform: rotate(180deg) scaleY(1);
  }
  100% {
    transform: rotate(90deg) scaleY(1);
  }
}
```

## 感想

面白かったしcssの勉強にはなったけど、
これ以上複雑なものを作ろうとしたらかなりの時間が溶けそう…。

## 参考
- [BEMのドキュメント](https://en.bem.info/methodology/)
  - クラス名はBEMの考え方を取り入れた 
- [CSSでいろんなカタチを表現してみる](https://morobrand.net/mororeco/css/css-shape/)
  - 基本的な図形の書き方はこれを参考にした 
- [画像を使わずにHTMLとCSSだけで猫を描いたお話](https://www.indival.co.jp/2017/11/23/5737/)
  - ドロイド君のまばたきはこれを参考にした