IE9以下のブラウザでHTML5とCSS3を対応させる

ブラウザには色々な種類がある。
その中でも特にシェアが高く、しかもバージョンによって問題が起きやすいのがIE(Internet Explorer)だ。

特に、IE9 と IE10 の間には大きな壁がある。
HTML5とCSS3に対応しているかどうかの境目のバージョンだからだ。


Edge |IE11 |IE10
HTML5  ○
CSS3     ×

IE9 |IE8 |IE7 |IE6
HTML5  ×
CSS3     ×


IE8は、もうすでにMicrosoftのサポートも切れていて、セキュリティ的に危険な状態なので、本来であれば使わないほうが無難なブラウザなのだが、それでもまだ使用しているユーザーは多い。

そこで、IE9 IE8に対応できるよう、サイトやブログも工夫が必要になってくる。

スポンサーリンク

IE9以下のブラウザの状態を確認する方法

IE9以下のブラウザの状態を確認するには、IEの開発者ツールが便利だ。
これを使うことで、IEの過去のバージョンでシュミレーションすることができる。


1. メニューバーの 『 ツール 』 をクリック
2. 『 F12開発者ツール 』 を選択する


3. 『 エミュレーション 』 に切り替える



4. ドキュメントモード『 9 』 に切り替える
   → IE9のシュミレーション画面になる

   ドキュメントモード『 8 』 に切り替える
   → IE8のシュミレーション画面になる


HTML5やCSS3を使っている場合はエラー

HTML5やCSS3を使っているサイトの場合、そのままだと開発者ツールでエラーが出てしまう。

そこで、エラーが出ないようにするために、Java Script擬似的HTML5CSS3再現する。

その際に使われているのが、便利なコードhtml5shiv.jsrespond.js だ。
この二つのScriptが、擬似的にHTML5やCSS3を再現してくれるのだ。


いつの間にか終了していたGoogleコード

html5shiv.js と respond.js を自分のサーバーに置くと、キツキツのサーバーでは負荷がかかりやすい

そこで、Google社の提供している Googleコード を利用して、html5shiv.jsrespond.js を利用していた人が多かったが、何と、Googleコードはいつの間にか終了してしまっていた。

https://html5shiv.googlecode.com/svn/trunk/html5.js
(現在は404エラーが出る)

どうやら、不正な使い方やコードを悪用する輩が後を絶たないことが原因らしい。
兎にも角にも、非常に便利なGoogleコードが終了してしまったため、代替のコードを探してみることにした。


提供されているコードへのURLを貼る

Googleコードと同様のサービスを行っている会社がある。
Googleほど安定してコードを提供できる会社はないため、定期的コードの提供が続いているかコードが悪意のあるものに差し替わっていないかどうかチェックする必要がある。


MaxCDN


<!-- IE 9.0以下の場合 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->


コードを取得してサーバーにUPする

以下のページにアクセスして、コードの入ったZIPファイルをダウンロードする。


html5shiv

Respond



ダウンロード終了後、圧縮されたファイルを解凍する。

中に入っているコードには、html5shiv.min.jshtml5shiv.js があるが、min の入った方のJSファイルを利用する。
(こちらのほうがファイルが圧縮してあるので、ファイルサイズが小さくて済む)

それを、サーバーの任意の場所にアップロードする。
その後は、HTMLファイル内に以下のScriptを書き込む。

<!-- IE 9.0以下の場合 -->
<!--[if lt IE 9]>
<script src="http://●●●.▲▲▲/js/html5shiv.min.js"></script>
<script src="http://●●●.▲▲▲/js/respond.min.js"></script>
<![endif]-->


IE9以下が作動しない原因

html5shiv.js と respond.js を使っても、IE9以下に対応できない、エラーが出てしまうことがある。

そう言う場合は、IEの開発者ツールを使って、何が原因でエラーが出てしまうのか確認すると、エラーの原因を解消できることがある。
(外部のWEBサービスを利用していて、どうしても解消できない問題もある)

コンソールタブに切り替え、エラーの出ている箇所を見ると、どのタグやプログラムでエラーが吐き出されているのか確認できる。



CSSを読み込む位置に問題がある

先にIE9以下のブラウザのためのCSSファイルを読み込み、後でレスポンシブ用のCSSファイルを読み込んだ場合、不具合が起きてしまった。

どうやら、

1. CSS3専用のCSS
2. IE9以下では対応できずにスルー
3. その後に Java Script でIE9に擬似的にCSS3を読みこませる

の場合は、respond.js を読み込めるが、

1. Java Script でIE9に擬似的にCSS3を読みこませるScriptコード
2. CSS3専用のCSSを読みこませる
3. IE9以下では対応できずにスルー
4. ブラウザでは対応できない

の場合は、respond.js を読み込ないようだった。

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/style.css">

<!-- IE 9.0以下の場合 -->
<!--[if lt IE 9]>
<script src="http://●●●.▲▲▲/js/html5shiv.min.js"></script>
<script src="http://●●●.▲▲▲/js/respond.min.js"></script>
<![endif]-->


外部サービスがIE9以下に非対応

忍者ツールズおまとめボタンを利用しているが、これがどうやらIE8では対応していないコードが含まれているらしく、エラーが出てしまう。



忍者ツールズのおまとめボタンからは、ちょくちょくと共有していただいているため、IE8以下のブラウザで閲覧できなくなる可能性があるものの、これを外すのは忍びなかったので、結局、忍者ツーズのおまとめボタンを設置し続けることに決めた。


Scriptの非同期コードでエラー

asyncのようなScriptを非同期読込させるためのコードを追加したら、エラーが出てフリーズしてしまった。
(adyncを入れずにScriptを挿入してしまうと、Scriptの読み込みでページの表示が遅くなってしまう)

どうやら、非同期コードなどの新しいコードには対応しておらず、エラーが出てしまったようだだった。

<script src="http://hogehost.com/hoge-hoge.js" async></script>


次ページ

これから

前ページ

【CSS】 忍者メールフォームをレスポンシブ化する方法 【HTML】


スポンサーリンク