1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. CSS3 ドラえもんでIE10とOpera11のCSSグラデーションに対応させました!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
ロジクールのSetPointを拡張する「SetPointPlus」で様々な機能を追加しよう!

ロジクールのSetPointを拡張する「SetPointPlus」で様々な機能を追加しよう!

ロジクールのマウスのボタン設定などを行うソフトであるSetPointですが、このSetPointを拡張して様々な機能を追加することが出来る「SetPointPlus」を紹介したいと思います...

日本未発売のコスパ最高Android Oneスマホの「Xiaomi Mi A1」を使ってみた!

日本未発売のコスパ最高Android Oneスマホの「Xiaomi Mi A1」を使ってみた!

前々から気になっていたAndroid Oneを入手したのでレビューを書きたいと思います。ちなみに今回のAndroid Oneスマホは日本では未発売でコスパ最強の「Xiaomi Mi A1」です。...

GearBest.comを使って海外からスマホやガジェットなどを安く買い物をする方法!

GearBest.comを使って海外からスマホやガジェットなどを安く買い物をする方法!

海外からスマホやガジェットなどを安く輸入したいときに便利なサイトのGearBestを紹介したいと思います。日本では売っていないような珍しいスマホやタブレット、周辺機器な...

サイトのデザインをVer3.5にアップデートしました!

サイトのデザインをVer3.5にアップデートしました!

本日よりShopDDのテンプレートデザインをVer3.5にアップデートしました。今回のアップデートでは見た目はあまり変化がないですが、内部コンテンツを大幅に書き直して高速化...

radikoや超!A&G+など様々なネットラジオを録音できるソフト「AnGe4u」がすごい!

radikoや超!A&G+など様々なネットラジオを録音できるソフト「AnGe4u」がすごい!

今はラジオもネット進出している時代で、昔以上にラジオは身近な存在になっています。そんな中でもリアルタイムで聞くのは難しいことも多々あり、録音してあとで聞きたいと...

ブラウザ上で簡単にロゴをデザインできるサイト「DesignEvo」が便利!

ブラウザ上で簡単にロゴをデザインできるサイト「DesignEvo」が便利!

DesignEvoは、誰でも簡単に魅力的でユニークなロゴを創り出すために、4000以上のテンプレートを備えた無料のオンラインロゴ製作サイトです。ブラウザを使ってWebサイト上で...

コピー禁止の保護されたPDFファイルから簡単にテキストをコピーする方法!

コピー禁止の保護されたPDFファイルから簡単にテキストをコピーする方法!

PDFファイルと言えば幅広く使われているファイル形式ですが、中にはセキュリティ保護によって内容をコピーできないPDFも存在します。今回はPDFセキュリティ保護の「内容の...

Amazonプライム特典の「Twitch Prime」で毎月無料でゲームをもらう方法!

Amazonプライム特典の「Twitch Prime」で毎月無料でゲームをもらう方法!

Amazonプライム会員の特典として提供されている「Twitch Prime」では、追加料金なしで毎月ゲームが無料で手に入る会員限定のまったく新しいキャンペーン、「Primeでゲーム...

コスパ最強のdtab d-01JがついにAndroid 7.0へアップデートされました!

コスパ最強のdtab d-01JがついにAndroid 7.0へアップデートされました!

昨年購入したコスパ最強タブレットのdtab Compact d-01JがついにAndroid 7.0 Nougat(ヌガー)へアップデートが開始されました。タブレットの場合は画面も大きいのでスマホ以...

PS3のコントローラーをXInput Wrapper for DS3でパソコンに簡単に接続する方法!

PS3のコントローラーをXInput Wrapper for DS3でパソコンに簡単に接続する方法!

以前このブログではパソコンとPS3コントローラーをBluetooth接続して遊べるMotionJoy!という記事で紹介した通り、MotioninJoyを使ったPS3コントローラーをパソコンで使う...

NetaGear RSS News

Now Loading

Article

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

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

MENU

NetaGear

Pure Css Design

Access Ranking

Now Loading...

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

Amazon

Now Loading...