明日から本気出す

※本日の本気はお休みです。

  1. TOP
  2. Web知識
  3. 第2回：HTML5&CSS3でポケモン描こうZ!【モクロー】

第2回：HTML5&CSS3でポケモン描こうZ!【モクロー】

｜
HTML5

第2回はSMのかわいい担当、モクローさんをHTMLとCSSで描きましょう！　魅惑のまんまるボディで、意外とそっくりに描けました。

第1回はコチラ

第1回：HTML5&CSS3でポケモン描こうZ!【モンスターボール】

くちばしの色は……まあ、顔と同化しちまうんで色つけてあります。下半分も、白背景でも見えるギリギリのグレー系にしときました。
モンスターボールからいきなり難易度上がったっぽいけど、恐れるな！　おまいらなら出来る！

ちなみに、今回のポイントはこちら。

POINT影をつけるだけじゃない！　『box-shadow』を使いこなせ！

名前からして『箱に影をつける』プロパティなのですが、同じパーツを複数用意する時、とっても使える子です。
解説入る前に、今回もいきなりゼンリョクのソースコードを晒すぜ！ 


<div class="mokuro">
<div class="base_wt">
<div class="base_bt"></div>
<div class="base_top"></div>
<div class="wing"></div>
<div class="reef"></div>
<div class="reef_2"></div>
<div class="leg"></div>
<div class="face naname">
<div class="white"></div>
<div class="eye"></div>
<div class="eye eye_right"></div>
<div class="beak_bt"></div>
<div class="beak"></div>
<div class="beak_line"></div>
</div>
</div>
</div>



.mokuro {
margin: 15px;
padding: 20px;
position: relative;
z-index: 0;
}
/* 体ベース */
.base_wt {
width: 120px;
height: 125px;
border-radius: 60px 60px 40px 40px;
background-color: #f2f2f2;
}
.base_top {
width: 120px;
height: 85px;
border-radius: 60px 60px 0 0;
background-color: #e3b98f;
position: absolute;
z-index: 10;
}
.base_bt {
width: 25px;
height: 35px;
background-color: #e3b98f;
border-radius: 100%;
position: absolute;
z-index: 11;
margin: 70px 0;
box-shadow: 20px -5px 0 #e3b98f, 75px -5px 0 #e3b98f, 95px 0 0 #e3b98f;
}
/* 翼 */
.wing {
width: 20px;
height: 55px;
border-radius: 100%;
background-color: #e3b98f;
position: absolute;
z-index: -1;
margin: 50px -5px;
box-shadow: 110px 0 0 #e3b98f;
}
/* あんよ */
.leg {
width: 10px;
height: 10px;
border-radius: 100%;
background-color: #f17945;
position: absolute;
z-index: 12;
margin: 120px 30px;
box-shadow: 10px 0 0 #f17945, 40px 0 0 #f17945, 50px 0 0 #f17945;
}
/* お面 */
.white {
background-color: #fff;
width: 55px;
height: 50px;
border-radius: 100%;
position: absolute;
z-index: 20;
margin: 20px 10px;
box-shadow: 45px 0 0 #fff;
}
/* くちばし下 */
.beak_bt {
width: 16px;
height: 20px;
background-color: #f67645;
border-radius: 100%;
position: absolute;
z-index: 21;
margin: 50px 52px;
}
/* くちばし */
.beak {
width: 20px;
height:25px;
background-color: #ffe7d0;
border-radius: 100%;
position: absolute;
z-index: 22;
margin: 40px 50px;
}
/* くちばしライン */
.beak_line {
height: 15px;
border-left: solid 1px hsla(18, 73%,70%,0.5);
position: absolute;
z-index: 23;
margin: 50px 60px;
}
/* おめめ */
.eye {
width: 8px;
height: 15px;
background-color: #fff;
border-radius: 100%;
position: absolute;
z-index: 23;
margin: 30px 25px;
border: solid 6px #000000;
}
.eye_right {margin-left: 75px;}
/* 蝶ネクタイ */
.reef {
width: 25px;
height: 15px;
border-radius: 100%;
background-color: #2fbe89;
position: absolute;
z-index: 40;
margin: 75px 35px;
box-shadow: 23px 0 0 #2fbe89;
}
.reef_2 {
width: 15px;
position: absolute;
z-index: 41;
margin: 81px 42px;
border-top: solid 1px hsla(129, 100%, 24%, 0.5);
box-shadow: 20px 0 0 hsla(129, 100%, 24%, 0.5);
}
/* お顔動き */
.face {
width: 100px;
height: 50px;
display: block;
position: absolute;
z-index: 30;
}
.naname {
transition: 2s;
transform-origin: 50% 100%;
}
.naname:hover {transform: rotate(25deg);}

いいか！　がんばって削れるとこ削ってこの長さだからな！
『box-shadow』のありがたみを思い知れ！

あ、それと、今回はページそのものがさらに長くなるんで、『HTML』の解説は省くよ。上の完成形を参考にしてね☆

だいたい同じプロパティ名の繰り返しだよね。

お気づきでしょうか。CSSのソースコードを見ると、だいたい下のヤツを繰り返し書いてるということに。


width　←横幅
height　←縦幅
border-radius　←角を丸く
background-color　←背景色
position　←要素を重ねる
z-index　←重ねる順番の指定
margin　←要素を配置する位置指定

だいたいこれらのプロパティ名を覚えれば、誰でもCSSでお絵かきが出来るようになります。
パーツごとに色や形、位置を変えてるだけなんですね。
それではさっそく描いていきましよう！

ベースの角丸は四箇所個別指定で

ベースとなる胴体から行きましょう。
初っぱなから飛ばしてる感じですが、白の楕円を作り、その上に茶色を重ねてるだけです。

白背景に置いたとき、背景と同化してしまうので、下半身は薄いグレーにしました。
ポイントとなる角丸は、『border-radius:100%』だときれいな楕円になっちゃうので、『border-radius: 60px 60px 40px 40px』と角ごとに指定することで、お尻が丸くなりすぎるのを防ぎます。
指定箇所は左上、右上、右下、左下の順番で、左上から時計回りと覚えましよう。これがベースの形となります。


/* 体ベース */
.base_wt {
width: 120px;
height: 125px;
border-radius: 60px 60px 40px 40px;
background-color: #f2f2f2;
}
.base_top {
width: 120px;
height: 85px;
border-radius: 60px 60px 0 0;
background-color: #e3b98f;
position: absolute;
z-index: 10;
}
.base_bt {
width: 25px;
height: 35px;
background-color: #e3b98f;
border-radius: 100%;
position: absolute;
z-index: 11;
margin: 70px 0;
box-shadow: 20px -5px 0 #e3b98f, 75px -5px 0 #e3b98f, 95px 0 0 #e3b98f;
}

そして茶色部分はベースの白に重ねて作ります。
一見難しく見えますが、茶色の半円に楕円を四つ重ねただけです。（色を変えてみると一目瞭然）
『border-radius: 60px 60px 0 0』で左上、右上を丸く、右下、左下を『0』にすることで、半円が作れます。
そして同色の楕円を四つ作って重ねるわけですが、ここで登場。『box-shadow』です！

POINT同じパーツを一行で追加せよ！

説明しよう！　普通に作ろうとすると、同じクラスセレクタを四つも用意する必要がある！
が、しかし！　たった一行『box-shadow』を追加するだけでその面倒がなくなるのだ！


box-shadow: 20px -5px 0 #e3b98f, 75px -5px 0 #e3b98f, 95px 0 0 #e3b98f;

値の順番は『右に動かす距離、下に動かす距離、ぼかす範囲、影の色』です。
上記を訳すとこんな感じ。『影をつけます。まず20px右にずらします。続けて上に5px動かします。ぼかす範囲は0です。色は#e3b98fです』。
『,』で区切ることで、複数指定可能です。

この場合、一番左の丸をベースに、『box-shadow』で二つ目、三つ目、四つ目の丸を作っていることになります。
『boxshadow』の仕組みは、元の要素をぼかすのではなく、『もう一つ同じ形のものを後ろに用意してそれをぼかす』なので、
それを利用して同じパーツを作ってるわけですね。
これで長くなりがちなソースコードも、短くすることが出来ます。

ところでデモをご覧になって、体がなんか筒状？　で、『すとーん』とした感じがしませんか？　『border-radius』の限界か……！
ここは翼をつけて、丸みを出しましよう。

つばさをください

はい、ここでも『box-shadow』が活躍します。
縦長の楕円を作り、両サイドに来るよう位置を調節。
ベースの白い部分より下になるよう、『z-index』をマイナス指定しました。
白より上にくると色が同化して肥えたモクさんになってまうんや……


/* 翼 */
.wing {
width: 20px;
height: 55px;
border-radius: 100%;
background-color: #e3b98f;
position: absolute;
z-index: -1;
margin: 50px -5px;
box-shadow: 110px 0 0 #e3b98f;
}

オマケのぱたぱたバージョン。翼の部分を書き換えるだけ。


/* ぱたぱた */
.wing_patapata {
width: 50px;
height: 25px;
border-radius: 100%;
background-color: #e3b98f;
position: absolute;
z-index: -10;
margin: 40px -40px;
box-shadow: -10px 20px 0 #e3b98f,5px 40px 0 #e3b98f,150px 0px 0 #e3b98f,160px 20px 0 #e3b98f,140px 40px 0 #e3b98f;
} 
.wing_patapata_g {
width: 30px;
height: 20px;
border-radius: 100%;
background-color: #2fbe89;
position: absolute;
z-index: -9;
margin: 50px -20px;
box-shadow: -5px 15px 0 #2fbe89,5px 28px 0 #2fbe89,130px 0px 0 #2fbe89,135px 15px 0 #2fbe89,125px 28px 0 #2fbe89;
}
.wing_patapata_2 {
width: 30px;
height: 20px;
border-radius: 100%;
background-color: #e3b98f;
position: absolute;
z-index: -8;
margin: 50px -10px;
box-shadow: -5px 15px 0 #e3b98f,0px 28px 0 #e3b98f,110px 0px 0 #e3b98f,115px 15px 0 #e3b98f,110px 28px 0 #e3b98f;
}

ここでも『box-shadow』が活躍。
左上の楕円を基準に並べてるだけです。横の位置をずらすだけで、全部同じ楕円に見えない不思議。
形作って重ねる！　形作って重ねる！　ぶっちゃけこれの繰り返し！

お顔をつけよう。くちばしもネ☆

『box-shadow』の使い方、わかってきたんじゃないでしょうか？
しつこいですが、CSSのお絵かき、基本は形を用意して重ねる。これだけ！


/* くちばし下 */
.beak_bt {
width: 16px;
height: 20px;
background-color: #f67645;
border-radius: 100%;
position: absolute;
z-index: 21;
margin: 50px 52px;
}
/* くちばし */
.beak {
width: 20px;
height:25px;
background-color: #ffe7d0;
border-radius: 100%;
position: absolute;
z-index: 22;
margin: 40px 50px;
}
/* くちばしライン */
.beak_line {
height: 15px;
border-left: solid 1px hsla(18, 73%,70%,0.5);
position: absolute;
z-index: 23;
margin: 50px 60px;
}

くちばしのラインははっきりしすぎると浮いて見えたので、hslaで半透明に。
おっと、足忘れるところだった。


/* あんよ */
.leg {
width: 10px;
height: 10px;
border-radius: 100%;
background-color: #f17945;
position: absolute;
z-index: 12;
margin: 120px 30px;
box-shadow: 10px 0 0 #f17945, 40px 0 0 #f17945, 50px 0 0 #f17945;
}

ここも『box-shadow』が活躍。あと一息だ！

『マルチクラス』でつぶらなひとみを作ろうZ！

お目々だけは『box-shadow』が使えないんですよねー。
原因は、白丸の周りを『border』で黒くしてるから。（モンスターボールのスイッチでやりましたね）
で、どうするかというと、『黒丸と白丸のクラスセレクタを二つ用意して重ねる』という方法もありますが 、ここは『マルチクラス』の出番だ！

POINTクラスセレクタは何個でも指定出来る！

『マルチクラス』とは、class属性にクラスセレクタを複数指定することが出来ます。
（←なんかわけわからんこと言ってますが、まあ、そういうもんだと流せ）
今回の場合、まったく同じクラス指定したdiv要素を二つ用意し、
そしてもう片方のdivに『margin』で位置指定しただけのクラスを指定するだけ！
これで、同じパーツで位置だけずらすことが出来ました。
実質、CSSに加えるのは『.eye_right』と書いてる一行だけです。


/* おめめ */
.eye {
width: 8px;
height: 15px;
background-color: #fff;
border-radius: 100%;
position: absolute;
z-index: 23;
margin: 30px 25px;
border: solid 6px #000000;
}
.eye_right {margin-left: 75px;}



<div class="eye"></div>
<div class="eye eye_right"></div>

HTMLを見てください。『<div class=”eye”></div>』は左目です。
二行目は『<div class=”eye eye_right”></div>』と、『eye』と『eye_right』の二つのクラスが書かれています。
『eye』で一行目と同じ目を作り、『eye_right』で位置をずらしているのです。
これが『マルチクラス』です。

POINT後から書いたものが上書きされる！

CSSとは上から順に読み込まれます。その際、もしクラスセレクタがダブって書かれていた場合、後から書かれたものが上書きされて、そちらが表示に反映されます。
これを利用して、目の位置を変えてるんですね。
なので、右目の位置を指定するクラスセレクタは、左目の後に書きましょう。


/* ↓同じクラスがふたつある場合…… */
.box {
width: 100px;
height: 150px;
background-color: blue;
}
/* ↓こっちが上書きされて、横幅100px、高さ250pxの赤が表示される！ */
.box {
height: 250px;
background-color: red;
}

他にも、この『マルチクラス』を使えば、『まったく同じ形のボタンをもうひとつ置きたい。ただし色は別』という時など、
色を指定したクラスを一行用意し、HTMLに追加するだけでいいわけです。便利！

蝶ネクタイつけて完成！

さて、仕上げと行きましょう！


/* 蝶ネクタイ */
.reef {
width: 25px;
height: 15px;
border-radius: 100%;
background-color: #2fbe89;
position: absolute;
z-index: 40;
margin: 75px 35px;
box-shadow: 23px 0 0 #2fbe89;
}
.reef_2 {
width: 15px;
position: absolute;
z-index: 41;
margin: 81px 42px;
border-top: solid 1px hsla(129, 100%, 24%, 0.5);
box-shadow: 20px 0 0 hsla(129, 100%, 24%, 0.5);
}

ちよっと小さい？　大きさなど、バランスを見ながら自由に調節してください。
くちばし同様、半透明にしたラインを重ねて完成！

これだけで終了はつまらんので、もう一工夫と行きましょう。

『transform』でお顔を動かせ！

第1回でやった、『カーソル置くとくるりん回転』です。一回転は厳しいもんがあるんで、ちょっと小首を傾げる感じに。
顔にあたる部分を囲み、『transform』で動かします。


/* お顔動き */
.face {
width: 100px;
height: 50px;
display: block;
position: absolute;
z-index: 30;
}
.naname {
transition: 2s;
transform-origin: 50% 100%;
}
.naname:hover {transform: rotate(25deg);}

完成版のHTMLを見ると、顔を囲むコードが、『<div class=”face naname”>』となってますね。
ちょっとでもコードは短くしたいので、顔を囲む『face』と、動きを指定している『naname』をマルチクラスでひとまとめにしました。

オマケの後ろ姿。さて、どこが動くでしょーか？

尾羽は緑の楕円を作って、z-indexで重ね順を指定。さらに尾羽のパーツをdivで囲んで、『toransform』で上下に動くよう指定。
ちなみに後頭部は、茶色の丸を三つ並べて本体力ラーの丸を重ねているよ！
やる気のある人は、正面をベースに作ってみよう！

さて、これで第2回は終了です。
パーツのサイズと位置を調節すれば『ミニロー』にも『デカロー』にもなります。
2017.9.23追加 一行追加で拡大・縮小可能です！

【HTML5でお絵かき】サイズ変更一行追加で出来るやんと気づいた夏の終わり

次回は『CSSアニメーション』に挑戦だ！
難易度高そうに見えるがここまで来たおまいらならいける！　第1回で作ったモンスターボールガタガタさせっぞ！
バスケもイイね！

第3回：HTML5&CSS3でポケモン描こうZ!【アニメーション】