1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. CSS3 ドラえもんでIE10とOpera11のCSSグラデーションに対応させました!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
Kindle Unlimitedが3ヶ月249円で電子書籍が読み放題のキャンペーンを実施中!

Kindle Unlimitedが3ヶ月249円で電子書籍が読み放題のキャンペーンを実施中!

現在AmazonではKindle Unlimited(通常月額980円)が3ヶ月249円で利用可能になるキャンペーンを実施しています。Kindle UnlimitedはAmazonが提供する電子書籍読み放題サービ...

Bluetooth対応のスマート体重計・体組成計が送料込み1290円の大特価!

Bluetooth対応のスマート体重計・体組成計が送料込み1290円の大特価!

現在AmazonではBluetooth対応のスマート体重計・体組成計がなんとクーポンコードを使用することで衝撃の1290円で販売されています。スマート体重計・体組成計はスマホやタ...

Googleが11.11特別価格セールを実施中!Google HomeやChromecastなどが対象!

Googleが11.11特別価格セールを実施中!Google HomeやChromecastなどが対象!

現在、Googleが11.11だけの特別価格セールを実施しています。Google Pixel 4 / 4 XL を購入すると、Google Nest Hubをプレゼントしたり、Google Nest Hubが4,400円引き、Go...

SONY NEXシリーズのダミーバッテリーUSB電源ケーブルを買ってみた!

SONY NEXシリーズのダミーバッテリーUSB電源ケーブルを買ってみた!

私はブログでレビュー記事を書く時に写真はSONY NEX-5Nという今ではだいぶ古いカメラを使っているのですが、最近の悩みはバッテリーがすぐに無くなってしまい、製品の写真...

ダイソーの防滴ワイヤレスBluetoothスピーカー「BTS-032A」を買ったみた!

ダイソーの防滴ワイヤレスBluetoothスピーカー「BTS-032A」を買ったみた!

今回紹介するのは100円ショップのダイソーで販売されているワイヤレスBluetoothスピーカーの防滴仕様です。スマホとなどとBluetoothで連携して、ワイヤレスで音楽などを再...

DearMob iPhoneマネージャーでiTunesを使わず音楽を転送しよう!

DearMob iPhoneマネージャーでiTunesを使わず音楽を転送しよう!

前回はDearMob iPhoneマネージャーでiTunesを使わない簡単に写真を転送する方法について紹介しました。今回の記事ではiTunesを使用せずにDearMob iPhoneマネージャーで簡単...

Auslogics Windows SlimmerでWinSxSフォルダを小さくしよう!

Auslogics Windows SlimmerでWinSxSフォルダを小さくしよう!

今回はAuslogics Windows Slimmerを使ってWindowsの無駄なファイルを整理してSSDやHDDの容量を増やす方法を紹介したいと思います。Auslogics Windows SlimmerにはWinSxSフ...

合計900ドルのソフトウェアをプレゼント!WonderFoxのハロウィンキャンペーン!

合計900ドルのソフトウェアをプレゼント!WonderFoxのハロウィンキャンペーン!

WonderFoxでは、合計900ドル分となる18個のソフトウェアのライセンスコードをプレゼントするWonderFoxハロウィンキャンペーンを実施しています。このキャンペーンは2部に分...

スマートスピーカーAmazon Echo Dotが999円で販売中!Music Unlimited(1ヶ月分)付き!

スマートスピーカーAmazon Echo Dotが999円で販売中!Music Unlimited(1ヶ月分)付き!

現在AmazonではスマートスピーカーAmazon Echo Dotの第3世代が過去最安値となる999円で販売されています。さらに今回はAmazon Echo Dotに加えて音楽定額配信サービスのAmaz...

NetaGear RSS News

Now Loading

Article

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

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