• X
  • Facebook
  • RSS
トップ > 暮らし > 画像は一切使ってない！？CSS3だけで描いた“ドラえもん”がすごい

画像は一切使ってない！？CSS3だけで描いた“ドラえもん”がすごい

暮らし ヘッドライン


こちらの“ドラえもん”のイラスト、どうやって描かれていると思いますか？PhotoshopやIllustratorなどの画像編集ソフトで描かれているようにも見えますが、実はこのイラスト、なんと画像を一切使わずに「XHTML」と「CSS3」のソースコードのみで描かれているとのことです。


▽CSS3 ドラえもん

インターネット上でイラストを公開するには、JPGやGIFといった画像ファイルでアップロードするのが一般的。しかしこちらのドラえもんはそういった画像ファイルではなく、Webサイトを構築する際に使われるXHTMLとCSS3のソースコードのみで作られています。そのため“右クリックで保存”ができなかったり、ブラウザの種類やバージョンによって見え方が異なるのが特徴です。


こちらはFirefox3.6の場合です。FirefoxやGoogle ChromeはCSS3に対応しているので、グラデーションまできちんと表示されます。


一方Internet Explorer8はCSS3に対応していないため、カクカクしたドラえもんに。

作者のブログによれば、CSS3で色々なことをやってみるうちに「画像を使わなくても絵が描けるのでは？」と思い立ち、誰もが知っているドラえもんにチャレンジしてみたとのこと。CSSのコードだけで600行を超える大作になったそうですが、「今回の企画でCSS3の新たな可能性をみなさんに知っていただけたのなら幸いです。」という言葉通り、これまでの常識を覆す新たな可能性を感じさせられますね。
▽画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - ShopDD

はてなブックマークのコメント欄でも、「これはおそろしい」「imgじゃない・・・だと・・・」「CSSだけでドラえもんを描くなんてスゴイ！」といった驚きの声が続出していました。

文: 飯塚朋子

関連エントリー