1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. CSS3 ドラえもんでIE10とOpera11のCSSグラデーションに対応させました!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
YouTubeでHTTP Error 400が出てサイトにアクセスできない時の解決方法!

YouTubeでHTTP Error 400が出てサイトにアクセスできない時の解決方法!

今回はYouTubeで出くわしたHTTP Error 400(Bad Request)が出て、YouTubeにアクセスできなくなってしまった時の解決方法を紹介したいと思います。この現象が発生してしまう...

日本郵便が無償で提供する年賀状ソフト「はがきデザインキット2019」がおすすめ!

日本郵便が無償で提供する年賀状ソフト「はがきデザインキット2019」がおすすめ!

今年も残すところあと30日間を切り、もうそろそろ年賀状を用意して送らないといけない時期ですね。そこで今回は年賀状作成ソフトについて書きたいと思います。ちなみにみな...

ついにFC2ブログの独自ドメインがSSL対応したのでSSL化しました!

ついにFC2ブログの独自ドメインがSSL対応したのでSSL化しました!

ついにFC2ブログで独自ドメインを使ってるブログもSSLに対応しました。FC2のサブドメインを使っているブログは2017年10月からSSL化されていましたが、有料プランである独自...

CASIO G-SHOCKタフソーラーの二次電池交換をWEB修理受付サービスからしてみた!

CASIO G-SHOCKタフソーラーの二次電池交換をWEB修理受付サービスからしてみた!

今回はCASIOの時計のG-SHOCKタフソーラーの二次電池交換をWEB修理受付サービスから申請した時の流れを書きたいと思います。G-SHOCKタフソーラーの二次電池の場合は普通の時...

KADOKAWAの電子書籍が半額でさらにポイント50倍のニコニコカドカワ祭りがものすごい!

KADOKAWAの電子書籍が半額でさらにポイント50倍のニコニコカドカワ祭りがものすごい!

現在電子書籍ストアのBOOK☆WALKERで開催されているニコニコカドカワ祭り2018でものすごいキャンペーンを実施中です。KADOKAWA作品が19000点が半額でさらに45000点がコイン5...

Amazon.comで不良品が送られてきたのでEMSで返品して返金してもらった話!

Amazon.comで不良品が送られてきたのでEMSで返品して返金してもらった話!

以前に海外のAmazonを有効活用して安く買い物をしよう!という記事で簡単に海外のAmazon.comから輸入する方法を紹介しましたが、今回は海外Amazonで購入したものが不良品だ...

総額350ドル!有料ソフト8製品のライセンスキーを無料配布するキャンペーンが実施中!

総額350ドル!有料ソフト8製品のライセンスキーを無料配布するキャンペーンが実施中!

WonderFox Soft, Inc.は同社製品である新しいWonderFox HD Video Converter Factory Proを含む合計8製品のライセンスキーを無料配布するWonderFox 2018 Back to School Par...

Chromeのタブを休止させてメモリ消費を抑えられる拡張機能「The Great Suspender」を使おう!

Chromeのタブを休止させてメモリ消費を抑えられる拡張機能「The Great Suspender」を使おう!

みなさんもよく使っているであろうブラウザのChromeですが、タブを沢山開いているとメモリの消費量がすごいことになることがよくありますよね。そんな時におすすめなのがCh...

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

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

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

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

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

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

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...