PbTimes 情報誌

IE8以下でCSS3とHTML5の対応 - respond.js、html5shiv.js

2014/01/09

• CSS
• Design
• HTML
• JavaScript
• Web

respond.js、html5shiv.jsについて

IE8以下では動作しない

CSS3、HTML5でコーディングを行った場合、IE8などの古いブラウザでは有効になりまん。
今回は、IE8以下でCSS3・HTML5を有効にすることができるプラグインを紹介します。

これでIE8以下のブラウザでもレスポンシブWebデザインが実現できます！
設定も簡単で、JavaScriptのファイルを読込むだけです。

CSS3、HTML5は使うべき？

「そもそも、CSS3やHTML5は使うべきではない」
と言う人はたくさんいます。

確かに、IE8以下のブラウザを使っている人はたくさんいますし、全ての人に意図する表示を行うべきだとは思います。
JavaScriptで対応したとしても、JavaScriptをブラウザで無効にされていたら使えないですからね。

しかし、せっかくの新しい技術を使わないなんてもったいない！
そんな選択肢ありえません。

こういったものを使用しないのではなく、IEの古いバージョン等を廃するという動きになって欲しいですね。。。
ブラウザによって表示が違うのは本当面倒くさいです。

私はCSS3やHTML5はどんどん使うべきだと思っています！

設定手順

ダウンロード

html5shiv.js
http://code.google.com/p/html5shiv/からzipをダウンロードして解凍。
distディレクトリ内にあります。

respond.min.js
https://github.com/scottjehl/Respondからzipをダウンロードして解凍。
destディレクトリ内にあります。

metaタグで指定

	<!--[if lt IE 9]>
		<script type="text/javascript" src="js/html5shiv.js"></script>
		<script type="text/javascript" src="js/respond.min.js"></script>
	<![endif]-->

たったこれだけです。
ちなみに、

<!--[if lt IE 9]> ～ <![endif]-->

を記述することで、IE9未満に対して～が有効となります。
IE9未満なので、IE6,IE7,IE8などになりますね。