【media screen】 IE9以下のレスポンシブ化とCSSの設定 【CSS】

前のページ（【HTML5編】 サルでもわかるレスポンシブの基本の基本）では、media screen を使ったレスポンシブデザインの基本を書きました。

でも、これは Internet Explorer9 以下のブラウザでは機能しません。
（Windows7では、普通は InternetExplorer9 以下のブラウザをインストールできないので、IEの開発者ツールのシュミレーター画面を使って確認しました）

IEの開発者ツールの起動のさせ方

１．　IEを起動させる
２．　メニューバーのツールをクリック

３．　F12 開発者ツールを選択
　　　（F12キーでも起動できる）

４．　画面下のパソコンのアイコンをクリック
５．　IEのバージョンを選択する

Internet Explorer9以下のブラウザは、media screen の機能が実装されていないので、CSSでそのタグを使ってしまうと、@media screen and (min-width:***px) {}で囲んだ範囲のスタイルが全部エラーになってしまうのです。

ですので、IE8以下のブラウザには、CSSを適用するには、media screen の代わりにScript を使ってあげる必要があります。

IE9以下のブラウザとレスポンシブ

• IE9以下では、media screen の機能がない
• IE9以下では、media screen を使ったスタイルが全部エラーになる
• media screen の代わりに Script を使って表示する

<!-- 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]-->

これは、InternetExplorer9以下のブラウザにだけ html5 と CSS3 を適用させるための汎用コードへのリンクを読み込むためのコードです。

<!--[if lt IE 9]> と言うのは、『 もしIE9.0以下ならば 』 と言う意味です。
書かれてある Script は、『 ネット上の汎用コードを読み込め 』 と言う指示です。
これで、IE9以下ならば汎用コードが読み込まれるようになります。

ただし、Googleコードでも起こりましたが、いきなり汎用コードの提供が終わってしまい、上手く作動しなくなってしまっていることがあるので、注意が必要です。

このコードは、html5shiv(HTML5用) と Respond（CSS３用） からダウンロードして、自分のサーバーにアップロードして使うこともできます。

このコードを </body> の直前に置くことで、IE９以下であれば上記のスクリプトが読み込まれます。

ただし、コードが古くなってしまっていることがありますので、年に一度程度は、新しいバージョンが出ていないかどうか確認した方がよいかもしれません。

ちなみに、CSS3のCSSファイルを 『 読み込む前 』 にこのスクリプトを読み込んでしまうと、IE9以下でスクリプトが上手く読み込まれません。
（どうやら、読み込まれた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以下に全部適用（<!--[if lt IE 9]>）するようにすれば大丈夫です。

【IE9のみ適用】
<!--[if IE 9]>

【IE9未満に適用】
<!--[if lt IE 9]>

【IE9以下に適用】
<!--[if lt IE 9]>

【IE9以上に適用】
<!--[if gte IE 9]>

【IE8のみ適用】
<!--[if IE 9]>

【IE8未満に適用】
<!--[if lt IE 9]>

【IE8以下に適用】
<!--[if lt IE 9]>

【IE8以上に適用】
<!--[if gte IE 9]>

【background】 IE8以下のCSS 【linear-gradient】

media screen の適用は上のコードでできるのですが、Internet Explorer9 以下のブラウザでは、表示できないタイプのグラデーションがありました。

この場合、適用できるタイプのグラデーションを指定するか、ベタ塗りのCSSで指定する必要があります。

/* 古いブラウザ用 */
background : #●●●●●●;

/* 新しいブラウザ用 */
background : linear-gradient(to bottom, #●●●●●● 0%,#●●●●●● 30%,#●●●●●● 55%,#●●●●●● 100%);

CSSの書き方としては、古いブラウザ用のCSSは上に書き、新しいブラウザ用のCSSは下に書くことになります。

CSSの優先順位は下に書いた方のコードなので、新しいブラウザの場合は、上のコードよりも優先されて表示されます。

古いブラウザ用のコードでは下に書いたコードが表示できないので、結果的に上のコードが表示されることになります。

古いブラウザ
グラデーションのCSSを表示できない！（＞＜；
　　　↓
そうだ！上の方のベタ塗りのCSSを適用しよう！(｀・∀・´)

新しいブラウザ
上にベタ塗りのCSSがあるな？( ´_ゝ｀)
　　　↓
でも、下のグラデーションのコード優先だから、下のグラデーション適用しとくわ

次ページ

【リダイレクト】スマートフォンとタブレットとPCで表示する方法

前ページ

【HTML5編】 サルでもわかるレスポンシブの基本の基本