BootstrapでIE8対応させる方法を解説!

この記事ではBootstrapでIE8に対応させる方法を解説しています。
最新バージョンのBootstrapではIE8に対応させることができませんが、少し前のバージョンを使用し、いくつかの条件を満たすことで対応させることができます。

コンテンツ [表示]

  1. 1BootstrapはIE8に対応している?
  2. 2BootstrapでIE8対応させる方法
  3. 2.1HTML5を認識させる
  4. 2.2jQueryはIE8に対応しているバージョンを使う
  5. 2.3respond.jsを読み込む
  6. 2.4BootstrapをIE8に対応させる

BootstrapはIE8に対応している?

BootstrapのIE8(InternetExplorer8)に関する対応状況は以下のようになっています。
 

バージョン 対応状況
Bootstrap3 IE8に対応している
Bootstrap4 IE10以降のみ対応している
Bootstrap5 IEに対応していない(Edgeには対応)

Bootstrap3は対応していますが、Bootstrap4はIE9以前のものには対応しておらず、Bootstrap5に至ってはIEに対応していません。
MicrosoftはIEのサポートを終了する方向で進めているため、今後の新しいバージョンでもIEに対応することはないと考えられます。

BootstrapでIE8対応させる方法

BootstrapでIE8に対応させたい場合は、基本的にBootstrap3以前のバージョンを利用することをおすすめします。
しかし、そのまま利用できるわけではなく、IE8で動くためには色々と条件を満たさなければなりません。

HTML5を認識させる

IE8はHTML5に対応していないため、HTML5の新しいタグなどが無視されてしまいます。

そのため、html5shiv.jsを利用してHTML5に対応させます。
以下のサイトからダウンロードして、HTMLの中に読み込むためのコードを記述します。
 

html5shiv
html5shiv.jsのダウンロードページ

html5shivを読み込む

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

※パスは状況に合わせて変えてください。

jQueryはIE8に対応しているバージョンを使う

jQuery2.0以降では、IE6,IE7,IE8のサポートがされていません。
そのため、jQuery1.Xを使用しないとうまく動かないことがあります。

respond.jsを読み込む

IE8ではこのままだとメディアクエリが使用できないので、使えるようにするためにrespond.jsというファイルを読み込みます。
先程html5shivを読み込んだscript要素の下に以下のコードを記述します。

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

BootstrapをIE8に対応させる

上記の手順を踏むことで一通りは対応して動くようになりますが、細かい部分でうまく行かない場合もあります。
IEは使用している人も少ないですが、対応させる必要があるときは上記の方法を参考にしてみてください。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

まゆ
ライター

まゆ

 主にHTML,Bootstrapの記事を描いています。