internetWebページを作成するのに用いるHTML言語は、HTML 4.01が主流ですが、スマホをはじめ、徐々にHTML5が普及してきております。

また、CSSに関してはCSS3が登場しておりますが、CSS2.1が最も普及しております。

この記事を書いている段階では、HTML5やCSS3への対応状況はブラウザによってバラバラです。
そして、完全に対応しているブラウザはないようです。

HTML5には、Google Chrome 3.0以降、Safari 3.0以降、Firefox3.1以降、Opera9.6以降、Internet Explorer 8以降 が対応するようになってきております。

ブラウザへの対応と言えば、以前に比べれば利用率が落ちているとはいえ、IEは決して無視する事は出来ません。

古いパソコンを利用している人の中には、IE 8やそれより古いバージョンのIEを利用している人もおります。
IE 8は、まったくHTML5のタグには対応しておらず、IE 8やそれより前のバージョンでは、HTML5やCSS3を利用する上では問題となります。

特に、Windows XPは2014年の4月にサポートが切れますが、XPではIEは8までしか使用できません。
少なくともサポート切れまではHTML5やCSS3を導入する場合は、IE 8の事を考慮する必要があるでしょう。

そこで、ここでは古いバージョンのIEでHTML5やCSS3に対応させる話やブラウザに関する話をしていきます。






ブラウザのシェアについて


HTML5の話に限りませんが、Webページを制作する時には、最低限でも主要ブラウザには対応しておきたいところです。

かなり古いブラウザはさすがに無視しても良いとは思いますが、主要ブラウザだけではなく、本当は出来る限りは数多くのブラウザで見る事が出来るようにするのがベストです。

このブログの記事でも、「ソーシャルボタンをきれいに並べて設置する方法」で、何も意識しないとブラウザによって見え方が異なる場合がある事について触れております。

これ以外でも、特にIEは、他と違う記述をしないと表示内容がおかしくなってしまう、という場合が良くあります。

Webページの対応について考慮する時には、まず、ブラウザのシェアについて調べておきたいところです。

ですから、まずはブラウザのシェアについてのお話しをしておきます。

ブラウザのシェアについて調べているところはいくつかあるようですが、「StatCounter」が有名です。

StatCounterでは300万以上のWebサイトを、一月当たり150億ページビューを超えるサンプルを元にしているそうです。

統計データは4時間ごとに更新されますが、あまり新しいデータだと14日間は品質保証テストや改定があるそうです。

h5-1
SttatCounterのページ

詳しい使い方はここでは説明しませんが、このサイトではブラウザ別のシェアを調べたり、ブラウザのバージョン別のシェアを調べる、OSやモバイルのブラウザのデータなどを調べる事が出来ます。

また、全世界の統計だけではなく、国ごとの統計を調べる事が出来ます。

そして、2008年からのデータをグラフで見る事が出来ます。

このように色々なデータを見られるだけではなく、グラフの表示を変えたり、画像ファイルで保存する他、タグを生成してブログに貼りつける事も可能です。

このサイトの紹介が、今回の記事のメインではないので、このサイトの話はこのぐらいにしておいて、次の二つのデータを見てみます。

StatCounter-browser-JP-monthly-201301-201309
日本の2013年1月-2013年9月までの主要ブラウザ5つの割合の推移

StatCounter-browser_version-JP-monthly-201301-201309
日本の2013年1月-2013年9月までの主要12のバージョン別ブラウザの推移

まず、ブラウザ別のシェアを見てみると、日本でのIEの利用率は9月時点でも50%程度あります。
(世界では2013年9月時点で30%程度)

そして、ブラウザのバージョン別で見てみると、HTML5に対応していないIE 8.0が10.7%となっております。
(世界では2013年9月時点で9.5%)

つまり、IE 8の利用者が10%程度おり、決して無視できる割合ではないという事が分かります。

ちなみに、世界規模だとChromeがシェア1位で40%を超えており、IEは30%を切っております。Chromeユーザーが増えている理由の一つとしては、HTML5に最も対応しているブラウザである事が大きいようです。

日本のネット利用者は、あまり最新技術には関心が無いのか、HTML5に対する意識に世界とはかなりの差があるようです。

HTML5やCSS3へのブラウザの対応状況


HTML5やCSS3への各ブラウザの対応状況を公開しているサイトがあるので紹介します。

findmebyIP.com
findmebyIP.com」というサイトでは、ブラウザやバージョンごとのCSS3やHTML5の対応状況をみる事が出来ます。

h5-2
findmebyIP.comのページ
HTML5とCSS3への各ブラウザの対応状況が見られる


Can I use...
Can I use...」ではHTML5、CSS3などの対応状況を表示してくれます。
デスクトップだけではなくモバイルブラウザも記載されております。

h5-6
「Can I use...」のページ


自分のブラウザがHTML5やCSS3にどの程度対応しているかのチェック


findmebyIP.com」を見てもらえば、自分のブラウザのHTML5への対応状況は分かると思いますが、もっと確実に知るには自分のブラウザをテストして見ることです。

そこで、自分のブラウザの対応状況を確認出来るサイトを紹介していきます。

THE HTML5 TEST」というサイトは、500点満点でブラウザの対応状況をチェックしてくれます。

ページにアクセスするとすぐに結果が出ます。


対応していないタグをjavascriptで認識させる方法


HTML5で追加されたタグは、対応していないブラウザでは無視されます。
そのために、タグに設定したスタイルシートまで無視されてしまいます。

そこでjavascriptを記述する事によって、ある程度はフォローする事が出来ます。
タグとしてスタイルを適用する事が出来るだけで、タグの機能をそのまま使えるわけではないですが、それでも幾分かはマシになります。

次のように記述します。

<script type="text/javascript">
   document.createElement("HTML5のタグの名前(navなど)");
(以下、HTML5の認識させたいタグだけ追加する)
</script>

上記で指定したタグの名前はタグとして認識されるようになり、CSSも適用されるようになります。

また、HTML5のタグを認識するようになった場合は、そのままだとインライン要素として表示され、レイアウトが崩れてしまうのでブロック要素に置き換えるようにするために次のようにCSSで指定します。

(認識させたいHTML5のタグの名前) {
    display: block;
}

古いバージョンのIEをHTML5やCSS3に対応させるライブラリの紹介


javascriptを自分で記述してタグを認識させるのは、かなり大変です。

そのような事をしなくても、IE 8以前でもHTML5やCSS3をある程度対処できるように、ライブラリがありますので紹介します。

HTML5やCSS3への対応ライブラリを紹介しますが、それぞれのライブラリでは出来る事や出来ない事は異なります。

html5shiv
こちらよりダウンロードできます。(最新バージョンはgithubでもチェックした用が良いです。また、html5shivに関する説明も書かれております。)

ダウンロードしたファイルの「dist」フォルダに含まれるファイルを自分の用意しているサーバーにアップロードします。

「html5shiv-printshiv.js」と「html5shiv.js」という二つのファイルがありますが、この二つのファイルの違いは印刷時のサポート機能があるかないかの差らしいです。

「html5shiv-printshiv.js」にはサポート機能があるようです。

自分が用いたいファイルのどちらか片方をアップロードして下さい。

次の記述を<head>タグ内に記述します。(赤字の部分は自分のアップロードしたサーバーのURLに合わせて変更する)

<!--[if lt IE 9]>
<script src="html5shiv.jsのURL"></script>
<![endif]-->

これで、IEのバージョンが8以前の場合にhtml5shiv.jsが読み込まれ、基本的なHTML5には対応できます。

ダウンロードではなく、Google CodeのリポジトリのURLを指定し、URLに「http://html5shiv.googlecode.com/svn/trunk/html5.js」と入力しても利用できます。

ただ、このURLは私が確認した2013.10.21時点でも有効ですが、zipファイルをダウンロードして使うようになる前の方法のようで、そのうち使えなくなるかもしれません。

また、この方法はいくつかの理由であまり望ましくないようなので、素直にダウンロードして利用する方が良いです。

CSS3 Pie
こちらよりダウンロードできます。

IE6-9でCSS3の役立つ機能のいくつかを実装できるようにします。

右のメニューよりダウンロードできるほか、簡単なDEMOを試す事が出来ます。

h5-3
CSS3 Pieの公式サイト

導入の仕方は、ダウンロードしたzipファイルを解凍し、解凍したファイルをサーバーにアップロードします。

アップロードしたら、CSS3を記述します。

例えば、「border-radius」は角を丸めますが、CSS3に対応していないと機能しません。
そのCSSの記述部分に、次の記述を追加します。

behavior: url(PIE.htcファイルのURL);

あとは、IE 8以前のブラウザで実際に確認して見て下さい。

他にも機能がありますが、詳細は公式サイトを確認してください。
デモがありますので、どういう事が出来るのかは分かります。

ie7-js
こちらからダウンロードできます。

IEは、標準準拠になっていない事が多いので、それを標準準拠した記述に対応するようにするライブラリです。
HTMLやCSSを修正し、IE5.5からIE8までに対応しております。

さすがにIE5.5などはもう古いですが、IE8はまだ役立つと思います。

いくつかファイルがありますが、IE9.jsをアップロードして次のように<head>タグ内で記述します。

<!--[if lt IE 9]>
<script src="IE9.jsのURL"></script>
<![endif]-->

また、このライブラリはダウンロードしなくても「http://ie7-js.googlecode.com/svn/version/」へアクセスすると、バージョン別にファイルがあるのでそのURLを直接入力する事でも利用できます。

例えば、「http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js」とURLに指定すればIE9.jsの最新バージョンを利用できます。

Charles Cooke ONLINEに英語ですが、使い方が詳しく紹介されております(ただ、かなり古いです)。

Selectivizr
こちらよりダウンロードできます。

IE6 - 8までのCSS3の疑似クラスに対応するためのJavascriptライブラリです。

h5-4
Selectivizrのページ

このライブラリを用いる場合は、サイトで紹介されている7つのライブラリのうちの一つと併用して利用する必要があるようです。
jQueryやprototypeなどがありますが、公式サイトの方で7つのライブラリについては確認して下さい。
対応するセレクタは、利用するライブラリによって異なります。

<script type="text/javascript" src="併用するjavascriptライブラリのURL"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.jsのURL"></script>
  <noscript><link rel="stylesheet" href="javascriptに対応していない場合に用いるCSSファイルのURL" /></noscript>
<![endif]-->

クロスブラウザとプログレッシブ・エンハンスメントの説明


HTML5やCSS3への対応の話をしましたが、ここでクロスブラウザとプログレッシブ・エンハンスメントについて説明します。

クロスブラウザとは、全てのブラウザで同じように表示したり動作するようにしようという考え方です。

この考え方は、次第に疑問を持たれるようになりました。

そして、生まれたのがプログレッシブ・エンハンスメントという考え方です。

プログレッシブ・エンハンスメントとは、どのユーザーにも提供される情報は同じだが、HTML5やCSS3への対応状況に応じて、表現の仕方を変えようという考え方です。

HTML5やCSS3に対応しているブラウザでは、その機能を生かしてよりリッチな表現を行います。対応していないブラウザや古いブラウザは切り捨てるのではなく、表現の仕方を変えて対応するのです。

HTML5やCSS3への対応が、ブラウザによって対応状況がバラバラであるために、プログレッシブ・エンハンスメントという考え方は重要で、対応しているサイトも増えております。

HTML5やCSS3に対応すべきかどうか?


HTML5やCSS3に対応するための話をしてきました。

話の中でIEをHTML5やCSS3に対応させるためのライブラリを紹介しましたが、「html5shiv.js」や「IE9.js」は良く利用されているようです。また、ライブラリを導入したからといって疑似的に対応しているだけで全部に対応できるわけではないです。

そして調べると、これらのライブラリは、javascriptファイルを読み込むために重くなるから導入しない方が良い、といったように否定的な意見もあれば、そんな古いブラウザを使っている時点でパソコンのスペックも低く重いのだろうし、どうせいつかはHTML5やCSS3に対応する必要があるなら余計な作業を増やさず最初からHTML5やCSS3で対応した方が良い、などという意見もあるようです。

そのようなわけで、HTML5やCSS3でページを作るべきか、これまでのHTML 4.01やを用いるべきかを聞かれると判断に難しいのが現状のようです。

出来れば、プログレッシブ・エンハンスメントの考え方を元に、対応していった方が良いでしょう。

ネットユーザーにブラウザを最新バージョンに切り替えてもらえれば一番よいのですが、そういう訳にも行きませんから困ったものです。


[参考URL]
1. Webマーケティングを極める より
「HTML5へのIE対応について」 - http://html5-lab.jp/html5/159.html
2. Web Creator Net より
「HTML5導入前に覚えておきたいこと」 - http://www.webcreator-net.com/tips_memo/html/20111222224527.html
3. TAG<Index> より
「IE8以下への対応」 - http://www.tagindex.com/html5/basic/outdated.html
4. 9142.NET より
「HTML5でのIE対応 : html5shiv」 - http://www.9142.net/html-css/html5-ie/
5. Skyword Design より
「IE対応でよく利用するhtml5shivの使用方法変更について」 - http://www.skyward-design.net/blog/archives/000134.html
6. HTML5 - CSS3 mag より
「IE6、7、8でもCSS3のセレクタをりようかのうにする「Selectivizr」」 - http://html5-css3.jp/useful/ie6-7-8-css3-selectivizr.html
7. @IT より
「Internet Explorer 10のHTML5/CSS3対応度は?」 - http://www.atmarkit.co.jp/ait/articles/1304/11/news053.html
8. コトのおもちゃ箱 ~ぼへぼへ自衛強者の技術メモ~ より
「HTML5のIE8対応「html5shiv.js」の役割を誤解してた&HTML5のIE8対応って必要?」 - http://piyopiyocs.blog115.fc2.com/blog-entry-451.html
9. monoe's blog より
「HTML5 コンテンツを古い Internet Explorer に対応させるには?」 - http://blogs.msdn.com/b/osamum/archive/2011/06/29/html5-internet-explorer.aspx
10. mae's blog より
「HTML5 & CSS3のクロスブラウザー対応方法まとめ」 - http://mae.chab.in/archives/1463
11. ハナモゲラボ・ネット より
「IE8以下にHTML5をどうやって表示させるかの諸々」 - http://blog.g-fellows.com/web/css/593/
12. TECHMEMO より
「CSS3やHTML5のブラウザ対応状況を確認できる「Can I use…」」 - http://princesswell.rocketserver.jp/html/can-i-use/