1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. ついにIEでも丸いドラえもんが!?CSS3 ドラえもんをIE9に対応させました!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
VEGAS Pro 17発売記念で最大92%Offのキャンペーンを実施中!

VEGAS Pro 17発売記念で最大92%Offのキャンペーンを実施中!

現在ソースネクストでは、VEGAS Proの新バージョンとなるVEGAS Pro 17の発売を記念して、VEGAS製品を大幅に値引きするスーパーチャンスのキャンペーンを実施しており、最大...

Lecone Qi 10Wワイヤレス充電台&紫外線UV除菌器を使ってみた!(30%Offクーポンあり)

Lecone Qi 10Wワイヤレス充電台&紫外線UV除菌器を使ってみた!(30%Offクーポンあり)

今回紹介するのはLeconeのQiワイヤレス充電台&紫外線UV除菌器です。置くだけでスマホなどを簡単に充電できるQiワイヤレス充電器とボックスの中に入れたスマホや小物などを...

Samsung Galaxy A80がフラッシュセールで激安!さらに66ドル安くなるクーポンあり!

Samsung Galaxy A80がフラッシュセールで激安!さらに66ドル安くなるクーポンあり!

今回はSamsung Galaxy A80の激安情報とクーポンについて紹介します。ただいま、GearBestでは、Samsung Galaxy A80 4G Phablet 8GB RAM 128GB ROM Original International V...

MOTOROLA Moto Zのバッテリーを自分で交換してみました!

MOTOROLA Moto Zのバッテリーを自分で交換してみました!

私の愛用しているモトローラ製のスマホのMoto Zなんですが、購入して2年も経たずにバッテリーが異常で100%まで充電しても5分くらいで落ちるというくらいヘタってしまったの...

AliExpressでスマホのバッテリーを激安で輸入してみました!

AliExpressでスマホのバッテリーを激安で輸入してみました!

最近スマホのバッテリーの調子が悪くて、100%まで充電しても5分くらいで電源が落ちてしまうようになってしまいました。交換用バッテリーをamazonなどで探していたのですが...

Leconeの5in1機能モバイルバッテリー付きUSB扇風機を使ってみた!(クーポンコードあり)

Leconeの5in1機能モバイルバッテリー付きUSB扇風機を使ってみた!(クーポンコードあり)

今回はLeconeの5in1機能 モバイルバッテリー付きUSB扇風機を紹介したいと思います。この5in1機能とは5つの機能がありモバイルバッテリー、携帯扇風機、卓上扇風機、スマホ...

合計230ドル!?8個のソフトウェアを無料でゲットできるキャンペーン!

合計230ドル!?8個のソフトウェアを無料でゲットできるキャンペーン!

現在WonderFoxとFotoJet、Auslogics、WiseCleaner、Epubor、Iris、DoYourData、PCWinSoftの8社が協力して、8つのソフトウェアのライセンスを無料でプレゼントする新学期キ...

VirtualBoxにElementaryOSをインストールしよう!

VirtualBoxにElementaryOSをインストールしよう!

前回の記事のOracle VM VirtualBoxで仮想マシン環境を構築しよう!ではVirtualBoxをインストールして仮想マシンを作れる状態までやりました。そこで今回はその続きで実際に...

Oracle VM VirtualBoxで仮想マシン環境を構築しよう!

Oracle VM VirtualBoxで仮想マシン環境を構築しよう!

今回はOracle VM VirtualBoxを使ってelementary OSの仮想マシン環境を構築したいと思います。Linuxなどの他のOSを使いたい時に、物理マシンにインストールするというのもあ...

NetaGear RSS News

Now Loading

Article

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

Webデザイン > 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位が表示されます。今ならリンクするだけで簡単に上位に表示されます。