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

関連記事

2015年のウェブサイトのデザイントレンド

2015年も4月新年度を迎えますね。年度の切り替わるこの時期はウェブサイトのリニューアルも多いと思います。今回は、2015年の注目されるウェブサイトのデザイントレンドをご紹介します。 Startup Framework 「Startup」タイプのウェブサイトは1ページ...続きを読む

2015.03.26WEB

【WP】イベントカレンダーを作成できるプラグイン『Event Organizer』

イベント情報を掲載するサイトを構築するとき、カレンダーで一覧を表示させたり会場の情報を掲載したい要望をいただきます。 カスタム投稿やカスタムフィールドを用いてイベント用の記事を作成したり、Googleカレンダーなどを読み込みカレンダーを表示することもできますが、管理や記...続きを読む

2015.02.23WordPress

ネイルサロンBrillez(ブリレ)様ロゴ制作

ネイルサロン『Brillez(ブリレ)』様のロゴを制作いたしました。Brillez(ブリレ)はフランス語で輝くの意味があります。 お客様のご要望で、店内はランドマークとなるシャンデリアあり、高級感のある大人の女性の雰囲気なので、ロゴも店内の雰囲気に合わせてデザインをして...続きを読む

2015.01.14ロゴ制作

【JavaScript】チェックボックスとラジオボタンのデザインをカスタマイズする『iCheck』

フォームなどで使われるチェックボックスとラジオボタンのデザイン。「jQuery」と「Zepto」を使いチェックボックスとラジオボタンのデザインをカスタマイズするライブラリ『iCheck』をご紹介します。 実装イメージ 『iCheck』はいくつかのスキンデータも用意され...続きを読む

2015.02.10HTMLコーディング

新年あけましておめでとうございます。

あけましておめでとうございます。 昨年は格別 の御厚情を賜り、厚く御礼を申し上げます。 本年もデザインスタジオ・エフでは、皆様にご満足頂けるサービスを心がけていく所存でございますので、何とぞ昨年同様のご愛顧を賜わりますよう、お願い申し上げます。皆様のご健勝と皆様の益々のご...続きを読む

2021.01.01