1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. ついにIEでも丸いドラえもんが!?CSS3 ドラえもんをIE9に対応させました!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
FLEXISPOT CPU冷却ホルダー CH1Bでデスクの天板からPCを吊るそう!

FLEXISPOT CPU冷却ホルダー CH1Bでデスクの天板からPCを吊るそう!

前回の記事のFLEXISPOT 電動式昇降デスク E3シリーズをより良く使えるようにするために、今回はオプション的なパーツである「FLEXISPOT CPU冷却ホルダー スタンディングデ...

Gmailのメールを一括削除する方法!(スマホ・PC両方に対応)

Gmailのメールを一括削除する方法!(スマホ・PC両方に対応)

Gmailのメールを整理しようと思った際に、一つ一つメールを選択して削除するのはものすごく大変なので、特定のメールを一括選択して削除をしたいですよね。ですが、Gmailの...

最強のPCデスク!FLEXISPOT 電動式昇降デスク E3シリーズを使ってみた!

最強のPCデスク!FLEXISPOT 電動式昇降デスク E3シリーズを使ってみた!

今回は最強のPCデスクであるFLEXISPOT 電動式昇降デスク E3シリーズを紹介したいと思います。このFLEXISPOT 電動式昇降デスク E3シリーズはなんと電動式で高さを調節可能な...

ダイソーのLANケーブル延長コネクターを買ってみた!

ダイソーのLANケーブル延長コネクターを買ってみた!

今回紹介するのはダイソーで売っているLANケーブル延長コネクターです。LANケーブルを少しだけ延長したい場合、長いLANケーブルを買い直すのは少しもったいない気がします...

アンインストールできないソフトをきれいに削除できる「GeekUninstaller」!

アンインストールできないソフトをきれいに削除できる「GeekUninstaller」!

今回紹介するのはソフトウェアのアンインストールをサポートしてくれるソフトのGeekUninstallerです。普通にアンインストールする際にも使えるのですが、このソフトの良い...

様々なデバイスに対応したFaviconに一括変換してくれる「Real Favicon Generator」が便利!

様々なデバイスに対応したFaviconに一括変換してくれる「Real Favicon Generator」が便利!

今回紹介するのはサイトのFaviconを様々なデバイスに対応した状態で一括変換してくれる「Real Favicon Generator for all platforms」です。スマートフォンのiOS/Android、...

プロ用動画編集ソフトのVEGASシリーズが最大90%割引のキャンペーンを実施中!

プロ用動画編集ソフトのVEGASシリーズが最大90%割引のキャンペーンを実施中!

現在ソースネクストでは、全製品が衝撃プライスのThe Chance Ultraキャンペーンとして、プロ用映像制作ソフトの最新版となるVegas Pro 16シリーズや知識がなくても作曲可能...

Windowsで画像ファイルのサムネイル(縮小表示)が表示されない時の解決方法!

Windowsで画像ファイルのサムネイル(縮小表示)が表示されない時の解決方法!

今回はWindowsを使っていて画像ファイルのサムネイル(縮小表示)が白くなって正常に表示されない問題が発生したときの解決方法を紹介したいと思います。先日スクリーンショ...

moto modsが30%OFF!春のmoto mods割引キャンペーンが実施中!

moto modsが30%OFF!春のmoto mods割引キャンペーンが実施中!

現在、Motorola公式ショップではモトローラ創立90週年 春のmoto mods割引キャンペーンが実施されています。moto Z、moto Z play、moto Z2、moto Z2 play、moto Z3、moto Z3...

NetaGear RSS News

Now Loading

Article

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

 html+CSS+javascript 
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

Popular Article

Access Ranking

Now Loading...

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