この内容について
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にして、背景色を変えています。
<div class="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にして、上左と上左を丸く変え、背景色を変えています。
<div class="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: 120px 120px 0 0;
background: #E1E4E8;
}
R2-D2の目
R2-D2の目を描きます
まず外枠は、要素を中央少し上に配置して、高さを40px、横幅を40pxにして、角を少し丸く変え、背景色を変えています。
中身の目玉は、要素を中央に配置して、高さを30px、横幅を30pxにして、角を丸くし円に変え、背景色を変えています。
<div class="r2d2-eye-container">
<div class="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にして、角を少し変え、背景色を変えています。
<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>
/* 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%にして、背景色を変えています。
<div class="r2d2-band"></div>
/* R2-D2の下の青い帯のような部分 */
.r2d2-band{
position: absolute;
bottom: 10px;
height: 10px;
width: 100%;
background: #0685B7;
}
まとめ
今回使ったCSSは、基本的なものばかりで、これらを駆使すればどんなものでも描けます。(平面的なものであれば)
CSSを使って絵を書いたりと、ゲーム感覚で学んでいくと学習効率が上がりますね(^^)
この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)