画像を一切使わずにCSS3だけでドラえもんを描いてみた!

昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、本日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない?という疑問を抱き実際に作ってみました!
今回作成したのは日本人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。
CSS3で作ったドラえもんの完成品!

CSS3 ドラえもん
最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので、そっちをイメージして作りました。注意事項としてはGoogle Chromeとfirefoxで閲覧してください。Operaでは一部CSS3に対応してない部分があります。また、IEはCSS3には全く対応していないので構造が崩れてひどいことになります。
ちなみにGoogle ChromeはCSS3のアニメーションで目が動くおまけ付です!
画像ではない証拠はhtmlとCSSのソースを確認してもらえば分かると思います。まあ、画像と違って右クリックで保存することができないってのも一つの特徴ですかね。どちらにしても、スクリーンショット撮られたら関係ないですけど。。。
各ブラウザの動作

ChromeとFirefoxはCSS3によく対応しておりさすがというべきか、ちゃんと同等に表示できています。Operaはgradientが使えないのでグラデーションを加えられず、ちょっと薄っぺらな印象です。
最後はIEですが、さすがは我らがIEさん!すばらしいオチをつけてくれましたね!
もうIEとかネタでしかないし、早く滅びればいいのにw
作っている途中にも感じましたが、CSS3はブラウザごとに結構挙動が違います。そんな中でもOperaのborder-radiusはちょっと特殊で、口を見てもらえば分かるんですが鋭くなっているんです。最初はもっと口が裂けていて、Operaだけ口裂けお化けみたいになっていたのでものすごく驚きました。
XHTMLの記述とW3Cについて

こんなむちゃくちゃな事をやるってことはhtmlの記述に問題がありそうな気がしますが、その点は全く問題なくXHTML 1.1で製作しています。もちろんW3C Markup Validatorも通りますし、ちゃんと
「This document was successfully checked as XHTML 1.1!」と表示されます。
→W3CでCSS3ドラえもんを確認する
今回のはコンテンツなしのdivタグレイアウトなので通って当たり前なのですが、とりあえずWeb標準で書いていることは確かです。
画像との容量の比較
今回はhtml+CSSで記述しましたが、本来画像ならばどれくらいの容量になるのか調べてみました。用いた画像はGoogle Chromeからスクリーンショットを撮って保存したものです。
この画像との比較を行う意味合いとしては、もともとの容量と画像との容量の差を測ることで、画像を使わずCSS3で描くことのメリットを無理やり探し出すというわけです。
GIF

ファイルサイズ 33.5KB
画像の中では一番圧縮されていますが、画質がいまいちです。GIFの限界は256色なので画質が低下しており、さらにGIF特有のざらつきがちょっと現れています。
JPEG

ファイルサイズ 96.5 KB
こちらのJPEGはフルカラーで作成した場合。フルカラーのため画質は非常によく、きれいなのだが当然のことながら容量が大きくなりました。
PNG

ファイルサイズ 60.2KB
フルカラーでPNGを作成した場合。フルカラーで非常にきれいなのですが、やはり容量が大きくなりました。ファイルサイズと画質を考えると、バランス的にはPNGが画像では一番ですね。
html+CSSの場合

html 2.05KB
CSS 14.2KB
ファイルサイズ 2.05KB + 14.2KB = 16.25KB
html+CSSで作成した場合。さすがに画像を使っていないだけあってか、ファイルサイズは最も小さくなりました。読み込みの速度も速く非常にきれいに表示されます。
※htmlに関してはドラえもんの記述のみを抽出して計算しています。
やはり画像と比較するとファイルサイズはかなり小さくできるようです。画質的にはPNGと同等ですが、PNGの容量はソースコードの4倍ですからね。数が増えればこの差は読み込みに関しても非常に大きく影響を及ぼすことでしょう。
つまり、html+CSSで絵を描くメリットは存在するということです。しかしながら、それを圧縮するための労力と苦労がハンパないので、わざわざ画像を使わずhtml+CSSで書く必要性は皆無ですね。
Pure CSS Design

Pure css design
今回の作品も含め、CSSドラえもんなどの過去作品はPure CSS Designの方で公開中です!興味のある人はぜひご覧ください。近々、もう一つのCSS3作品を公開予定です。
・IE9に対応したCSS3 Draemon Ver2を公開!
・画像を一切使わずにCSS3だけでとある科学の風力発電を描いてみた!
・画像を一切使わずにCSS3だけでとあるぐぬぬの禁書目録を描いてみた!
・IE10,Opera11に対応したCSS3 Draemon Ver3を公開!
今回の個人的感想
今回のCSS3ドラえもんを作ったのは、この馬鹿な企画を通してCSS3のすごさと今後の可能性を皆さんに知っていただけたらと思って実行しました。ぶっちゃけますが、こんなことをするのは明らかに一部の馬鹿か変態のする行為です。
なんせ画像ならimgで貼るだけでできることをわざわざCSSのコードだけで600行近く書くなんて頭がおかしいとしか思えない。作った本人が言うのもあれですが、余程の暇人でない限りCSS3で絵を描くのは人には薦めません。
最初は顔だけの予定でしたのでもっとソースコードが短かったんですが、胴体を加えて影をつけたり細部にこだわり始めたらとまらなくなって、いつの間にか600行にもなっていました。CSSのプロとかならもっと短く書けるかもしれませんが、一介の素人たる私が書くとこんな感じになります。
そんなこんなで今回の企画でCSS3の新たな可能性をみなさんに知っていただけたのなら幸いです。
追記:IE9に対応したCSS3 Draemon Ver2を公開!
追記2:画像を一切使わずにCSS3だけでとある科学の風力発電を描いてみた!
すごいっすね
すばらしいです!
変態ではなくて、天才ですね。
CSS3でラクに描画できるソフトって、可能性ないんでしょうか?
こいつ・・・動くぞ!
CSS3のすばらしさがとても伝わりました!
すごいですね~
IEもすごいですがwww
これならIEユーザーへ視覚的にいろいろと訴えられますねw
一番出来の悪いIEが資格的なweb標準という矛盾を痛烈に感じました。CSS3前途多難ですね。
まあ、ほんとにナチュラルに著作権侵害する人ですねえ。。。。
小学館はうるさいよ?
これは本当にすごいですね!
sleipnirを使っていますが、悲しくなりました・・・
今度はアンパンマンでお願いします。。
CSS3ってすごいですね
IEには吹いた
試しにIEで見てみたら目の部分が完全に崩れてた
IE早くなくなればいいのに
LunaのTridentで見たらすごいことにw
Geckoはまあまあだけど、口がかわいいことにw
それに、右腕がなぜか色が違うww
WebKitは影のグラデーションがおかしいけど、普通。
目も動くしw
うーん。Google Chrome 強いなw
Safariでの動作確認をしてないのは何故?
Safari4.0.5でもChromeと同じように表示されるよ
そのぐらい、自分で調べれば?
CSS3対応だって、ブラウザの制作元が表記しているなら
それで済む話だろ。
動作確認する義務は、ここの管理人には無いよ。
すごいですね...CSS3。
でも、何でドラえもんなんですかね?w
IEはもう消えれば良いのにw
「各ブラウザの動作」のIE見て吹きましたw
初コメです。
下のナビゲーションとかカッコイイですね。
とても気に入りました^^
あと、COMMENT FORMに「プレビュー」設置したら良いと思います。
凄いです♪
目が動くんですね、可愛らしい(*´∀`*)
私はMac Safariで拝見しましたが、完璧なドラちゃんでした♪
作成お疲れ様です。
IEは確かにネタでしかないwww
safariも綺麗に表示されますよw
これを見てたらAcid2を思い出したわ。
IE9で治ってたらいいんですけどね。
いまはfirefox使ってます。
-moz-border-radiusのような、標準によく似た(そして、他のプロパティと組み合わせるととんでもない表示になってしまう)独自拡張を持っていることを、CSS3に対応って言ってしまうのはいかがなものかと。
興味深い企画でした。 皆さんおっしゃっているように、IEは良いネタになりますね。
svgが流行らないのは何でだろう?
すげー
ここまでできるようになってるんですね。
IEはネタとして、これからも残って欲しいw
Safari でも無事に表示され、目玉が動きます。
何のために!?
というところが感動しました。
しかしIE8のカクカクぶり…
ほんと、滅びればいいのに!!
ネタとしては面白いけど実際問題
使ってる人口が多すぎて笑えないw
IE6だと更にカオスなドラえもんが見られますw
はじめはCSS3だけでどうやって書いてるの?って疑問でしたが
IEの表示を見てやっとCSS3が理解できました。
windows以外のOSだとどのように見えるのだろう・・・。
SVG使えよ
IE8をわざわざ互換モードにして表示乙。
IE8でもちゃんと表示されるよーんwww
>最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので
なんでこういう、今の&原作ドラえもんファンの神経を逆なでするような事書くかね。本第には関係のない所で損をしてるよ。
でも内容自体は評価しますけどね。
iPhone(iPod Touch)で確認してみましたが、顔と足だけ真四角でした。でもIE8より全然まともです。IE8は精進が必要ですね。
>なんでこういう、今の&原作ドラえもんファンの神経を逆なでするような事書くかね。
自分は昔の方が好きだからそっちをイメージしてますって言ってるだけなのに、逆撫でしてるとかどうかしてるな。
今のドラえもんを中傷とかしてるわけじゃないんだから落ち着けよ。
特定のブラウザを叩いている人も滅びればいいよ。
もちろん不特定でも駄目だけどね^^
ソースはソース!!
どうやって書いてるの?
Operaは正式な仕様にならないと真面目に対応しないからなー
だが、そこが良い!
素晴らしい記事内容ですけど…
コレ、小学館から訴えられたり、警告されたりしないのですかねえ…
これがもしハム太郎の絵だったら、似た絵を独自に描いただけでも警告されるらしいですが。
www.dfnt.net/t/photo/column/use_images.shtml
IEで閲覧するとドラに見えない謎の何かになるからこの場合はセーフ、
といった線引きの有無が巷にあるのかどうかも気になります。
仮にそういうアレが有るとしたら、
あえてcssで描くことで何かしらアレなソレをコレして回避することに利用できるという展開もあるのでしょうね。
ステキです。こういう時こそ、いいね!ボタン欲しいです。
IEへのバッシングひどすぎwww
WindowsのIE及びSafariでは確認しましたがMacでも正常に表示されていました。でも私が使っているプラグインがWin IEでしか機能しないため普段は Win IE派な私です。
IEがこんなに不甲斐ないなんて知らなかった!! IEもう使わないw
IE9 では両肩が崩れて、グラデーションと影がなくなって表示されるようです。
それ以外は大丈夫そうですね。
まだ Platform Preview 版の IE9 なので正式リリース時にはどうなるかわかりませんが。
rasaitoの再来や~
IE6だと原型のこらないです(笑)
おれクロームだが左うざい
結構、影響力強そうなサイトなのでまじめに。
CSS3 はまだ正式勧告されてないし、その点に関して IE は悪くない。
それにたとえば縦書きとなんかは IE だけしかサポートしてないし、粗を見つければいくらでも出てくる。(最近 Webkit がルビ対応したけど)
ま、結局目立つもんを抑えて、無知な世間にアピールできるかどうかで評価は決まっちゃうんだけどね。
面白いですね。
iphoneからだとこうなりました
http://beebee2see.appspot.com/i/agpiZWViZWUyc2VlchULEgxJbWFnZUFuZFRleHQYvpaNAQw.jpg
Sleipnir でも角ばるけど、ブラウザとしては普段使いやすいし、
こんなん見れなくても困りませんけどね(笑)
容量比較ですが、ベクターとラスターを一緒にするのはズレてますね。
JPGやらPNGやらと比較するなら、全ピクセルを1x1のdivで表現するような形式でないと。
面白いのはわかるけど、滅びれば良いのにとか言ってる人たちが気持ち悪い。誰と戦ってるんだろう。
>CSS3 はまだ正式勧告されてないし、その点に関して IE は悪くない。
正式に採用されて、IE9で対応したとしてもXPはIE9使えない件・・・
ブラウザなんて標準のIEで十分じゃないの?
画像で重いのを感じるスペックのPCなんて今は、誰も使ってないよ
IE系で支障の出る仕様を好む人はIEについて発言しない方が良いと思う。
嫌いなのに必至に批判する為にIEと口にする。
いつの時代も不思議な人たちは居るもので。
「-webkit-*」や「-moz-*」を使って、ChromeやFireFoxに無理矢理対応するのはかなりずるくありませんか?
それできちんとドラえもんが表示されたところで『CSS3によく対応してる』とは言えないと思いますが。
やたらIEを擁護したがる人の意図が分からない。マイクロソフトの工作員かなんかなの?結局firefoxやchromeのように先行実装すらしていないブラウザがCSS3が勧告されてすぐに対応できるとは到底思えない。
「-webkit-*」や「-moz-*」はずるいとか言ってる人もいますが、それで表示できているならまだいいんじゃない?それすらできないブラウザがいるのに。正式にCSS3が勧告されればその独自拡張から接頭辞を外すんだしさ。
> firefoxやchromeのように先行実装すらしていないブラウザがCSS3が勧告されてすぐに対応できるとは到底思えない。
IE8は先行実装してますよ。
-webkit-*や-moz-*を入れるなら、-ms-*入れて、
IE用のCSS3も呼び出すべきだろ
>IE8は先行実装してますよ。
>-webkit-*や-moz-*を入れるなら、-ms-*入れて、
>IE用のCSS3も呼び出すべきだろ
この人何も知らないんじゃないのか?
IE8がCSS3に対応していないのは常識だろ。
-ms-ってつけてもradiusやgradientやshadowも全く動かんし。
自分の勘違いでサイトが滅びればいいとかどんだけ~。
>>IE8は先行実装してますよ。
そんな訳無いだろw
IE8にどんな妄想抱いてるんだこいつは。
できるなら実際にIE8で丸いドラえもん書いてこいよw
「CSS3だけで」って言ってるのに、「-webkit-*」や「-moz-*」を使ってるのがおかしい。
これは、各ブラウザの独自実装であってCSS3じゃ無いでしょ。
>>「CSS3だけで」って言ってるのに、「-webkit-*」や「-moz-*」を使ってるのがおかしい。
じゃあ他のCSS3の記事を紹介しているサイトにでも行って
「これは接頭辞がついているからCSS3じゃない、おかしい」
と、馬鹿みたいに騒いでくればいいんじゃない?
どこのサイトのCSSS3の記事だってほとんど接頭辞ついてるし、
世間的にはそれがCSS3として扱われている。
ベクターでいいならSVGのほうがいいのでは?
軽いし。拡大縮小思いのまま。
なぁ、作者は今の時点のCSS3で何が出来るか書いているだけだろう?
今まではCSSと言えど直線を描くまでがデフォルトだった。
「今後はこういう事も出来るようになるよ」って、ただそれだけだろう?もうちょっと穏やかにみようや。
IEに関しては現状できなくてもIE9からの実装を目指しているんだし、あくまで【現段階】でこうなるって話じゃね?
まず、CSS3 ってのはモジュール化されてるんだから、「CSS3 に対応」って発言自体あまり正しくない。
本当に CSS3 の全部のモジュールに対応してるならいいけどさ。
このドラえもんがカクカクなのは、CSS Backgrounds and Borders モジュールの「border-radius」系に対応してるかどうかって局部的な話だろ。
もともと、Mozilla が先行実装して、そのあとに仕様に取り込まれることになりそうなものなんだから、この件で IE を責めるのは馬鹿な気がするな。
コメ欄見てると、世の中どれだけ馬鹿が多いかわかるな。
SVGがどうとか、容量比較でベクターとラスターを一緒にするのはズレてるとか、どんだけ読解力ないんだよ。はてブのコメントの方がよっぽどまとも。
著作権うんぬん言ってるお利口バカ、
接頭辞がついてるからCSS3ではない原理主義者のバカ
SVGと比べろとか、知識ひけらかしバカ
世の中バカだらけだな、良いもの見させてもらったよ
凄い!の一言です!
スゲェ
正直、アンタ凄いよ!
おお~
感動してしまいました。
趣味で絵に携わっていますが、
CSSでここまで可能とは。
おめでとう!
長いものに巻かれるのは嫌いではないですけど
よい技術が世に出にくくなっているのならちょっと
考えちゃいますね。
ただ、私初心者な物でドラちゃんが綺麗に表示されると
パソコンを使う人たちにどういう恩恵が生まれるのかが
よくわからなくて...
初心者をうならせるほどの破壊力がないと
歴史の更新はゆるくなっちゃうんだろうなぁ、
私みたいな初心者のせいで。
ここにswfものせて欲しかった。おそらくCSS3と同様のサイズになったと思いますよ。
「-webkit-*」や「-moz-*」が認められるのならIE用にexpressionやbehaviorやfilterをつかうのもOKですよね?
/: : : : : __: :/: : ::/: : ://: : :/l::|: : :i: :l: : :ヽ: : :丶: : 丶ヾ ___
/;,, : : : //::/: : 7l,;:≠-::/: : / .l::|: : :l: :|;,,;!: : :!l: : :i: : : :|: : ::、 / ヽ
/ヽヽ: ://: :!:,X~::|: /;,,;,/: :/ リ!: ::/ノ l`ヽl !: : |: : : :l: :l: リ / そ そ お \
/: : ヽヾ/: : l/::l |/|||llllヾ,、 / |: :/ , -==、 l\:::|: : : :|i: | / う う 前 |
. /: : : //ヾ ; :|!: イ、||ll|||||::|| ノノ イ|||||||ヾ、 |: ::|!: : イ: ::|/ な 思 が
/: : ://: : :ヽソ::ヽl |{ i||ll"ン ´ i| l|||l"l `|: /|: : /'!/l ん う
∠: : : ~: : : : : : : :丶ゝ-―- , ー=z_ソ |/ ハメ;, :: ::|. だ ん
i|::ハ: : : : : : : : : : : 、ヘヘヘヘ 、 ヘヘヘヘヘ /: : : : : \,|. ろ な
|!l |: : : : : : : : :、: ::\ 、-―-, / : : :丶;,,;,:ミヽ う ら
丶: :ハ、lヽ: :ヽ: : ::\__ `~ " /: : ト; lヽ) ゝ
レ `| `、l`、>=ニ´ , _´ : :} ` /
,,、r"^~´"''''"t-`r、 _ -、 ´ヽノ \ノ / お ・
,;'~ _r-- 、__ ~f、_>'、_ | で 前 ・
f~ ,;" ~"t___ ミ、 ^'t | は ん ・
," ,~ ヾ~'-、__ ミ_ξ丶 | な 中 ・
;' ,イ .. ヽ_ ヾ、0ヽ丶 l /
( ;":: |: :: .. .`, ヾ 丶 ! \____/
;;;; :: 入:: :: :: l`ー-、 )l ヾ 丶
"~、ソ:: :い:: : \_ ノ , ヾ 丶
反論できないからAAで誤魔化しているのですね、わかります。
ファイルサイズが小さいのは素晴らしいですけど、表示する際のレンダリングはやはりCPUとメモリを喰うのでしょう?
すごいですね!!
ここまでできるなんて、素晴らしいです!!
IE…見て笑いました。早く滅びて欲しいです。
CSSの本気ってすごい・・・乙です
こんなこっといいな~♪でっきたっらいいな~♪
今IE6使ってるが、これ見てもう終わってることを理解したww
chromeいいなーとか思うけどやっぱりIE6やめられねぇ
感動しました。
本当にIEなくなってほしいです。
>-とりあえず互換対策までしているようなので-
>IE系で支障の出る仕様を好む人はIEについて発言しない方が良いと思う。
>嫌いなのに必至に批判する為にIEと口にする。
>いつの時代も不思議な人たちは居るもので。
Webサイト制作者側的に手間がかかって困るんだよ。
無駄に画像とかも使いたくないし、Javascriptをいちいち使って多様したくないし。
滅びるかは別として、早く他のブラウザ同等の性能くらいにはなって欲しい。
http://jqueryui.com/themeroller/
このページをいろいろなブラウザで見てみると
IEがかなりきついことがわかる
(高速でさまざまなブラウザに対応したJavaScriptライブラリ)
アニメーションになってない
対応してない機能が多いと
スクリプト側でやる処理も増えて
重いの不の連鎖が起きる
悪いことはいわんからIEやてめちゃんとしたブラウザつかってけれ
ie9ではドラえもんの腕だけカクカクになるぞ!!。
ie5.5で見るとすごいことになる!!
ヾシヾ⌒シヾ-‐ヽ
ー丿 ヾヽ
シ ,,,α
ξ ゞシヾ" ヽ ,,,....,,,、、...,,,....,,
! 彡 ヽ::: ..i'´. ヾ'''、、、,,,
シ 彡 ,j::: ..,/ヾ, ヽ
!シ ,,彡 :シ ,;'''' ヾ ,___ ヽ
j ,-‐-、 i ッ三ミ:;j i、' j-‐ `, , ‐'' = ) ヽ:
し { !⌒- ヽ! j ‐-‐'j ヽ、...' ' .,_//, !;::
ヾ丶`-' ! ! {__,__,!' -‐' ヾ ノ:::
,ヾ ' 、 ,' ....,) :: ヽ ノ::::::
_...-‐‐'''´ ::: ´::( _... ´ ヽ /:::::::
:: ! .... -‐´ ヽ /::::: __,....,,-‐-、
::::. ヽ !......:-‐ー、 ,,,,,,;;;ヽ __ ...-‐、 :: `ヽ-、___,--/'´ ,、 , `ヽ、
!:::,´´´´´:::::`"""´:::::::::::::::;;;;;;;;ヽ、 ;:: ヽ-‐' ! ./ iヽ
::::::::::::;;;;;;;;i ;:: ; __,,, `、丿 ./ )
:::: ´´´::::-´::ヽ::: l:: ; -‐´ ..,;;;; ヽノ、 /
:::: /´ !:: j::
CSS習ってまだ2週間です
以外に簡単にドラえもんでができました
ドラえもんの体もできました。
あとクッキーていうやつもCSS3でできました。
クッキーは自身があります得に目がよくできました
モンスターボールもCSS3でできました。
本とCSS3ってすごいですよね。
何でもできますね。
IE9ではFirefoxと同じような表示になりました。
CSS3だけで描画とはすごい
しかしまあさすがIE8!これはひどい
ちなみにIE9ではOperaと同じ表示になりました。
ChromeとFirefoxは微妙に違いますがよく表示されています。
IE8のオチ
新たな可能性がどんどん広がっていって見ているだけでも非常に楽しいです。
IEでもちゃんと表示されるじゃないか!
いいかげんにしろ!
(笑)
ドラえもんCSS3がバリデーションエラー起きてますよヽ(;▽;)ノ
FC2の解析のタグで <div align="right"> ダメって言われているので <div style="text-align: right;> にすれば解決だとおもいますが(⌒-⌒; )
IE11だと火狐と似たような表示になる(但し眼は動かない模様...)
edgeだとIE11とほぼ同じ表示で眼は動くのだが...縦に動くと横に灰色の線が入る...参考までに↓
https://twitter.com/yorozuya61377/status/996764981659025408