1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. ついにIEでも丸いドラえもんが!?CSS3 ドラえもんをIE9に対応させました!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
Painterなどが最大91%OFFのVEGAS&Corel全製品値下げキャンペーンが開催中!

Painterなどが最大91%OFFのVEGAS&Corel全製品値下げキャンペーンが開催中!

現在ソースネクストの公式サイトでは、PaintShop、WinDVD、Painter、VideoStudio、CorelDRAWなどのCorel全製品とVEGAS Pro、ACID Pro、SOUND FORGE、SPECTRALAYERSなどのVE...

YouTubeでHTTP Error 400が出てサイトにアクセスできない時の解決方法!

YouTubeでHTTP Error 400が出てサイトにアクセスできない時の解決方法!

今回はYouTubeで出くわしたHTTP Error 400(Bad Request)が出て、YouTubeにアクセスできなくなってしまった時の解決方法を紹介したいと思います。この現象が発生してしまう...

日本郵便が無償で提供する年賀状ソフト「はがきデザインキット2019」がおすすめ!

日本郵便が無償で提供する年賀状ソフト「はがきデザインキット2019」がおすすめ!

今年も残すところあと30日間を切り、もうそろそろ年賀状を用意して送らないといけない時期ですね。そこで今回は年賀状作成ソフトについて書きたいと思います。ちなみにみな...

ついにFC2ブログの独自ドメインがSSL対応したのでSSL化しました!

ついにFC2ブログの独自ドメインがSSL対応したのでSSL化しました!

ついにFC2ブログで独自ドメインを使ってるブログもSSLに対応しました。FC2のサブドメインを使っているブログは2017年10月からSSL化されていましたが、有料プランである独自...

CASIO G-SHOCKタフソーラーの二次電池交換をWEB修理受付サービスからしてみた!

CASIO G-SHOCKタフソーラーの二次電池交換をWEB修理受付サービスからしてみた!

今回はCASIOの時計のG-SHOCKタフソーラーの二次電池交換をWEB修理受付サービスから申請した時の流れを書きたいと思います。G-SHOCKタフソーラーの二次電池の場合は普通の時...

KADOKAWAの電子書籍が半額でさらにポイント50倍のニコニコカドカワ祭りがものすごい!

KADOKAWAの電子書籍が半額でさらにポイント50倍のニコニコカドカワ祭りがものすごい!

現在電子書籍ストアのBOOK☆WALKERで開催されているニコニコカドカワ祭り2018でものすごいキャンペーンを実施中です。KADOKAWA作品が19000点が半額でさらに45000点がコイン5...

Amazon.comで不良品が送られてきたのでEMSで返品して返金してもらった話!

Amazon.comで不良品が送られてきたのでEMSで返品して返金してもらった話!

以前に海外のAmazonを有効活用して安く買い物をしよう!という記事で簡単に海外のAmazon.comから輸入する方法を紹介しましたが、今回は海外Amazonで購入したものが不良品だ...

総額350ドル!有料ソフト8製品のライセンスキーを無料配布するキャンペーンが実施中!

総額350ドル!有料ソフト8製品のライセンスキーを無料配布するキャンペーンが実施中!

WonderFox Soft, Inc.は同社製品である新しいWonderFox HD Video Converter Factory Proを含む合計8製品のライセンスキーを無料配布するWonderFox 2018 Back to School Par...

Chromeのタブを休止させてメモリ消費を抑えられる拡張機能「The Great Suspender」を使おう!

Chromeのタブを休止させてメモリ消費を抑えられる拡張機能「The Great Suspender」を使おう!

みなさんもよく使っているであろうブラウザのChromeですが、タブを沢山開いているとメモリの消費量がすごいことになることがよくありますよね。そんな時におすすめなのがCh...

無料で使えるVRoid Studioでオリジナル3Dキャラクターを作ろう!

無料で使えるVRoid Studioでオリジナル3Dキャラクターを作ろう!

今回はWindows・Macどちらでも使える無料で使える3DキャラメイカーのVRoid Studioを紹介したいと思います。3D制作の知識がなくても誰でも簡単に自分だけのオリジナル3Dのキ...

NetaGear RSS News

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だけでとあるぐぬぬの禁書目録を描いてみた!

今回の個人的感想




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...

Social Links

Sponsored Link

MENU

NetaGear

Pure Css Design

Popular Article

Access Ranking

Now Loading...

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