【2014/04時点】ホームページ制作でIE8を含めたブラウザ対応をしながらHTML5/CSS3をつかう方法

WEBサイト制作なんて仕事をしてると、ブラウザの対応範囲について何度も考えなきゃならんことがある訳です。

そして、こういう話になると絶対に避けられないのがIE対応。

最近はIE7のシェアがさすがに無視できる範疇になってきているので、幾分ましにはなってきてはいるんですが、それでもIEはいつまでたってもダメな子でして、WEBサイト製作者ならIEが好きって人はいないと断言してもいいくらいダメな子です。

で、現時点での例のダメな子はIE8。IE7のお兄さん。
さすがに IE7よりこの子はちょっとましなんですが、それでもまだまだダメなので出来れば無視したい。IE6はこっち見んな。

まあそうは言っても念の為に最新のブラウザシェアを確認しておきましょうか。

2014-03_browzer

これを見るとなかなか絶望的な状況ですね。IE8が猛威をふるっております。IE6が4%もいることにも驚きです。
まあ後2年くらいすればIE8も消えてなくなってくれるような気がしますが、それまでは耐え忍ぶのみ。

自分のサイトであれば全力で無視してもなんら問題ないんですが、仕事となるとそうもいかず、お客様にとってベストなものを作る上でIE8を外すわけにはいかないので、なんとかしなければならない!と。

IE8対応のWEBサイトをつくるならこれを入れるべし

ということで、前置きが大分長かったような気がしますが、ようやく本題です。
まずはIE8に対応するために必要なことをまとめてみましょう。

・IE特有のバグや解釈を改める
・HTML5の新要素に対応する
・一般的なCSSに対応する
・メディアクエリーに対応する

細かく解説はしませんが、ひとまずはこんな所でしょうか。

では、これらを解決するために必要なライブラリを一つづつリストアップしていきましょう。

IE9.js

なにはなくとも「IE特有のバグや解釈」と「一般的なCSSが使えない」を再優先で直さないと余計な手間がかかって仕方ない。
IE9.jsは普通のブラウザが普通にできることをIE8以下のブラウザでもできるようにしてあげるライブラリです。

001

ダウンロードはこちらから。
http://code.google.com/p/ie7-js/

html5shiv.js

いまどきHTML5とか使えるのがあたりまえじゃないの?いえいえ、IE8は使えません。
まあXHTMLやHTML4でいいじゃんと言われればそれまでかも知れませんが、このくらいは出来ましょうよ!ということでhtml5shiv.js。

HTML5で追加された新要素をブラウザが認識できるようにしてくれます。

002

ダウンロードはこちら。
http://code.google.com/p/html5shiv/

respond.js

最近はスマフォやタブレットのシェアが凄いので、ブラウザのサイズによってデザインを最適化する、いわゆるレスポンシブデザインに対応するのはマストな選択かもしれません。

そして、レスポンシブデザインのキモとも言えるのがメディアクエリーなんですが、IE8はこれも対応していない。
じゃあ対応しましょう。

003

ダウンロードはこちらから。
https://github.com/scottjehl/Respond

prefixfree.js

これはブラウザの差異を吸収するためのライブラリです。

具体的にはブラウザ別に対応する必要のあるCSSの記述をするさいにベンダープレフィックスというものをつけるのですが、クロスブラウザ対応でブラウザ毎のベンダープレフィックスをつけていると、似たような記述をしなければいけなくなって冗長になってしまう、なにより面倒くさい。

prefixfree.jsはこのベンダープレフィックスを自動でつけてくれるというイカしたやつ。

004

ダウンロードはこちらから。
http://leaverou.github.io/prefixfree/

こちらのサイトで詳しく解説されています。
http://coliss.com/articles/build-websites/operation/javascript/js-prefixfree.html

modernizr.js

ここまで色々とライブラリを紹介してきましたが、それでもやっぱりブラウザや内容によっては個別に対応しなければいけない状況があったりします。

特にCSS3の対応はまだまだブラウザ毎に揃っていないので、ベンダープレフィックスでなんとかならないこともあり、そんな時は潔く代替案を出して、できるだけ要件にあった実装をしましょう。

modernizr.jsはこういったブラウザ毎の対応状況をhtmlタグのclassに書き出して、個別対応をしやすくするライブラリです。

005

ダウンロードはこちらから。
http://modernizr.com/

こちらのサイトで詳しく解説されています。
http://www.tam-tam.co.jp/tipsnote/html_css/post61.html

ライブラリについてのまとめ

いろいろ紹介したライブラリを全部入れるとこうなります。

なかなか量が多いですが、もちろん全部必須というわけではないので必要に応じてチョイスすればいいと思います。
HTML5に対応しないならhtml5shivはいらないし、IE8でレスポンシブ対応とかいらないよねというならrespondもいらない。そういうことです。

個人的には最低限modernizrだけは入れておくと幸せかなーなんて思ってます。