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

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

      2018/02/22

IE8以下対策のJavascript

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

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

 - レスポンシブサイト制作