スタイルシートで描くグラフィックのドラえもん

　Cascading Style Sheets（CSS）がレベル3になっている。現在ドラフト段階なのに、すでにいくつかのブラウザで実装されている。CSS3の機能を使うと、JavaScriptは不要になり、グラフィカルな表現がHTMLとCSSだけでできてしまうということを具体的な見せたのが「画像は一切使ってない！？CSS3だけで描いた“ドラえもん”がすごい」という話題である。

 　グラフィックを画像にしないメリットはどこにあるのだろうか。あるすれば

専用アプリケーションが不要
データサイズが小さくなる

ということくらいか。あとはJavaScriptが不要になるということ。画像を作成する場合は、アプリケーションは必須だろう。PhotoshopでもIllustratorでもかまわないし、他のアプリケーションでもかまわない。あるいはスキャンするにしても、別のデバイスが必要となる。HTML＋CSSだと、アプリケーションは不要である。極端に言うと、テキストエディタがあればよい。

　データサイズは確かに画像化するより小さくなるようである。くだんのドラえもんを画像にすると、GIFでは「33.5 KB」なのに、HTMLとCSSでは「16.25KB」らしい。いくらネットが高速になっても、ファイルサイズは軽い方がいい。もっとも画像の場合とHTMLとCSSで表示するときの体感速度の違いまではわからない。

　現在ところ、CSS3は正式に勧告されていないが、フィックスされていなくても、いま決まっている部分が削除されてしまうとこはまずないので、将来はブラウザが対応（いまのところGoogle ChromeとFirefox、safari）していれば、グラフィックスを表示しアニメも動くようになるのだろう。

　ただし、このCSSドラえもん、テキストで「CSSのコードだけで600行を超える大作」なので、誰にでもできるかというと、多分難しそうだ。そのうち、CSS3コードを書き出すソフトが登場するかも。

　「裏技shop DD」の記事のコメントに

SVG使えよ

というのがあって、そういえばSVGでも同じようにできるはず。Illustratorで作成してSVGで書き出せばいいわけだが、SVGは普及しませんな。SVGもXMLで似たようなものなのに。Illustratorが必要だというのがネックなんでしょうな。

　AdobeもIllustratorにIllustratorで作成したグラフィックスを、Flashにするだけでなく、CSS3コードに変換する機能を装備すると面白い。すべてのブラウザ環境にFlashをインストールすることはできないし、AppleのiPhoneやiPodのように、Flashを拒否するデバイスも現れる。CSSであれば、Appleが拒否することはできない。

　いずれにしても、CSS3でここまでできるということを如実にみせた「裏技shop DD」の意義は大きい。CSS3の普及は予想より早いかも知れない。


◆画像を一切使わずにCSS3だけでドラえもんを描いてみた！［裏技shop DD ］
http://shopdd.blog51.fc2.com/blog-entry-932.html

◆画像は一切使ってない！？CSS3だけで描いた“ドラえもん”がすごい［はてなブックマーク］
http://b.hatena.ne.jp/articles/201005/1118

◆Cascading Style Sheets［Wikipedia］
http://ja.wikipedia.org/wiki/Cascading_Style_Sheets