無料テンプレートのカスタマイズ 2

最終更新日 2013/3/18

HTML5 を認識させる方法に続いて、Media Queries を認識させる方法です。

Internet Explorer 8 以下で HTML5 を認識できるようになりましたが、パソコンで見てもスマートフォン用のデザインが表示されています。

これは、Internet Explorer 8 以下が Media Queries（CSS3）にも対応していないことが原因です。

つまり、Internet Explorer 8 以下では、全てのスクリーンサイズでスマートフォン用のデザインが表示されます。

そこで、Internet Explorer 8 以下でもレスポンシブ Web デザインとして使用したい場合はカスタマイズを行なって下さい。

ステップ1「respond.min.js をダウンロード」

scottjehl/Respond ・ GitHub へアクセスします。

画面上部の ZIP ボタンをクリックしてダウンロードします。

zip フォルダを展開（解凍）して、respond.min.js を右クリック／コピーします。

ステップ2「respond.min.js を読み込む」

無料テンプレートのフォルダを開いて、右クリック／貼り付けします。

上の画像のように、respond.min.js を貼り付けることができました。

index.html を開きます。

<![endif]--> の前を 1行開けて、以下のコードを貼り付けます。

<script src="respond.min.js"></script>

他にも html ファイルがある場合は、全ての html ファイルに同じように貼り付けて下さい。

貼り付けてない html ファイルでは、respond.min.js を使用出来ません。

上書き保存して、index.html を閉じます。

ステップ3「ファイルをアップロードして確認」

FTP ツールやファイルマネージャーを使用して、index.html と respond.min.js をアップロードします。

上の画像のように、Internet Explorer 8 でも Media Queries を認識することができました。

シミュレーターでの確認となりますが、Internet Explorer 6 と Internet Explorer 7 でも Media Queries を認識することができました。

ブラウザの幅を狭めると、レイアウトが切り替わります。