第1回：HTML5&CSS3でポケモン描こうZ!【モンスターボール】
突然ですが、HTML5とCSS3でお絵かきしようZ！ というわけで、ポケモン描きます。第1回ということで、まずはモンスターボールを描いてみました。（『ポケモン』じゃねぇ）
四の五の言わずにひとまずこちら。カーソルを合わせてみてネ☆
こいつ……動くぞ！
なお、絵ではなく、すべてHTML5とCSS3のみで作成しました。HTMLとCSSは、絵が上手な人もヘタな人も、みんな平等に描けるんだぜ……！
<div class="ball_box">
<div class="ball">
<div class="bottom">
<div class="highlight"></div>
<div class="red"></div>
<div class="center"></div>
<div class="switch"></div>
</div>
</div>
</div>
/* ボール箱 */
.ball_box {
height: 100px;
margin: 20px;
}
/* 回転時間 */
.ball {
transition: 1s;
position: absolute;
}
/* ぐるんと一週 */
.ball:hover {transform: rotateZ(360deg);}
/* ボール赤部分 */
.red {
width: 100px;
height: 50px;
position: absolute;
z-index: 11;
border-radius: 60px 60px 0 0;
background: linear-gradient(120deg, #ec6d71 10%, #e83929 60%, #9e3d3f);
}
/* ボール黒部分 */
.center {
width: 100px;
height: 55px;
background-color: #383c3c;
position: absolute;
z-index: 10;
border-radius: 60px 60px 0 0;
}
/* ボール白部分 */
.bottom {
width: 100px;
height: 100px;
position: relative;
z-index: 1;
border-radius: 100%;
background: linear-gradient(120deg,#f7fcfe 10%, #f3f3f3 60%, #dddcd6);
}
/* 開閉スイッチ */
.switch {
width: 10px;
height: 10px;
border-radius: 100%;
background-color: #f3f3f3;
position: absolute;
z-index: 12;
border: solid 4px #383c3c;
margin: 45px 40px;
}
/* ハイライト */
.highlight {
width: 20px;
height: 10px;
border-radius: 100%;
transform: rotate(-45deg);
background-color: hsla(0,0%,100%,0.6);
box-shadow: 0 0 3px 2px hsla(0,0%,100%,0.6);
position: absolute;
z-index: 13;
margin: 15px 10px;
}
いきなりゼンリョクのソースコードさらす。
めんどくさい人はこれだけコピペしてご自身のサイトに貼っつけちゃってOKです。
この文字の羅列が、ブラウザで開くと絵になって表示されるんだぜ……
ではゼンリョク解説行くZ！
まずはベースを描いていきます。クラスセレクタの名前はわりと適当。ベテランの人は好みの名前に変えてください。
<div class="bottom"></div>
<div class="red"></div>
<div class="center"></div>
/* ボール赤部分 */
.red {
width: 100px;
height: 50px;
background: #e83929;
}
/* ボール黒部分 */
.center {
width: 100px;
height: 55px;
background-color: #383c3c;
}
/* ボール白部分 */
.bottom {
width: 100px;
height: 100px;
background: #f3f3f3;
}
あんたこれ並んどるだけやん！
そう、赤と黒が並んでるだけなので、重ねる必要があります。
そこでCSSのZ技だ！
新しいZ技です。うそです。
つーてもぶっちゃけ、z-indexは重ねる順番を指定するだけですが……
position要素とセットで使いましょう。つか、セットじゃないと意味ない要素です。
でんき技オンリーのピカチュウにフェアリーZ持たせたところでラブリースターインパクト使えないのと同じ仕組みです。違いますかそうですか。
/* ボール赤部分 */
.red {
width: 100px;
height: 50px;
background: #e83929;
position: absolute;/*←追加*/
z-index: 11;/*←追加*/
}
/* ボール黒部分 */
.center {
width: 100px;
height: 55px;
background-color: #383c3c;
position: absolute;/*←追加*/
z-index: 10;/*←追加*/
}
/* ボール白部分 */
.bottom {
width: 100px;
height: 100px;
background: #f3f3f3;
position: absolute;/*←追加*/
z-index: 1;/*←追加*/
}
z-indexの数字は重ね順です。数字が小さいと下に、大きいほど上に重なります。
数字は特にこだわる必要はないので、自分がわかりやすいように勘と直感とノリで指定してOK。
（後で追加することを考えると、数字と数字の間は大きめにとったほうがいいかな）
重なりました。
もうこれだけでモンスターボールっぽいんだから不思議。
サクサク仕上げに行きましょう。
/* ボール赤部分 */
.red {
width: 100px;
height: 50px;
background: #e83929;
position: absolute;
z-index: 11;
border-radius: 60px 60px 0 0;/*←追加*/
}
/* ボール黒部分 */
.center {
width: 100px;
height: 55px;
background-color: #383c3c;
position: absolute;
z-index: 10;
border-radius: 60px 60px 0 0;/*←追加*/
}
/* ボール白部分 */
.bottom {
width: 100px;
height: 100px;
background: #f3f3f3;
position: absolute;
z-index: 1;
border-radius: 100%;/*←追加*/
}
一番下になる白はまん丸にするため、100%指定。
上の赤と黒は、上半分だけまん丸にせねばならないので細かく指定する必要があります。
『border-radius: 60px 60px 0 0;』というのは、『角を丸くしてください。左上を60px、右上は60px、右下が0px、左下も0pxです』という意味。
まとめて指定する場合は、指定する箇所は時計回りと覚えましょう。
黒取っ払って『ビリリダマの背中』でもいけますが、開閉スイッチを付けましょう。
HTMLにdiv追加です。
<div class="bottom"></div>
<div class="red"></div>
<div class="center"></div>
<div class="switch"></div><!--←追加-->
CSSにも以下のソースを新たに追加。
/* 開閉スイッチ */
.switch {
width: 10px;
height: 10px;
border-radius: 100%;
background-color: #f3f3f3;
position: absolute;
z-index: 12;
border: solid 4px #383c3c;
margin: 45px 40px;
}
ポイントはborder要素です。
黒丸と白丸を作って重ねて……という方法もありますが、面倒だしソースコードが増えるので。
border要素とは、早い話が枠線を引いたりする要素。上だけとか下だけとか、細かく指定も出来ます。
ここで書いた『border: solid 4px #383c3c;』というのは、『線を引きます。線の種類は直線です。太さは4pxで、色は#383c3cです』と言ってるんですね。
これで黒い枠線が引かれた小さな白い四角が出来ます。そして、『border-radius: 100%』で丸くし、スイッチ完成。
一番上に重なるよう、z-indexで指定する数字は一番大きくしましょう。
あとはmarginで中央に来るよう、位置を調節です。
完成だZ!
……さてお気づきでしょうが、一番最初のデモと違いますね。単色でのっぺりしています。
使いどころによってはこのほうがポップな感じがしていい場合もありますが、せっかくなのでここから一工夫といきましょう。
ボールに影をつけて、立体的に仕上げていきます。
centerはそのままに、bottomとredのbackgroundで指定した色を、グラデーションに書き換えます。
/* ボール赤部分 */
.red {
width: 100px;
height: 50px;
/*background: #e83929; ←これを消して*/
position: absolute;
z-index: 11;
border-radius: 60px 60px 0 0;
/*↓こっちに書き換え*/
background: linear-gradient(120deg, #ec6d71 10%, #e83929 60%, #9e3d3f);
}
/* ボール白部分 */
.bottom {
width: 100px;
height: 100px;
/*background: #f3f3f3; ←これを消して*/
position: relative;
z-index: 1;
border-radius: 100%;
/*↓こっちに書き換え*/
background: linear-gradient(120deg,#f7fcfe 10%, #f3f3f3 60%, #dddcd6);
}
説明しよう！ たとえばbottomの『(120deg,#f7fcfe 10%, #f3f3f3 60%, #dddcd6)』というのは、訳すと「まず120°に傾けて、最初は#f7fcfeの色を10%の所まで、次は#f3f3f3を60%まで、最後は#dddcd6を最後までにしてネ☆」と指定しているのだ！
やろうと思えばもっと細かく指定したり、ボーダー柄もこれで作れますが、詳しくはGoog（以下略）
さて、この変で『bottom』の『/div』で全体を囲みましょう。
全体を囲むことで崩れが防げます。
<div class="bottom"><!--←ここにあったdivを-->
<div class="red"></div>
<div class="center"></div>
<div class="switch"></div>
</div><!--←こっちに移動-->
グラデーションで立体的になりました！
以前はブラウザごとに指定とか必要でしたが（詳しくは『ベンダープレフィックス』でググれ！）、いつの間にか対応されたようなので不要に！ ええこっちゃ。
CSSに新たに追加です。
/* ハイライト */
.highlight {
width: 20px;
height: 10px;
border-radius: 100%;
transform: rotate(-45deg);
background-color: hsla(0,0%,100%,0.6);
box-shadow: 0 0 3px 2px hsla(0,0%,100%,0.6);
position: absolute;
z-index: 13;
margin: 15px 10px;
}
作業としては、丸を作り、重ねるわけですが、それだけだと浮いて見えます。
そこでまずは丸をぼかすため、box-shadowを使います。
『box-shadow: 0 0 3px 2px hsla(0,0%,100%,0.6);』というのは、訳すと『ボックスに影をつけます。横のずれは0px、縦のずれは0px、ぼかす距離は3px、広がりは2pxです。色はhsla(0,0%,100%,0.6)です』という具合です。
ぼかす範囲を広くしすぎるとボールからはみ出てしまうので小さめに、また、半透明にしたかったので、色指定はhslaで指定。
なんのこっちゃという人はGoogle先生に（略）
円形に沿うように、transfoemで角度を指定します。
おっと、HTMLにも追加せねば。
<div class="bottom">
<div class="highlight"></div><!--←追加-->
<div class="red"></div>
<div class="center"></div>
<div class="switch"></div>
</div>
完成だーーーーーーーーーー！
いやー、長くなりましたが、完成ですね。立体感も出て我ながらいい感じー！ に仕上がりました。
さて、これにて第1回、ゼンリョクHTML5講座は終了……
…………………
まだだ……
お前のゼンリョクはまだまだこんなもんじゃねぇ……！
さて、たしかに形は出来たけど、このままだとページ内のどこかに飾ろうとした時、崩れたりするんですね。
せっかくなので動きも欲しいところです。
新たに追加。これで最後です。
/* ボール箱 */
.ball_box {
height: 100px;
margin: 20px;
}
/* 回転時間 */
.ball {
transition: 1s;
position: absolute;
}
/* ぐるんと一週 */
.ball:hover {transform: rotateZ(360deg);}
<div class="ball_box"><!--←追加-->
<div class="ball"><!--←追加-->
<div class="bottom">
<div class="highlight"></div>
<div class="red"></div>
<div class="center"></div>
<div class="switch"></div>
</div>
</div><!--←追加-->
</div><!--←追加-->
作った作品を、崩れないよう箱に入れる感じと言えばイメージしやすいでしょうか。
一番外側の『ball_box』は高さ指定の要素とmarginで余白を入れています。背景に色を置きたい時は、backgroundで背景色を指定しましょう。
その下の『ball』にはtransitionで動きにかかる時間等を指定。hoverの『transform: rotateZ(360deg)』というのは、要するに『カーソルを置いたら真ん中を軸に360°回転』という意味です。
これでぐるんと一回転するモンスターボールの完成です！
ここに書いてあるソースコードを書けば、おまいのサイトにぐるんと回るモンスターボールがやってくる！
さて、みなさん無事に出来たでしょうか？
ずれたりする時は、『閉じタグを忘れてた』『誤字脱字』『余計な空白消したら行けた』等、ささいなことが原因だったりしますので、慌てずよーくチェックしましょう。
実はこのページのソースでサンプル作ってる時も、なぜか表示がずれて何が原因かと色々試したら、閉じタグとコメントタグの1マスの隙間が原因だったんだわさ……）
第2回はモクローだよ！