夏休みですね。毎年この時期は夏休み子ども科学電話相談を聴きながら作業するんですが、先週からしばらく放送がお休みに入ってしまったのでちょっと寂しいです。

聴いてるうちに「夏休みだ！何かやらないと！作らないと！」という気分になってきたので、夏休みの宿題気分でCSSに挑んでみました。

CSSで絵を描く人々がいるらしい

CSSでお絵かきするという記事を複数見つけまして、
HTML/CSSで絵を描く猛者が作品を公開中 – Gigazine
CSSで「心がぴょんぴょんするイラスト」描いてみた。 – Qiita

夏休みの工作 兼 自由研究ということで、自分でも挑戦してみました。
大人だから夏休みじゃないけど！

カブトムシ描いてみた

久しぶりに子どもの頃の昆虫図鑑を出してきたりして頑張ってみました。こんな時に役に立つとは。捨てずに取っておいて良かった。
そういえば脚の位置はこうだったなあとか、脚のトゲトゲとか、よく見ながら絵にしていくことで理解も深まりました。
私はカナブンとかカマキリとかバッタとか緑色の虫が好きで、カブトやクワガタは採った事ないんですよ。これまでにカブトムシについてここまで凝視することはなかったです。

さて、出来上がりです。

デモはCodePenでご覧ください。

• パーツは全て絶対値指定
• 左半身を右の中心線に合わせて組み立て
• 左半身をコピーしたものにtransform: scale(-1, 1)を指定して右半身を作成
• くねくねした線はborder,border-radiusで作成
• 脚のイガイガはborderで三角形を作りtransfomで伸縮させて組み合わせ
• ツノは三角形と四角形の組み合わせ
• box-shadowやグラデーションのdivで立体感を出す

そんなこんなでできています。

昆虫の曲線の表現って難しいなあ……。