【HTML】Internet Explorer 対応したBootstrapの選び方

Webサイトの制作を相談をいただく際に、「Internet Explorer に対応したい」という要望をうかがうことがあります。主要ブラウザの日本国内のシェアを調べてみると、最新バージョンの「Internet Explorer 11」で約7%、「Internet Explorer 10」以下では約1%程度ではないかという調査データがみられました。

「Internet Explorer 10」より下にあたる「Internet Explorer 9」、「Internet Explorer 8」が稼働している環境をあげると、「Windows XP」や「Windows 7」などがあります。実際に「Windows XP」搭載のパソコンでインターネットを使用している場面に出会うと、制作するWebサイトを「Internet Explorer に対応したい」という要望があれば対応したいと思うところです。

本日の本題として、レスポンシブ対応のWebサイトを制作するために用いられるフレームワークとして人気の「Bootstrap」を用いて構築する「Internet Explorer に対応する」要望をクリアするためには、どのようにすればよいかをまとめてみました。

Bootstrap 5 の「Internet Explorer」対応状況

現行の最新バージョンであるBootstrap 5では、「Internet Explorer」には対応せず、「Microsoft Edge」に対応するようと切り替えられている状態になります。
「Internet Explorer」は、Microsoftよりサポートが終了する予定で進めれているいるため、全世界的には「Internet Explorer」がなくなる方向に沿っているのだと思います。

Bootstrap 5にて採用さているCSSやJavascriptを用いた機能の一部が「Internet Explorer」では機能しないこともあり、「Internet Explorer」を想定する場合は、Bootstrap 5 を採用する選択肢はなくなります。

Bootstrap 4 の「Internet Explorer」対応状況

Bootstrap 4 では、「Internet Explorer」への対応がありますが、「Internet Explorer」のバージョンが10以降となっています。そのため、「Internet Explorer 9」、「Internet Explorer 8」は対応外となっています。

「Internet Explorer 9」、「Internet Explorer 8」が対応外となっているのは、Bootstrap 4 がFlexboxを採用することで、フレキシブルなレイアウト構築を実現している点が挙げられます。

「Internet Explorer 9」、「Internet Explorer 8」では、Flexboxは未対応で、「Internet Explorer 10」でもベンダープレフィックス(-ms-)が必要であったり、他のブラウザでの表示とは異なってしまう点があったり、Bootstrap 4 を採用した際は、「Internet Explorer」のための調整が必要になります。

Bootstrap 3 の「Internet Explorer」対応状況

Bootstrap 3 では、限定付きではありますが、「Internet Explorer 9」、「Internet Explorer 8」にも対応することができます。

Bootstrap 3 では、レイアウトの構築にfloatを用いていることもあり、「Internet Explorer 9」、「Internet Explorer 8」にも対応したレスポンシブ対応のWebサイトを構築する手助けになります。

ただし、「Internet Explorer 9」、「Internet Explorer 8」では対応していないCSSプロパティ、HTML5に未対応の内容があるため、HTML5に対応させるhtml5shivや、CSS3に対応させるCSS3 PIE、Respond.jsなどを組み込む必要があります。

また、「Bootstrap 4」と「Bootstrap 3」では、基本的なクラスの使い方が変更されて箇所があるため、「Bootstrap 3」で構築後、「Bootstrap 4」へ移行する場合は、クラスの変更など再構築が必要になります。

以上のような対応状況を踏まえて、「Internet Explorer に対応したい」という要望をかなえながらも、将来は「Internet Explorer」がなくなってしまう可能性が高いことを踏まえて、計画的な運用プランを提示していきたいと思います。

関連記事

【WP】WEBカタログのようなギャラリーを作成することができる『Page Flip Image Gallery』

説明書やページ数のあるカタログをサイトに公開するとき、ページをペラペラとめくることができるWEBカタログの形式で公開したいときがあります。 しかしWEBカタログはページをめくるアニメーションやボタン操作などFlashやJavascriptなどを用いた開発が必要となるので...続きを読む

2015.02.19WordPress

【デザイン】想像力を刺激するようなクリエイティブな本棚

今回は、タイトルの通り普通の本棚とは異なるアイディアにあふれたクリエイティブな本棚のデザインをまとめてみました。 “Bias of Thoughts” 目の錯覚を利用した不思議なデザインです。 Link:http://melbournea...続きを読む

2015.02.15インスピレーション

【WP】標準ギャラリーをGalleriffic対応にするプラグイン『Photospace』

『Photospace』は、jQueryのサムネイル付のスライドショーギャラリーを実装できる「Galleriffic」を、WordPressの標準ギャラリーのショートコードに対応させることができるプラグインです。 WordPressでは標準ギャラリーのショートコードの出...続きを読む

2015.02.18WordPress

【HTML】Font Awesome 5 をWEBサイトに組み込む方法

Font AwesomeはWEBサイトにも組み込むことができるアイコンフォントです。現行の最新バージョン(Version 5.8.1)では、無料版で1,513種類、有料版で5,097種類ものアイコンが利用することができます。アイコンは矢印やインターフェースで利用でいる記号、SNS...続きを読む

2019.04.24HTMLコーディング

【ツール】レスポンシブサイトの確認に便利なViewportエミュレーター『Dimensions』

レスポンシブサイトを制作すると、PCやスマートフォン、タブレットでそれぞれ表示が異なるため、表示もそれぞれの端末に合わせたサイズでの確認が必要になります。 そこで便利なツールとして、Google Chromeのアプリに端末サイズごとのシミュレーションができる『Dimen...続きを読む

2015.02.10HTMLコーディング