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

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

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


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

1. IEを起動させる
2. メニューバーのツールをクリック

3. F12 開発者ツールを選択
   (F12キーでも起動できる)

4. 画面下のパソコンのアイコンをクリック
5. 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以下のブラウザにだけ html5CSS3 を適用させるための汎用コードへのリンクを読み込むためのコードです。

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

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

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

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

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

ちなみに、CSS3のCSSファイル『 読み込む前 』 にこのスクリプトを読み込んでしまうと、IE9以下でスクリプトが上手く読み込まれません。
(どうやら、読み込まれたCSSがエラーで表示できない時に作動するもののようです)

<!-- IE 9.0以下の場合 -->
<!--[if lt IE 9]>
<script src="http://●●●.▲▲▲/js/html5shiv.min.js"></script>
<script src="http://●●●.▲▲▲/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編】 サルでもわかるレスポンシブの基本の基本


スポンサーリンク