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

「IE8以下にHTML5×レスポンシブウェブを対応させるJS」への2件のフィードバック

  1. Media Queriesが効かない時のチェックしておかしいところはなかったです。
    なのに、IE8では動いてません。
    TT
    どうしたらいいでしょうか?

    1. 返信遅くなり申し訳ありません。
      現在、仕事などが多忙で詳しくお返事することができませんが、上記以外でもいろんな条件化で無効になる場合があるようです。
      CSSやHTML、他jsのソースも記述ミスなどないか念入りにチェックしてみてはいかがでしょうか。
      ちょっとした記述ミスが動かない原因になっていることもありますので…。

コメントを残す

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