この内容について

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

見本

今回作成するのは、このようなR2-D2です。

See the Pen R2-D2 by engineerhikaru (@engineerhikaru) on CodePen.

R2-D2を描く

リセットCSS

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

CSS

*{
  margin: 0;
  padding: 0;
}

台紙となるコンテナを用意

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

HTML

<div class="container">
  <!-- ここにR2-D2を描く -->
</div>

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

<div class="r2d2-container">
  <!-- ここにR2-D2の目 -->
  <!-- ここにR2-D2の色々なパーツ -->
  <!-- ここにR2-D2の下の青い帯のような部分 -->
</div>

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

<div class="r2d2-eye-container">
  <div class="r2d2-eye"></div>
</div>

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

<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

/* 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

<div class="r2d2-band"></div>

CSS

/* R2-D2の下の青い帯のような部分 */
.r2d2-band{
  position: absolute;
  bottom: 10px;
  height: 10px;
  width: 100%;
  background: #0685B7;
}

まとめ

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

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