ガジェット通信 GetNews

見たことのないものを見に行こう

体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

画像を一切使わずにCSS3だけでドラえもんを描画したよ! ブラウザ毎に見え方が全く違って面白い

画像を一切使わずにCSS3のみでドラえもんを描画

昨日紹介したCSS3だけで制作されたウェブサイト『NetaGear』に続き面白いサイトを紹介。今度はCSS3のみを使ってドラえもんを描画したという物だ。もちろん今回も前回同様にブラウザ毎に見え方が全く異なってくる。正常に描画されているのは、『Google Chorome』と『Firefox』『Opera』だ。『Internet Explorer』のみは丸みのないカクカクなドラえもんになってしまう。

さて、このドラえもんを画像として表示した場合はどのくらいの容量になるのだろうか?
サイトに検証した結果かが掲載されている。結果は以下の通りだ。
GIF …… 33.5KB
JPEG …… 96.5 KB
PNG …… 60.2KB

以上のように画像系はどれも数十KBは行ってしまうみたいだ。ではHTMLとCSS3のみで構成した容量となると……

html 2.05KB
CSS 14.2KB
計 16.25KB

16.25KBと最も少ない数字となった。もちろんバイナリーデータではないので当然といえば当然。ただ、CSS3でドラえもんを描画する手間などを考えると画像で作ってしまったほうが楽なのか? それとブラウザによってかなり見栄えがことなるのも気になるところだ。ここまで見栄えが異なると『Internet Explorer』でウェブを閲覧することに不安すら感じてしまう。まだCSS3やHTML5が普及していないから良い物の、完全に普及しきった頃には『Internet Explorer』は対応してくれるのだろうか?

ちなみに『Google Chorome』でみるとドラえもんの目が動くよ。

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

■最近の注目記事
ゴールデンウィークは恋人とどう過ごす? 「彼女なんて居ない」が独走1位!
アップル社製品が通販で軒並み終了した理由を聞くも両者食い違い アップル「販売終了を決めたのはヨドバシでは?」
早速『けいおん!!』第二期の実写版MADが公開される! 再現度高し!
ポーランドにあるセクシーすぎる床屋さんが凄い! 下着姿でチョキチョキしてくれるよ
ASIMOもビックリの二足歩行ロボットが上海万博に出展される! 第二の先行者か?

ソルの記事一覧をみる

記者:

  ネタのタレコミや情報提供は下記ウェブサイトからお願いします

ウェブサイト: http://getnews.jp/

  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。

山寺宏一&高木渉で『ポプテピピック』

GetNews girl / GetNews boy