2010年05月07日

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

 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

 


ラベル:CSS3
posted by 上高地 仁 at 14:54 | Comment(0) | TrackBack(0) | ニュース&トピック | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック