IE8以下にHTML5×レスポンシブウェブを対応させるJS

今更ながら、HTML5＆レスポンシブウェブをIE8、IE7、IE6に対応させるための基礎中の基礎まとめ。

HTML5・CSS3はIE8以下では通常認識できない

IE8以下はHTML5に対応しない。タグを認識できない。
レスポンシブウェブに欠かせないMedia Queriesが効かない。CSS3だからあたりまえ。

Media Queriesは、デバイスの解像度（画面サイズ）によってCSSを切り替える方法なので、レスポンシブウェブデザインにするサイトは必要不可欠。逆にレスポンシブ対応でなければ気にしなくていい。

html5shiv.jsでIE8以下にHTML5の要素を認識させる

html5shiv.jsを<head></head>に読み込ませ要素を認識させる。
ここからダウンロード→html5shiv

●IE9未満という意味で書く場合

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

●IE8以下という意味で書く場合

<!--[if lte IE 8]>
<script src="格納URL/html5shiv.js"></script>
<![endif]-->

どちらもIE8以下の環境下で対応するIE条件付コメントです。

html5.jsもあるけどmainとかがなかったのでhtml5shiv.jsを使用。認識といってもあくまで擬似的。

CSSにブロック要素としての記述もしておく

main, article, aside, header, canvas, details, figcaption, figure, footer, nav, section, summary {
display: block
}

でも、html5shiv.jsが必須というわけではない…
HTML5要素に一切デザイン的な指定をせず、<DIV>などでレイアウトを組めば、IE8以下であろうが見た目崩れることはないはずだ。

ただ、それだと無駄にタグが増えてしまうし、後々、完全にIE8以下が切捨てられる時には、このjsだけ取り除けばよいんでやはりやっておくべきかな？とも思います。

ちなみにHTML5はまだ要素が増えたりする可能性があるので、追加要素を使う場合、html5shiv.jsも最新のものに入れ替える必要がある。

Media Queriesを対応させる

Media Queries（メディアクエリ）はスクリーンサイズを指定し、各CSS内容を読み込ませ画面サイズにあったスタイルに切り替えることができるCSS3の機能のひとつ。

CSS内に@media～記述する場合

@media screen and (max-width: 767px) {
/* 767px以下用（タブレット縦）のCSS記述 */
}

@media screen and (max-width: 479px) {
/* 479px以下用（スマートフォン横）のCSS記述 */
}

@media screen and (max-width: 320px) {
/* 320px以下用（スマートフォン縦）のCSS記述 */
}

基本CSS3に対応していないIE8～6は、以下のMedia Queriesを実装してくれるJSライブラリを読み込ませて対応。

<!--[if lt IE 9]>
<script src="https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Media Queriesが効かない時のチェック

@charset を@mediaの前に指定している
@importでCSSを読み込んでいる
「@media (max-width: ×××px)」など、「and」が抜けている

参考サイト
・Media QueriesがIE8で効かない場合の対処法
・とあるコーダーの備忘録

HTMLヘッダー内まとめ

IE7以下は切り捨てても、IE8はまだまだ主流なのでHTML5×レスポンシブウェブでサイトを作るのなら以下は必須かなと思います。

<!--[if lt IE 9]>
<script src="格納URL/html5shiv.js"></script>
<script src="https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->