IE9以前の場合でもHTML5・CSS3で対応させる裏技！おまじないを伝授！

どうも、Tommy(@SitommyBlog)です。

今回は、『IE9以下』に対してHTML5・CSS3の記述のまま対応させる裏技、おまじない的なものを紹介したいと思います。

IEはサポートが切れるため今後、必要にならなくなる可能性はありますがそれでも知っておいて損はしませんし、コピペで使用可能なためサイトに組み込んで上げると親切かと思います。

IE９以前のものでは。

タイトル通り、IE９以前のものではHTML5で新しく追加されたタグ集が効きません。
そのため、レイアウトが大きく崩れる原因になります。

崩れを恐れて、HTML5で新しく追加したタグを使わないのは決して良くないです。

また、レスポンシブに関してCSS3のメディアクエリも対応していません。

最近では、案件の要件定義にIE10以前は対応しないとするケースが多くなってきていますが、それでもたまにIE9なども許容範囲に入れたいクライアントもおります。

今後は確実に、IEは要件定義に入ってこなくなりますが、上記のような悩みを解決してくれるのが、今回紹介する裏技・おまじないというわけです。

裏技！おまじない！

とても簡単です！

『head終了タグ』の直前に、下記のコードを貼り付けましょう。

<!-- IE9 以下の場合 -->
<!-- [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]-->

これだけで、IE9以前で見ている方は、jsで書き換えてくれます。
上記2つのjsを説明すると。

『html5shiv.min.js』は、HTML5から追加されたタグをIE9以前のブラウザに対応出来るタグに書き換えてくれるjsです。

『respond.min.js』は、CSS3のメディアクエリに対応していないブラウザを擬似的にメディアクエリ対応をしてくれるjsです。

それぞれ、CDNで読み込んでいるためファイルを置くこともせずに実行できますので、とても簡単です。

まとめ

先程から幾度となく言っておりますが、IEはすでにサポートを終了しております。

そのため、今後は要件定義にも入って来なくなるでしょう。
われわれエンジニアからしてみれば、「やっとか！！」という思いです。

IEに苦しめられたエンジニアは数多くいるのではないでしょうか。私もその１人です。

今後は、IEに変わりEdgeとしてマイクロソフトは開発していきます。
しかも、2019年から『Google Chrome』と同じ『Chromium』ベースで開発されます。

これは、かなりエンジニアとして作業が楽になってきます。楽しみで仕方がないですね！

今回の裏技・おまじないは、今後使わなくなるかと思いますが知識として知っていれば過去のデータ修正依頼等にも対応出来ます。