HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

  1. ホーム
  2. レスポンシブサイト制作
  3. 7章. IE8以下でもレスポンシブサイトを有効にする

7章. IE8以下でもレスポンシブサイトを有効にする

  1. 公開日:2017年01月07日
  2. 最終更新日:2022年08月08日

レスポンシブサイト制作

この記事をシェアする:

IE8以下対策のJavascript

サンプルサイト内のheadタグ内にある下記のコードがIE8対策用のJavascriptになります。
IE8以下の対策を行わない場合は、この後の記述は不要です。


<!--[if lt IE 9]>
  <script src="js/html5shiv.min.js"></script>
  <script src="js/css3-mediaqueries.js"></script>
<![endif]-->

<!–[if lt IE 9]><![endif]–>内にJavascriptを記述することで、IE8以下のブラウザ以外は読み込みをしないように制限させることができます。

html5shiv.js

IE8以下は、HTML5の要素が無視されてしまいますが、このJavascriptは、IE8以下でもHTML5の要素を有効にすることができます。
ファイルのダウンロードは、下記から行えます。

ファイルのダウンロードは、ページ内の右側にある緑のボタン「Clone or download」から行います。
「Download ZIP」をクリックし、圧縮ファイルをダウンロードしてください。
使用するファイルは「distフォルダ」内の「html5shiv.min.js」を使用します。

css3-mediaqueries.js

メディアクエリは、CSS3のためIE8以下は、使用できません。
このJavascriptは、IE8以下でもメディアクエリを有効にすることができます。
注意点として、HTMLファイルのメディアクエリには対応しませんので、CSSファイルでメディアクエリを記述するようにしてください。
ファイルのダウンロードは、下記から行えます。

ファイルのダウンロードは、ページ内の右側にある緑のボタン「Clone or download」から行います。
「Download ZIP」をクリックし、圧縮ファイルをダウンロードしてください。
解凍フォルダ内の「css3-mediaqueries.js」を使用します。

ベースファイルのダウンロード

ここまでの内容をまとめたベースのファイルをダウンロードできるようにしました。
reset.cssの内容、jQueryのバージョンに関しては、案件に応じて変更してください。

responsive-base