ShopDD

Now Loading

Now Loading

RSS Article

Now Loading

Article

ついにIEでも丸いドラえもんが!?CSS3 ドラえもんをIE9に対応させました!

doraemon_css3_v2_000.png

以前に書いた記事で好評だったCSS3 ドラえもんですが、ついにInternet Explorer 9に対応させました!これでIE9からは四角いドラえもんとか馬鹿にされません!前々からやろうやろうと思っていたんですが、なかなか手をつけられず、今月にIE9 RCが公開されたことで、CSS3 ドラえもん ver2へとバージョンアップしました。

今回のコード追加対応で、IE9はさすがにChromeやfirefoxには及びませんが、Operaと同等の表示が可能になっています。今回のはIE9のバージョンアップによるCSS3の対応であって、IE8以下では今まで通りの四角いドラえもんです。
doraemon_css3_v2_001.png
CSS3 ドラえもん ver2

上の画像はIE9 RCで表示し、スクリーンショットを取ったものです。では、さっそくどれだけ変化したのか、ブラウザの動作を以前のものと比べてみましょう。IE以外のブラウザは以前のものといっしょです。

各ブラウザの動作


doraemon_css3_003.png
以前のCSS3ドラえもんではIE8はオチを担当してくれました。

           ↓↓↓↓

doraemon_css3_v2_002.png
今回のバージョン2ではIE9もちゃんと丸くなってドラえもんになりました。オチの存在がいなくなったのは悲しいですが、1年足らずでこれだけ成長するとはIE9のがんばりには驚きです。


新サイト!


doraemon_css3_v2_003.png
Pure css design


CSS3 ドラえもんver2は新サイトの方で公開中です!

画像なしでCSS3だけでいろいろなものをつくってみようシリーズは、CSS3 ドラえもん以外に画像を一切使わないサイトNetaGearなどをすでに公開していますが、実は他にもいくつか作っていました。本当は3作品の計画で作り始め、そのうち実際に2つはchrome用だけが完成していて、他のブラウザ修正をしていない状態です。その結果、途中まで作ったはいいが忙しくてその存在を忘れ、公開するタイミングを逸してしまいました。

今回これらのCSS3シリーズをまとめておくサイトとして、Pure Css Designというサイトを作りました。Chromeで見るとCSSアニメーション付です。まだ新しい2作品は公開していませんが、順次完成しだい公開したいと思います。まあスクリーンショットをみれば大体どんなものかは分かりますね。1つ目の作品にぐぬぬ画像を選択したのは、一つ作れば他のキャラに応用して大量生産できるかなと思ったからです。もう1つの作品は簡単かつ動きのあるものを作りたかったので、これを選択しました。需要があるなら早めに公開したいですけど、こんなニッチなところは誰も求めてなさそうだな・・・。

・画像を一切使わずにCSS3だけでとある科学の風力発電を描いてみた!
・画像を一切使わずにCSS3だけでとあるぐぬぬの禁書目録を描いてみた!

今回の個人的感想


impression_canvas_001.png

IE9正式版の公開がだんだん近づいていているようなので、IE9の名誉のためにも早めに修正しておかないといけない気がして、今回は急いで仕上げました。前は四角いドラえもんで馬鹿にされていたのに、IE9になってからちゃくちゃくとCSS3に対応してきており、ついにOperaと同等レベルまで着ましたからね。これでIE9が普及してくれればCSS3ももっと使いやすくなるんですが、まあ正式版が出てもそう簡単に普及してはくれないでしょう。たとえ普及しても下位バージョンの対応もありますしね。とりあえず今回のIE9は素直に評価したいです。

それと、CSS3ドラえもんを公開してからというものの、一部のコメントがかなり手厳しいです。ベンダープレフィックスの話とか十分に理解しているんで別にしなくていいです。CSS3でいろいろなものを作ってみようシリーズは、技術的にこういうことも可能という技術デモであり、かつネタでもあるわけで、それをW3C Markup Validatorが通っても空のdivタグレイアウトはW3Cのマークアップ的には正しくないだの説教されても困ります。ネタに本気にならないでくれよ。

そういえばこの前のドラえもんで、なぜか四角いドラえもんが出ていたのはちょっと笑ってしまったwパッと見ただけだから内容は良く知らないけど、テレビにIE8のドラえもんがいるっとか思いました。誰か画像持ってないかな?

Related article

COMMENT TO THIS ENTRY

ついにIEでもドラえもんが丸くなったw
落ちがなくなって少しさびしいなー

9034

IEの頑張りようが凄いな
それでも他との差が大きそうだけど・・・

9035

IE9ががんばっているのは分かるが、面白くなくなったな。
あの四角いドラえもんがよかった

9037

こないだ金曜日のドラえもんは『四角いドラえもん』というタイトルだったよ。
「カドバール」でドラえもんが四角くなって、最後は「マルクナール」っていう薬で元のまるいドラえもんに戻る話だった。

9038

実際にこれだけのものをcssやhtmlだけで表現すること自体難しいことだと思うし、
しっかりしたサイトを作るなら気を付けるべきことですが、
あくまで目的は「絵を描く」ということなんで
divが空になるのは仕方ないことですよね……

IE9が正式公開されたらこういうネタが少なくなるわけか……
そう考えるとちょっとさびしいな…

9039

規格に準拠するMSなんてMSじゃない!!(笑

9042

IE6だと四角くて目玉がないドラえもんになりましたw

9057

いろいろさまよっていて、たどり着きました。
すごい感動しました。
出来が良すぎる分、すごさが伝わらないのかも。

四角ドラえもんのネタが残っていたほうが楽しいと考えるのも
納得。
今のうちにIEでじっくり見ておこう。

9168

WiiUブラウザで見れました!

10168

Most Popular

Now loading...

MENU



Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位50位が表示されます。今ならリンクするだけで簡単に上位に表示されます。

Amazon

Now Loading...