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

PHPで動画の撮影日を取得

PHPで動画の撮影日を取得 概要 PHPからffprobeコマンドを実行し、動画の撮影日時を取得します。 コード $posted_at = ...

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 ...
トップへ戻る