CSSでR2-D2を描く

## この内容について
CSSを使ってR2-D2を描けるかをやってみました。
なお、本内容で作るR2-D2は、立体的なものではなく、平面的なデザインのものです。ご了承ください。
今回はあえて、CSSを省略した書き方をしていないです。

## 見本
今回作成するのは、このようなR2-D2です。
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="GRogJdd" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="R2-D2">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/GRogJdd">
  R2-D2</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## R2-D2を描く
### リセットCSS
リセットCSSを全部書いときたいところですが、今回はmarginとpaddingだけなくします。

```css:CSS
*{
  margin: 0;
  padding: 0;
}
```

### 台紙となるコンテナを用意
今回描くR2-D2の台紙となるコンテナ要素を用意します。
要素を中央に配置して、高さと横幅を300pxにして、背景色を変えています。

```html:HTML
<div class="container">
  <!-- ここにR2-D2を描く -->
</div>
```
```css:CSS
/* 外枠 */
.container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 300px;
  width: 300px;
  background: #222;
}
```

### R2-D2の土台
R2-D2の土台となる骨格を描きます
要素を中央に配置して、高さを120px、横幅を200pxにして、上左と上左を丸く変え、背景色を変えています。

```html:HTML
<div class="r2d2-container">
  <!-- ここにR2-D2の目 -->
  <!-- ここにR2-D2の色々なパーツ -->
  <!-- ここにR2-D2の下の青い帯のような部分 -->
</div>
```
```css:CSS
/* R2-D2の外枠(骨格) */
.r2d2-container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 120px;
  width: 200px;
  border-radius: 120px 120px 0 0;
  background: #E1E4E8;
}
```

### R2-D2の目
R2-D2の目を描きます
まず外枠は、要素を中央少し上に配置して、高さを40px、横幅を40pxにして、角を少し丸く変え、背景色を変えています。
中身の目玉は、要素を中央に配置して、高さを30px、横幅を30pxにして、角を丸くし円に変え、背景色を変えています。

```html:HTML
<div class="r2d2-eye-container">
  <div class="r2d2-eye"></div>
</div>
```
```css:CSS
/* R2-D2の目の外枠 */
.r2d2-eye-container{
  position: absolute;
  top: calc(50% - 10px);
  left: 50%;
  transform: translate(-50%, -50%);
  height: 40px;
  width: 40px;
  border-radius: 3px;
  background: #0685B7;
}
/* R2-D2の目玉 */
.r2d2-eye{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #000;
}
```

### R2-D2の色々なパーツたち
R2-D2の色々なパーツたちを描きます
まず外枠は、要素を中央少し下に配置して、高さを20px、横幅を100%より少し小さくして、外側に余白を少し出し、子要素を横並びに配置させます。
中身の1番左のパーツは、高さを20px、横幅を15pxにして、角を少し変え、背景色を変えています。
中身の2番目の左のパーツは、左側に少し余白を出し、高さを20px、横幅を10pxにして、角を少し変え、背景色を変えています。
中身の3番目の左のパーツは、左側に少し余白を出し、高さを20px、横幅を15pxにして、角を少し変え、背景色を変えています。
中身の4番目の左のパーツは、左側に少し余白を出し、高さを18px、横幅を18pxにして、角を少し変え、背景色を変えています。
中身の5番目の左のパーツは、左側に少し余白を出し、高さを18px、横幅を30pxにして、角を少し変え、背景色を変えています。
中身の5番目の左のパーツの中身は、要素を中央少し右に配置して、高さを14px、横幅を14pxにして、角を丸くし円に変え、背景色を変えています。
中身の6番目の左のパーツは、左側に少し余白を出し、高さを18px、横幅を18pxにして、角を丸くし円に変え、背景色を変えています。
中身の6番目の左のパーツの中身は、要素を中央少し右に配置して、高さを14px、横幅を14pxにして、角を丸くし円に変え、背景色を変えています。
中身の7番目の左のパーツは、左側に少し余白を出し、高さを18px、横幅を18pxにして、角を少し変え、背景色を変えています。
中身の7番目の左のパーツは、左側に少し余白を出し、高さを20px、横幅を15pxにして、角を少し変え、背景色を変えています。

```html:HTML
<div class="r2d2-parts">
  <div class="r2d2-parts-left1"></div>
  <div class="r2d2-parts-left2"></div>
  <div class="r2d2-parts-left3"></div>
  <div class="r2d2-parts-left4"></div>
  <div class="r2d2-parts-center">
     <div class="r2d2-parts-center-eye"></div>
  </div>
  <div class="r2d2-parts-right1">
    <div class="r2d2-parts-right1-eye"></div>
  </div>
  <div class="r2d2-parts-right2"></div>
  <div class="r2d2-parts-right3"></div>
</div>
```
```css:CSS
/* R2-D2の目の下のパーツ */
.r2d2-parts{
  position: absolute;
  top: calc(50% + 15px);
  height: 20px;
  width: calc(100% - 20px);
  padding: 0 10px;
  display: flex;
}
/* R2-D2の左のパーツ1 */
.r2d2-parts-left1{
  height: 20px;
  width: 15px;
  border-radius: 3px;
  background: #0685B7;
}
/* R2-D2の左のパーツ2 */
.r2d2-parts-left2{
  margin-left: 2px;
  height: 20px;
  width: 10px;
  border-radius: 3px;
  background: #0685B7;
}
/* R2-D2の左のパーツ3 */
.r2d2-parts-left3{
  margin-left: 5px;
  height: 20px;
  width: 15px;
  border-radius: 3px;
  background: #0685B7;
}
/* R2-D2の左のパーツ4 */
.r2d2-parts-left4{
  margin-left: 5px;
  margin-top: 2px;
  height: 18px;
  width: 18px;
  border-radius: 3px;
  background: #0685B7;
}
/* R2-D2の中央のパーツ */
.r2d2-parts-center{
  margin-left: 5px;
  margin-top: 2px;
  height: 18px;
  width: 30px;
  border-radius: 3px;
  background: #0685B7;
  position: relative;
}
/* R2-D2の中央のパーツの中身 */
.r2d2-parts-center-eye{
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #FF5657;
}

/* R2-D2の右のパーツ1 */
.r2d2-parts-right1{
  margin-left: 5px;
  margin-top: 2px;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #A6A6A6;
  position: relative;
}
/* R2-D2の右のパーツ1の中身 */
.r2d2-parts-right1-eye{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #535353;
}
/* R2-D2の右のパーツ2 */
.r2d2-parts-right2{
  margin-left: 5px;
  margin-top: 2px;
  height: 18px;
  width: 18px;
  border-radius: 3px;
  background: #0685B7;
}
/* R2-D2の右のパーツ3 */
.r2d2-parts-right3{
  margin-left: 5px;
  height: 20px;
  width: 15px;
  border-radius: 3px;
  background: #0685B7;
}
```

### R2-D2の下の青い帯のような部分
R2-D2の下の青い帯のような部分を描きます
要素を中央下の方に配置して、高さを10px、横幅を100%にして、背景色を変えています。

```html:HTML
<div class="r2d2-band"></div>
```
```css:CSS
/* R2-D2の下の青い帯のような部分 */
.r2d2-band{
  position: absolute;
  bottom: 10px;
  height: 10px;
  width: 100%;
  background: #0685B7;
}
```

## まとめ
今回使ったCSSは、基本的なものばかりで、これらを駆使すればどんなものでも描けます。(平面的なものであれば)
CSSを使って絵を書いたりと、ゲーム感覚で学んでいくと学習効率が上がりますね(^^)

この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)