Foundation 5 - Internet Explorer 8 の対応方法

ここでは人気のフレームワーク「Foundation」の「Internet Explorer 8（IE8）」対応方法を紹介します。

フレームワークとは、あらかじめ「HTML」「CSS」「JS」がセットになっており、自分でデザインしなくてもササッと素早くWebサイトを構築できる便利な代物です。しかも、それらの多くがレスポンシブ対応なので、Web制作者に重宝されています。

有名なフレームワークをいくつか紹介。

• Foundation
• Bootstrap
• HTML KickStart

さて、前置きが長くなりましたが、当サイトでも利用している「Foundation 5」の「IE8」対応方法をみていきましょう。

対応方法はこちらのページを参考にしました。

• https://zurb.com/article/1204/getting-foundation-and-ie8-to-play-nice

Foundation の Internet Explorer 8 対応方法

対応方法は、ずばり！「Foundation 3」を使うことです。

以下のようにブラウザーが「IE8」以前のバージョンの場合は「Foundation 3」を、「IE9」以降あるいはその他（Chrome、Firefox、Safari……）の場合は「Foundation 5」を読み込むように設定します。

<!-- Foundation 3 for IE 8 and earlier -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/foundation3/foundation.min.css" />
<link rel="stylesheet" href="css/foundation3/app.css" />
<![endif]-->
<!-- Foundation 5 for IE 9 and later -->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="css/foundation5/normalize.css" />
<link rel="stylesheet" href="css/foundation5/foundation.min.css" />
<!--<![endif]-->

このコードをheadタグ内に挿入すれば、OKです。

「Foundation 3」のダウンロードはこちらからどうぞ。

• https://foundation.zurb.com/develop/download-f3.html