はじめまして! HTMLファイ部(内定者)の、のびーです。

4月の入社に向けて、せっせと勉強をしているアルバイターです。

jsdo.itでは、なんと本日、「HTML5実力テスト 応用編」をリリースしました！！
http://jsdo.it/blog/2013/01/html5cat-update.html
リリースを記念して、テスト問題にも出題される、「CSSで絵を描く」ことをテーマに記事を書いてみます！

※ 文中の例について、ChromeとFirefoxとOperaいずれの最新版とIE10が対応しています。

CSSだけで絵を描く!?

さて突然ですが、こちらのイラストをご覧下さい。

はい、絵本に出てきそうな、おひさまです。
そしてこのイラスト、実はCSSだけで描かれています。

「CSSって、Webのレイアウトをするためのものじゃないの?」、と思う方もいるかとは思いますが、
断言します。いまCSSお絵描きが熱いんです!!

今回の記事では、このイラストの作り方について説明しながら、
CSSお絵描きの楽しさを伝えられたらなと思います。

基本の図形 -○と△と□と-

ではさっそく、先程のイラストの解説を...と言いたいところですが、
まずは基本的な図形の描き方から、紹介しようと思います。

実際にjsdo.itで描いてみたので、クイズだと思って見てみてください。
それぞれの図形を、CSSでどうやって描くのか分かりますか?

四角形と丸の描き方

まず四角形は、簡単ですね。
HTMLの要素は放っておけばみんな四角いので、
大きさと色(background-color)を指定すれば、めでたく長方形が描けました。

丸もなんてことはありません。
要素の角を丸くする、CSS3のborder-radiusを使えばOK。
下のアニメーションも参考にしてみてください。

三角形はborderで!

ちょっと謎なのは三角形です。
三角形は、丸のように四角形に手を加えて描くことは難しいですね。
ですが、実はborderを使うと描けるんです!

バツ印は組み合わせと回転!

バツは、長方形の交差と考えれば、2つのパーツに分けられますね。

2つの図形を組み合わせて何かを描きたい場合は、
もちろんHTML要素を2つ使ってもよいのですが、

疑似要素:afterや:beforeを使って表現すれば、
HTML上では1タグだけで描けます。

パーツが２つ作れたら、それぞれCSS3のtransform rotateを使って回転させましょう。
これでバツ印もプラスも描けますね!

どうでしょう? なんとなく描き方のイメージがつかめたでしょうか?
実際のコードを詳しく見たい方は、上のサンプルのCSSタブから読んでみてください。

おひさまは影でできている

さぁ、丸や三角が描けるようになったところで、もういちど最初のイラストを見てみましょう。

まず、HTMLがdiv1個しかないわりに、図形がたくさんありますね。
半円や、ウィンクした目の形も、出てきました。

本体と周りのほわほわ

このように、要素の数より描いてるモノのほうが明らかに多いときは、
どうすればよいのでしょう? 鍵はCSS3のbox-shadowです。

box-shadow: 5px 5px 5px black;

要素に、簡単にこんな感じのドロップシャドウを付けられるbox-shadow、
実はコンマで区切ることで、影をいくつも付けることが可能です。こんな感じ。

box-shadow: 5px 5px 5px black, 100px 5px 5px black, 200px 5px 5px black;

全然関係ない場所に影が出ましたね。
そしてこれらの影には、それぞれにぼかしの半径・カラー・サイズ調整を設定できるので...

box-shadow: 5px 5px 5px black, 100px 0px 0px -5px red, 200px 0px 0px -10px blue;

わーい、こんなこともできます!
つまり、box-shadow を使えば、
元の図形と同じシルエットの図形を、好き勝手に増やしまくれるのです。

おひさまと周りのほわほわは、これを使っています。
本体の形状を円にしたあと、
サイズをかなり小さく設定したbox-shadowを、周りに配置しています。

また、目の部分も同様に、box-shadowをフル活用しています。
ポイントは、おひさまの体と同じ色の丸を、黒丸にずらして重ねることで、ウィンクした目を表現しているところです。

ぱっくりと開いた半円形の口は、widthとheightをゼロにして、borderだけで描いています。
border-topとborder-rightだけに色をつければ、ばっちり半円になるはずです。

達人の作品たち!

おつかれさまでした! これで、CSSで絵を描くために必要な知識は、ほとんど紹介しました。
あと必要なのは、これらをどうやって組み合わせるか、というアイデアです!

そこで今度は、CSSお絵描きの達人たちが、jsdo.itに投稿した作品たちを紹介していきます。
みなさん、クオリティの高いキャラクターの絵を描いていらっしゃいますね!

また、CSSで描けばアニメーションとの相性も良いですね。
そうした演出の方法にも、注目してみましょう。

1DIV リラックマ（Firefox推奨）

1DIV クマ吉 forked from: 1DIV リラックマ

CSS3でサルをカク

CSSでキュウべえ(FULL)を描いてみた

体装着 forked from: 口パク forked from: しゃべる（chromeのみ） forked from: 植毛済み forked from: CSS3のミサワ

CSS3で笑い男

お絵描き教室、まとめ

いかがだったでしょうか?
CSSをマニアックに使ったお絵描き、興味を持って頂けましたか?

では最後にまとめとして、CSSでお絵描きをする工程を整理してみます。

1. 描きたいものを決める
2. 細かくパーツに分ける(丸・三角・四角・その他・これらの変形)
3. ひとつひとつ描いていく
   • 丸や四角なら、要素をそのまま使って描く
   • 三角や扇形、直線や円弧なら、境界線を使って描く
   • 丸や四角をたくさん描きたいなら、box-shadowを使う
   • 必要に応じて、:afterや:beforeを使って図形を増やしてもいい
4. position:absoluteやposition:relativeやmarginをうまく使って、それぞれのパーツを位置合わせする。

この流れにそっていけば、たいていのものは描くことができるはずです!

お絵描きを習得したあなたへお知らせ!

jsdo.it内で行なわれている、
第二回全国統一 HTML5実力テスト 応用編コース、
今日から受験可能となっています。

応用編の問題は、以前より更に実践的になりました。
問題の形式も「ドラッグ&ドロップで穴埋め問題」「コード記述問題」など
実際のコーディングに近いものになっています。

そして実は、この応用編のHTML/CSSコースの中に、↓こんな図形をCSSで描く問題があるんです。

この記事を最後まで読んで来た皆さんには、もう簡単ですよね!

「ちまちま選択するだけの問題じゃ簡単すぎるわ! ものたりないね!!」というあなたや、
「プログラミングは直接書くものだよ! 記述問題なら自信ある!」というあなたも、
もちろん大歓迎! ぜひ今回の応用編を受験してみてください。

http://jsdo.it/event/html5cat/2012/autumn/

HTML5実力テスト 応用編で、みなさんがスキルを披露しに来てくれるのを、
楽しみに待っています!!