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

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などになりますね。

  • このエントリーをはてなブックマークに追加
Related

FullCalendarでGoogleカレンダーのようなUIを実装

jQueryプラグインFullCalendarのサンプル 概要 FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を...

PHP Laravel5.2でmulti-auth(複数テーブルでの認証)を実装

Laravel5.2でマルチ認証 概要 LaravelとはPHPの中で今最も伸びているフレームワークです。 処理速度が遅いなどありますが、かなり使い安く拡...

PHP 正規表現でIPアドレス形式の文字列か判定

正規表現でIPアドレスの入力チェック 概要 フォームで入力されたIPアドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...

rbenv環境でRuby on Railsのアプリケーションを一瞬で自動生成

アプリケーション構築時に最初に行う手順 概要 アプリケーションを作成するまでの手順を記載しています。 rbenvなどの環境が設定済と仮定して話を進めま...

Rails devise・authority・rolifyで権限付きの認証機能

devise・authority・rolify 概要 3つのGemを使用して、権限付き認証機能を実装します。 gem インストール Gemfile ...

Rails devise で複数モデルの認証機能を実装

Rails devise で複数モデルを管理 概要 rails のログイン認証 Gem「devise」のインストール・設定方法を紹介します。 よく「d...
トップへ戻る