この内容について
CSSを使ってR2-D2を描けるかをやってみました。
なお、本内容で作るR2-D2は、立体的なものではなく、平面的なデザインのものです。ご了承ください。
今回はあえて、CSSを省略した書き方をしていないです。
見本
今回作成するのは、このようなR2-D2です。
See the Pen
R2-D2 by engineerhikaru (@engineerhikaru)
on CodePen.
R2-D2を描く
リセットCSS
リセットCSSを全部書いときたいところですが、今回はmarginとpaddingだけなくします。
*{margin:0;padding:0;}台紙となるコンテナを用意
今回描くR2-D2の台紙となるコンテナ要素を用意します。
要素を中央に配置して、高さと横幅を300pxにして、背景色を変えています。
<divclass="container"><!-- ここにR2-D2を描く --></div>/* 外枠 */.container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:300px;width:300px;background:#222;}R2-D2の土台
R2-D2の土台となる骨格を描きます
要素を中央に配置して、高さを120px、横幅を200pxにして、上左と上左を丸く変え、背景色を変えています。
<divclass="r2d2-container"><!-- ここにR2-D2の目 --><!-- ここにR2-D2の色々なパーツ --><!-- ここにR2-D2の下の青い帯のような部分 --></div>/* R2-D2の外枠(骨格) */.r2d2-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:120px;width:200px;border-radius:120px120px00;background:#E1E4E8;}R2-D2の目
R2-D2の目を描きます
まず外枠は、要素を中央少し上に配置して、高さを40px、横幅を40pxにして、角を少し丸く変え、背景色を変えています。
中身の目玉は、要素を中央に配置して、高さを30px、横幅を30pxにして、角を丸くし円に変え、背景色を変えています。
<divclass="r2d2-eye-container"><divclass="r2d2-eye"></div></div>/* 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にして、角を少し変え、背景色を変えています。
<divclass="r2d2-parts"><divclass="r2d2-parts-left1"></div><divclass="r2d2-parts-left2"></div><divclass="r2d2-parts-left3"></div><divclass="r2d2-parts-left4"></div><divclass="r2d2-parts-center"><divclass="r2d2-parts-center-eye"></div></div><divclass="r2d2-parts-right1"><divclass="r2d2-parts-right1-eye"></div></div><divclass="r2d2-parts-right2"></div><divclass="r2d2-parts-right3"></div></div>/* R2-D2の目の下のパーツ */.r2d2-parts{position:absolute;top:calc(50%+15px);height:20px;width:calc(100%-20px);padding:010px;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%にして、背景色を変えています。
<divclass="r2d2-band"></div>/* R2-D2の下の青い帯のような部分 */.r2d2-band{position:absolute;bottom:10px;height:10px;width:100%;background:#0685B7;}まとめ
今回使ったCSSは、基本的なものばかりで、これらを駆使すればどんなものでも描けます。(平面的なものであれば)
CSSを使って絵を書いたりと、ゲーム感覚で学んでいくと学習効率が上がりますね(^^)
この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)