1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. CSS3 ドラえもんでIE10とOpera11のCSSグラデーションに対応させました!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
Facebookのいいね・シェア数が表示されなくなったので修正しました!

Facebookのいいね・シェア数が表示されなくなったので修正しました!

先日から記事のFacebookのいいね数(シェア数)の自作ボタンの数が表示されなくなっていることに気がつきました。最初は一時的なサーバーの問題かと思ったのですが、数日経っ...

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

NetaGear RSS News

Now Loading

Article

CSS3 ドラえもんでIE10とOpera11のCSSグラデーションに対応させました!

 html+CSS+javascript 
doraemon_css3_v3_000.png

昨年公開して大好評だったCSS3 ドラえもんですが、久しぶりにコードを編集してバージョン3にしました。今回のバージョンアップによりInternet Explorer10とOpera11のCSSグラデーションに対応させました!これにより、ついに全てのモダンブラウザで同一表示が可能になりました!

今回のコード追加対応で、IE10とOpera11はChromeやfirefoxと同等の表示が可能になっています。今回のはブラウザのバージョンアップによるCSS3グラデーションの対応であって、IE8以下では今まで通りの四角いドラえもんです。
doraemon_css3_v2_001.png
CSS3 ドラえもん ver3

CSS3 ドラえもんとは、画像を一切使わずにドラえもんの絵を描いたものです。使うものはHTML+CSSだけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。

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

各ブラウザの動作


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

           ↓↓↓↓

doraemon_css3_v3_004.png
今回のバージョン3ではIE10、Opera11もちゃんとグラデーションが適用されており、全てのブラウザで同一表示のドラえもんになりました。

CSS3サイト


doraemon_css3_v2_003.png
Pure css design


今回これらのCSS3シリーズをまとめておくサイトとして、Pure Css Designというサイトを作りました。Chromeで見るとCSSアニメーション付です。

今回の個人的感想




今回のバージョンアップによって、ほぼ全てのモダンブラウザでちゃんとCSSドラえもんが表示できるようになりました。IE10とOperaでもグラデーションが表示されとりあえず一安心という感じですかねー。

本当はもっと早く公開すべきものであり、実際に半年くらい前にIE10対応版のコードを書いあったのですが、実は記事の方を書いてなく修正版を公開していなかったかったというオチでした。そんなこんなでWindows8を入れたときにテストしてみて気がついたので、早速記事にしました。

まあ、でもうちのサイトのIEユーザのアクセス解析ではIE10の利用率は0.02%、IE9ですら未だに38%ですし、IE8が55%も蔓延ってる状況ではCSS3をがんがん使っていくという状況ではないですかねー。それでも以前に比べれば格段にIE9の使用率が上がっていることも確かです。IE10がまともに使われ始めるのは正式公開されて1年後くらいになりそう。

Related article

COMMENT TO THIS ENTRY

ドラえもんが可愛いと思えたのは初めてだ
にしてもすごいですね。やろうと思えばCSSとか全く知らない人でも出来るんですかね?

9427

Most Popular

Now loading...

Social Links

Sponsored Link

Popular Article

Access Ranking

Now Loading...

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