【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」がなくなってしまう可能性が高いことを踏まえて、計画的な運用プランを提示していきたいと思います。

関連記事

美容室トップスタイル様WEBサイト制作

富士宮市にあるトータルビューティーサロン『美容室トップスタイル』様のWEBサイトを制作いたしました。南国ムードあふれる癒し系美容サロンをテーマにスタッフの笑顔で出迎えることができるデザインにいたしました。 クライアント美容室トップスタイル様 U...続きを読む

2015.04.08WEBサイト制作美容室

【無料】商用利用OKシームレステクスチャ「木目パネル(ヒノキ風)」素材

自然の木目を表現したシームレスの無料で使えるテクスチャです。ヒノキの木目パネル、壁、フローリングのようなイメージに仕上げています。継ぎ目のないシームレス加工をしているテクスチャです。テクスチャマッピングやタイル敷の背景素材などにお使いいただけます。商用利用OKのフリー素材...続きを読む

2018.09.14シームレステクスチャ

【WP】ログインページをカスタマイズする方法

WordPressのログインページはプラグインなどを利用してカスタマイズすることができます。 今回は、プラグインを使わずにアクションフックを利用してWordPressのログインページで利用されるCSSをカスタマイズしてオリジナルのデザインに変更する方法をご紹介します。 ...続きを読む

2015.02.25WordPress

【デザイン】写真加工による幻想的なアートの世界

実際の写真を加工して幻想的で不可思議な世界を作るフォトグラファー Erik Johansson 氏の作品をご紹介します。 Erik Johansson Photographer Erik Johansson ...続きを読む

2015.03.10インスピレーション

【CSS】CSS3による枠線の新しい表現方法

CSS3より定義された「Border Radius」「Border Image」を使うことで角丸のボックスや、罫線の装飾によってこれまで画像で作成していた要素をCSSのみでデザインすることができるようになりました。 角丸(border-radius) 「b...続きを読む

2015.02.08HTMLコーディング