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の過去のバージョンでシュミレーションすることができる。
１． メニューバーの 『 ツール 』 をクリック
２． 『 F12開発者ツール 』 を選択する
３． 『 エミュレーション 』 に切り替える
４． ドキュメントモードを 『 9 』 に切り替える
→ IE9のシュミレーション画面になる
ドキュメントモードを『 8 』 に切り替える
→ IE8のシュミレーション画面になる
HTML5やCSS3を使っている場合はエラー
HTML5やCSS3を使っているサイトの場合、そのままだと開発者ツールでエラーが出てしまう。
そこで、エラーが出ないようにするために、Java Script で擬似的に HTML5 や CSS3 を再現する。
その際に使われているのが、便利なコードの html5shiv.js と respond.js だ。
この二つのScriptが、擬似的にHTML5やCSS3を再現してくれるのだ。
いつの間にか終了していたGoogleコード
html5shiv.js と respond.js を自分のサーバーに置くと、キツキツのサーバーでは負荷がかかりやすい。
そこで、Google社の提供している Googleコード を利用して、html5shiv.js と respond.js を利用していた人が多かったが、何と、Googleコードはいつの間にか終了してしまっていた。
https://html5shiv.googlecode.com/svn/trunk/html5.js
（現在は404エラーが出る）
どうやら、不正な使い方やコードを悪用する輩が後を絶たないことが原因らしい。
兎にも角にも、非常に便利なGoogleコードが終了してしまったため、代替のコードを探してみることにした。
提供されているコードへのURLを貼る
Googleコードと同様のサービスを行っている会社がある。
Googleほど安定してコードを提供できる会社はないため、定期的にコードの提供が続いているか、コードが悪意のあるものに差し替わっていないかどうかチェックする必要がある。
<!-- 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.min.js と html5shiv.js があるが、min の入った方のJSファイルを利用する。
（こちらのほうがファイルが圧縮してあるので、ファイルサイズが小さくて済む）
それを、サーバーの任意の場所にアップロードする。
その後は、HTMLファイル内に以下のScriptを書き込む。
<!-- IE 9.0以下の場合 -->
<!--[if lt IE 9]>
<script src="https://●●●.▲▲▲/js/html5shiv.min.js"></script>
<script src="https://●●●.▲▲▲/js/respond.min.js"></script>
<![endif]-->
IE9以下が作動しない原因
html5shiv.js と respond.js を使っても、IE９以下に対応できない、エラーが出てしまうことがある。
そう言う場合は、IEの開発者ツールを使って、何が原因でエラーが出てしまうのか確認すると、エラーの原因を解消できることがある。
（外部のWEBサービスを利用していて、どうしても解消できない問題もある）
コンソールタブに切り替え、エラーの出ている箇所を見ると、どのタグやプログラムでエラーが吐き出されているのか確認できる。
CSSを読み込む位置に問題がある
先にIE9以下のブラウザのためのCSSファイルを読み込み、後でレスポンシブ用のCSSファイルを読み込んだ場合、不具合が起きてしまった。
どうやら、
１． CSS3専用のCSS
２． IE9以下では対応できずにスルー
３． その後に Java Script でIE9に擬似的にCSS3を読みこませる
の場合は、respond.js を読み込めるが、
１． Java Script でIE9に擬似的にCSS3を読みこませるScriptコード
２． CSS3専用のCSSを読みこませる
３． IE9以下では対応できずにスルー
４． ブラウザでは対応できない
の場合は、respond.js を読み込ないようだった。
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/style.css">
<!-- IE 9.0以下の場合 -->
<!--[if lt IE 9]>
<script src="https://●●●.▲▲▲/js/html5shiv.min.js"></script>
<script src="https://●●●.▲▲▲/js/respond.min.js"></script>
<![endif]-->
外部サービスがIE9以下に非対応
忍者ツールズのおまとめボタンを利用しているが、これがどうやらIE8では対応していないコードが含まれているらしく、エラーが出てしまう。
忍者ツールズのおまとめボタンからは、ちょくちょくと共有していただいているため、IE8以下のブラウザで閲覧できなくなる可能性があるものの、これを外すのは忍びなかったので、結局、忍者ツーズのおまとめボタンを設置し続けることに決めた。
Scriptの非同期コードでエラー
asyncのようなScriptを非同期読込させるためのコードを追加したら、エラーが出てフリーズしてしまった。
（adyncを入れずにScriptを挿入してしまうと、Scriptの読み込みでページの表示が遅くなってしまう）
どうやら、非同期コードなどの新しいコードには対応しておらず、エラーが出てしまったようだだった。
<script src="https://hogehost.com/hoge-hoge.js" async></script>
次ページ
前ページ
広告
- 【スマホでもPCでもOK】レスポンシブ・ウェブデザインとは
- 【CSS3編】 サルでもわかるレスポンシブの基本の基本
- 【HTML5編】 サルでもわかるレスポンシブの基本の基本
- 【PC用】レスポンシブでレイアウトを組み替える【スマホ用】
- 【media screen】 IE9以下のレスポンシブ化とCSSの設定 【CSS】
- 【リダイレクト】スマートフォンとタブレットとPCで表示する方法
- 【ロゴ】 タイトル部分のレスポンシブ化 【ヘッダー】
- 【横幅を合わせて表示する】 画像をレスポンシブ化する方法
- 【h1】 レスポンシブの見出しのスタイル 【h3】
- 【高さを変える】リンクとリストのレスポンシブ化
- 【画像】 ファイルの圧縮とサーバー 【CSS】
- 【レスポンシブで必須】 横並びと縦並びのスタイルをマスターする
- 【誤操作＆誤表示防止】 レスポンシブ対応で気をつけた方が良いこと
- 【無料で使える】 レスポンシブデザインをチェックするためのツール
- 【PC用】レスポンシブでレイアウトを組み替える【スマホ用】
- 【レスポンシブ化の準備】忍者メールフォームの作成＆設定方法
- 【CSS】 忍者メールフォームをレスポンシブ化する方法 【HTML】
- IE9以下のブラウザでHTML5とCSS3を対応させる