昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、本日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない？という疑問を抱き実際に作ってみました！
今回作成したのは日本人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。
HEADLINE NEWS
- iPadに触れる機会があったのでその感想を。(05/05)
- 画像を一切使わずにCSS3だけでドラえもんを描いてみた！(05/04)
- 画像を一切使わないCSS3で製作した新サイト「NetaGear」！(05/03)
- 月末恒例ランキング - 2010年4月のアクセス解析！(05/01)
- 50000000Hit記念プレゼント企画がスタート！(04/30)
- PHILIPS(フィリップス) のヘッドフォン SHL8800を使ってみた！(04/20)
- Internet Explorer 9 プラットフォームプレビュー版を試してみた！(04/08)
- 月末恒例ランキング - 2010年3月のアクセス解析！(04/07)
- 簡単にサイトの表示速度を高速化する方法！(04/01)
- 本日より美少女ゲーム「se・きらら」の無料配布を開始！(03/26)
- PS3用リモコンの「BDリモートコントローラ」を買ってみた！(03/24)
- PS3用地デジチューナー「torne」を買ってみた！(03/21)
- GIGAZINEで「DivX Plus Pro」のシリアルナンバーを無料配布中！(03/17)
- 登録不要の使い捨てメールアドレス「ナナチャンメール」！(03/15)
- 簡単にインストール情報を削除できるソフト「Windows Installer CleanUp」！(03/07)
- 地球上で最速のブラウザ「Opera 10.50」正式版が公開！(03/04)
- 月末恒例ランキング - 2010年2月のアクセス解析！(03/03)
- はてなブックマーク数の勢力を3D仮想都市で表示してくれる「Blogopolis」！(02/28)
- 2010年のトップ画像の紹介！(02/27)
- 涼宮ハルヒの憂鬱のDVDがAmazonで投売り？最大80%offで販売中！(02/20)
- BRAVIAのDLNA機能でパソコン内のMP4やTSファイルを再生する方法！(02/20)
- PS3用地デジチューナ「torne」の発売日が3月18日に決定！(02/17)
- 地球上で最速！？JavaScriptが8倍高速になった「Opera 10.50」beta版が公開！(02/14)
- Googleトップページのロゴがバンクーバーオリンピック仕様に！(02/14)
- 祝50000000Hit！(02/12)
画像を一切使わずにCSS3だけでドラえもんを描いてみた！
CSS3で作ったドラえもんの完成品！
CSS3 ドラえもん Demo
最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので、そっちをイメージして作りました。注意事項としてはGoogle Chromeとfirefoxで閲覧してください。Operaでは一部CSS3に対応してない部分があります。また、IEはCSS3には全く対応していないので構造が崩れてひどいことになります。
ちなみにGoogle ChromeはCSS3のアニメーションで目が動くおまけ付です！
画像ではない証拠はhtmlとCSSのソースを確認してもらえば分かると思います。まあ、画像と違って右クリックで保存することができないってのも一つの特徴ですかね。どちらにしても、スクリーンショット撮られたら関係ないですけど。。。
各ブラウザの動作
ChromeとFirefoxはCSS3によく対応しておりさすがというべきか、ちゃんと同等に表示できています。Operaはgradientが使えないのでグラデーションを加えられず、ちょっと薄っぺらな印象です。
最後はIEですが、さすがは我らがIEさん！すばらしいオチをつけてくれましたね！
もうIEとかネタでしかないし、早く滅びればいいのにｗ
作っている途中にも感じましたが、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で書く必要性は皆無ですね。
今回の個人的感想
今回のCSS3ドラえもんを作ったのは、この馬鹿な企画を通してCSS3のすごさと今後の可能性を皆さんに知っていただけたらと思って実行しました。ぶっちゃけますが、こんなことをするのは明らかに一部の馬鹿か変態のする行為です。
なんせ画像ならimgで貼るだけでできることをわざわざCSSのコードだけで600行近く書くなんて頭がおかしいとしか思えない。作った本人が言うのもあれですが、余程の暇人でない限りCSS3で絵を描くのは人には薦めません。
最初は顔だけの予定でしたのでもっとソースコードが短かったんですが、胴体を加えて影をつけたり細部にこだわり始めたらとまらなくなって、いつの間にか600行にもなっていました。CSSのプロとかならもっと短く書けるかもしれませんが、一介の素人たる私が書くとこんな感じになります。
そんなこんなで今回の企画でCSS3の新たな可能性をみなさんに知っていただけたのなら幸いです。
Share with Add to Any
COMMENT TO THIS ENTRY
2010
05
04
すごいっすね
2010
05
04
すばらしいです！
変態ではなくて、天才ですね。
CSS3でラクに描画できるソフトって、可能性ないんでしょうか？
2010
05
04
こいつ・・・動くぞ！
2010
05
04
CSS3のすばらしさがとても伝わりました！
2010
05
04
すごいですね〜
IEもすごいですがｗｗｗ
これならIEユーザーへ視覚的にいろいろと訴えられますねｗ
2010
05
04
一番出来の悪いIEが資格的なweb標準という矛盾を痛烈に感じました。CSS3前途多難ですね。
2010
05
04
まあ、ほんとにナチュラルに著作権侵害する人ですねえ。。。。
小学館はうるさいよ？
2010
05
04
これは本当にすごいですね！
2010
05
04
sleipnirを使っていますが、悲しくなりました・・・
2010
05
04
今度はアンパンマンでお願いします。。
2010
05
04
CSS3ってすごいですね
IEには吹いた
試しにIEで見てみたら目の部分が完全に崩れてた
IE早くなくなればいいのに
2010
05
04
LunaのTridentで見たらすごいことにｗ
Geckoはまあまあだけど、口がかわいいことにｗ
それに、右腕がなぜか色が違うｗｗ
WebKitは影のグラデーションがおかしいけど、普通。
目も動くしｗ
うーん。Google Chrome 強いなｗ
2010
05
05
Safariでの動作確認をしてないのは何故？
2010
05
05
Safari4.0.5でもChromeと同じように表示されるよ
そのぐらい、自分で調べれば？
CSS3対応だって、ブラウザの制作元が表記しているなら
それで済む話だろ。
動作確認する義務は、ここの管理人には無いよ。
2010
05
05
すごいですね...CSS3。
でも、何でドラえもんなんですかね？ｗ
IEはもう消えれば良いのにｗ
「各ブラウザの動作」のIE見て吹きましたｗ
初コメです。
下のナビゲーションとかカッコイイですね。
とても気に入りました＾＾
あと、COMMENT FORMに「プレビュー」設置したら良いと思います。
2010
05
05
凄いです♪
目が動くんですね、可愛らしい(*´∀`*)
私はMac Safariで拝見しましたが、完璧なドラちゃんでした♪
2010
05
05
作成お疲れ様です。
IEは確かにネタでしかないｗｗｗ
2010
05
05
safariも綺麗に表示されますよｗ
2010
05
05
これを見てたらAcid2を思い出したわ。
2010
05
05
IE9で治ってたらいいんですけどね。
いまはfirefox使ってます。
2010
05
06
-moz-border-radiusのような、標準によく似た(そして、他のプロパティと組み合わせるととんでもない表示になってしまう)独自拡張を持っていることを、CSS3に対応って言ってしまうのはいかがなものかと。
2010
05
06
興味深い企画でした。 皆さんおっしゃっているように、IEは良いネタになりますね。
2010
05
06
svgが流行らないのは何でだろう？
2010
05
06
すげー
2010
05
06
ここまでできるようになってるんですね。
2010
05
06
IEはネタとして、これからも残って欲しいｗ
2010
05
06
Safari でも無事に表示され、目玉が動きます。
2010
05
06
何のために！？
というところが感動しました。
しかしIE8のカクカクぶり…
ほんと、滅びればいいのに！！
2010
05
06
ネタとしては面白いけど実際問題
使ってる人口が多すぎて笑えないｗ
2010
05
06
IE6だと更にカオスなドラえもんが見られますｗ
2010
05
06
はじめはCSS3だけでどうやって書いてるの？って疑問でしたが
IEの表示を見てやっとCSS3が理解できました。
2010
05
06
windows以外のOSだとどのように見えるのだろう・・・。
2010
05
06
SVG使えよ
2010
05
06
IE8をわざわざ互換モードにして表示乙。
IE8でもちゃんと表示されるよーんｗｗｗ
2010
05
06
>最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので
なんでこういう、今の＆原作ドラえもんファンの神経を逆なでするような事書くかね。本第には関係のない所で損をしてるよ。
でも内容自体は評価しますけどね。
2010
05
06
iPhone(iPod Touch)で確認してみましたが、顔と足だけ真四角でした。でもIE8より全然まともです。IE8は精進が必要ですね。
2010
05
06
＞なんでこういう、今の＆原作ドラえもんファンの神経を逆なでするような事書くかね。
自分は昔の方が好きだからそっちをイメージしてますって言ってるだけなのに、逆撫でしてるとかどうかしてるな。
今のドラえもんを中傷とかしてるわけじゃないんだから落ち着けよ。
2010
05
06
特定のブラウザを叩いている人も滅びればいいよ。
もちろん不特定でも駄目だけどね＾＾
2010
05
06
ソースはソース！！
どうやって書いてるの？
2010
05
06
Operaは正式な仕様にならないと真面目に対応しないからなー
だが、そこが良い！
2010
05
06
素晴らしい記事内容ですけど…
コレ、小学館から訴えられたり、警告されたりしないのですかねえ…
これがもしハム太郎の絵だったら、似た絵を独自に描いただけでも警告されるらしいですが。
www.dfnt.net/t/photo/column/use_images.shtml
IEで閲覧するとドラに見えない謎の何かになるからこの場合はセーフ、
といった線引きの有無が巷にあるのかどうかも気になります。
仮にそういうアレが有るとしたら、
あえてcssで描くことで何かしらアレなソレをコレして回避することに利用できるという展開もあるのでしょうね。
2010
05
07
ステキです。こういう時こそ、いいね！ボタン欲しいです。
COMMENT FORM
WebサイトやブログのデザインするCSS。その最新バージョンとなるCSS3を使って、裏技shop DDの中の人が画像を...
2010.05.05.Wed .No119 / テンプルナイツ 宮殿騎士団
Special Links
Now loading...
05/07 00:04.04名無しさん:画像を一切使わずにCSS3だけでドラえもんを描いてみた！
05/06 22:49.56名無しさん:画像を一切使わずにCSS3だけでドラえもんを描いてみた！
05/06 22:39.31名無しさん:画像を一切使わずにCSS3だけでドラえもんを描いてみた！
05/06 21:53.50名無しさん:画像を一切使わないCSS3で製作した新サイト「NetaGear」！
05/06 21:47.39漫画太郎:画像を一切使わずにCSS3だけでドラえもんを描いてみた！
05/06 21:45.58名無しさん:画像を一切使わずにCSS3だけでドラえもんを描いてみた！
05/06 21:21.03かっつん:50000000Hit記念プレゼント企画がスタート！
05/06 21:18.47名無しさん:画像を一切使わずにCSS3だけでドラえもんを描いてみた！
05/06 21:00.25名無しさん:画像を一切使わずにCSS3だけでドラえもんを描いてみた！
05/06 20:13.14REON:iPadに触れる機会があったのでその感想を。
05/06 20:08.17FF:画像を一切使わずにCSS3だけでドラえもんを描いてみた！
05/06 19:56.17Right Stuff:画像を一切使わないCSS3で製作した新サイト「NetaGear」！
05/06 19:55.52Chrome使い:画像を一切使わずにCSS3だけでドラえもんを描いてみた！
05/06 18:55.12名無しさん:iPadに触れる機会があったのでその感想を。