1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. ついにIEでも丸いドラえもんが!?CSS3 ドラえもんをIE9に対応させました!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
無料で使えるVRoid Studioでオリジナル3Dキャラクターを作ろう!

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

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

360度角度調整可能なKeynice USB扇風機クリップ型を買ってみた!

360度角度調整可能なKeynice USB扇風機クリップ型を買ってみた!

今回紹介するのは縦横360°回転&細かな角度調節が可能なKeynice クリップ型USB扇風機です。USB電源で動作する小型な扇風機で、クリップを使うことでどこでも挟んで使えるほ...

WindowsにKerasとTensorFlow(GPU)をインストールして機械学習の環境を作ろう!

WindowsにKerasとTensorFlow(GPU)をインストールして機械学習の環境を作ろう!

ここ最近は機械学習にはまっていて、前々から気になっていたTensorFlowを試してみたいと思い、実際にWindowsにインストールしてみたので、その導入手順を紹介したいと思い...

スマホ用のBluetoothカメラリモコンが送料込み67円だったので買ってみた!

スマホ用のBluetoothカメラリモコンが送料込み67円だったので買ってみた!

今回紹介するのはスマートフォン用のBluetoothワイヤレスカメラリモコンです。Amazonで衝撃的な安さで販売されていたので試しに購入してみました。このBluetoothリモコンを...

Amazonのお急ぎ便で配送予定日に届かずカスタマーサービスに伝えたらクーポンがもらえた話!

Amazonのお急ぎ便で配送予定日に届かずカスタマーサービスに伝えたらクーポンがもらえた話!

先日アマゾンプライムデーセールが行われていた影響か、アマゾンでの荷物の出荷数が通常よりもかなり増えてクロネコヤマトの配送に遅延が発生しているようです。そんなわけ...

無料で使える軽量なコードエディタの「Visual Studio Code(VS Code)」を使ってみよう!

無料で使える軽量なコードエディタの「Visual Studio Code(VS Code)」を使ってみよう!

今回紹介するのはMicrosoftが無償で提供しているソースコードエディタであるVisual Studio Code(VS Code)です。VS CodeはWindows/Mac/Linuxの全てで動作します。私は個人的...

マイクロナノバブルシャワーヘッド「Bollina Ninfa」を買ったみた!

マイクロナノバブルシャワーヘッド「Bollina Ninfa」を買ったみた!

今回紹介するのは株式会社TKS 田中金属製作所が制作したマイクロナノバブルシャワーヘッド「Bollina Ninfa(ボリーナ ニンファ)」TK-7100-SLです。マイクロナノバブルと...

NetaGearで無限スクロール対応とカテゴリー追加などのアップデートを行いました!

NetaGearで無限スクロール対応とカテゴリー追加などのアップデートを行いました!

今年の2月にデザインや機能において大幅なアップデートを行ってから順調に利用者が増えているNetaGearですが、今回無限スクロールに対応して今までよりも見やすくなりまし...

adbコマンドを使ってPCからAndroidのスクリーンショットを取る方法!

adbコマンドを使ってPCからAndroidのスクリーンショットを取る方法!

今回はAndroidでadb接続からスクリーンショットを取る方法を紹介したいと思います。通常のAndroidのスマホやタブレットでは電源ボタンと音量ボタンの長押しで簡単にスクリ...

タブレットやスマホを自由に配置できるタブレットアームを買ってみた!

タブレットやスマホを自由に配置できるタブレットアームを買ってみた!

今回はタブレットをいろいろな場所に自由に配置することができるタブレットアームを購入したので紹介したいと思います。先日の記事のタブレットをPCのサブディスプレイ化で...

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

Access Ranking

Now Loading...

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

Amazon

Now Loading...