0

HTML5で作成するときのIE対応

HTML5で作成するときのIE対応

ここ最近Webサイトの傾向として、様々な企業やブランドがHTML5を導入したサイトを利用するようになってきています。
基本的にHTML5から導入された、新しいhtmlタグやCSSの属性などへのブラウザ対応がまちまちで、皆が様子を見ていたような気がしますが、JavaScriptを使用してHTML5未対応IE6~8間に対応が可能になってきたことをキッカケにHTML5を使用したサイトが急激に増えてきました。そこで、それぞれのブラウザの対応状況やHTML5のIE対策方法に関して記録しておきます。

ブラウザの対応状況

まずは、自分が普段使用しているブラウザのHTML5対応状況を確認してみます。

私が普段使用しているブラウザは以下になります。

・Google Chrome 32.0.1700.76
・Firefox 26.0
・Internet Explorer 10.0.9200.16750
・Safari 5.1.7
・Opera 18.0.1284.68

そして、それぞれのブラウザがどれくらいHTML5対応になっているかをチェックしてみます。

チェックできるサイトはこちらHTML5TEST

html5test

your browser
自分の現在使用しているブラウザのスコアが確認できます。

other browsers
様々なブラウザのバージョンのスコアが掲載されており、スコアが高いほどHTML5に対応しているということがわかります。

 

私が普段使用しているブラウザのスコアは以下のようになりました。

Google Chrome 32.0.1700.76 503/555
Firefox 26.0 442/555
Internet Explorer 10.0.9200.16750 335/555
Safari 5.1.7 260/555
Opera 18.0.1284.68 492/555

iw10

 

現在のブラウザシェア

各国や世界で利用されているブラウザのシェア率を確認してみます。

 

statcounter

日本国内(2012年2月から2014年1月までのシェア率)

日本国内ブラウザシェア

1位 Internet Explorer 49.38%
2位 Google Chrome 23.94%
3位 Firefox 13.21%
4位 Safari 9.24%
5位 Opera 1.05%

世界(2012年2月から2014年1月までのシェア率)

世界ブラウザシェア

1位 Google Chrome 37.1%
2位 Internet Explorer 30.09%
3位 Firefox 21.59%
4位 Safari 7.91%
5位 Opera 1.39%

こうして見てみると、海外ではChrome37.1%で1位、日本国内ではInterbet Explorerが飛びぬけて49.38%で1位をキープし続けています。IEに関して言えば、HTML5はバージョン8以降にしか対応していませんので、国内サイトにとっては悩ましい問題になっています。

 

HTML5とCSS3のサポート状況

各ブラウザごとのHTML5とCSS3のサポートの状況を確認してみましょう。

findmebyip

IEの対応表示がほとんど「×」になっています。
HTML5から便利な新しい要素が数多く追加されましたが、IE8以下ではそのHTML5の新要素に対応していないので、要素が無視されスタイルなどが適用されない状況にあります。つまりは、IE8以下で閲覧しているユーザーのブラウザにだけ正確に表示されないということが起きてしまいます。そこでIEにHTML5の新要素を認識させる方法が開発されました。

 

IEのHTML5対応

HTML文書内にIEに対応させるためのライブラリを読み込ませることで、IEの下位のバージョンでもある程度認識させることが可能になりました。ただし、全ての要素に対応するというわけではないので、HTML5+CSS3を適用した箇所は、必ず正常に動作しているか検証するのは忘れないようにしましょう。

▼IE対応によく使われているライブラリ

html5shiv

IE8以前のブラウザにも、基本的なHTML5タグを認識させるためのライブラリです。

 

以下のコードをheadタグに記載します。

 

css3pie

JavaScriptを使ってIE6~8のCSS3プロパティを表示可能にします。
角丸、シャドウ、ボーダー画像、複数背景画像、グラデーションに対応。「PIE.htc」というファイル名で配布されているので、このファイルを、IEの独自拡張である「behaviorプロパティ」の値に指定すると、IE6~8でもCSS3プロパティを使ったデザインが表示可能になります。対応しているCSS3プロパティは少数ですが、ボックスを角丸にしたり、ドロップシャドウをつけたり、使用頻度の高い効果を実現できます。

 

CSSのプロパティを使ったスタイルシートの末尾に、behaviorプロパティを記述し、値に「PIE.htc」ファイルへの絶対パスを記述します。

例えば、box-shadowプロパティを使って<h1>要素に影を付ける場合は、以下のように記述します。

 ※注意しなければならない点は、この「PIE.htc」のファイル指定ですが、CSSからの相対パスではなくHTMLからの相対パス指定をしなければならないので、混乱を避ける為に絶対パスで記述することをオススメします。

例えば、
http://www.sample.jp/PIE.htcであれば、

url(“/PIE.htc”);

http://www.sample.jp/file/PIE.htcであれば、

url(“/file/PIE.htc”);

と記述します。

 

▽CSS3 PIEを使ってもうまく表示されない場合

◆ position: relative;を追記する

behaviorプロパティを使って「PIE.htc」ファイルを指定した際に、背景色や枠線など一部のスタイルが効かなくなってしまうことがありますので、その際は、behaviorプロパティを記述した箇所に、下記のようにpositionプロパティを加えてみます。

 

◆ .htaccessファイルに記述を加える

ウェブサーバによっては、.htaccessファイルに以下の1行を追記しないと、うまく動かないことがあります。

 

ie7-js

IE6~8でもセレクタを使えるようにするJavaScriptで開発されたライブラリのひとつです。「W3C標準に仕様を近づける」「IE9に近づける」ためのライブラリなので、出来なくなる事もありますので注意してください。

 

select-ivizr

IE6~8でもCSS3セレクタが利用できるようになりますが、使えるセレクタの種類はライブラリによって異なります。


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > HTML > HTML5で作成するときのIE対応