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

関連記事

【フォト】蓮華寺池公園フォトギャラリー《こどもの日》

静岡県藤枝市にある「蓮華寺池公園」。市の花でもある藤の花が見頃になる4月末から5月初旬まで藤まつりが開催されます。期間内にこどもの日もあることから、公園内に鯉のぼりがのぼります。新緑に青い空、湖の風景は風情がありますね。 フォトギャラリー ※写真をクリックすると拡大表示し...続きを読む

2019.05.14フォトギャラリー藤枝

美容室グランディール様折込チラシ制作

富士宮市にある『美容室グランディール』様の折込チラシを制作いたしました。お店で開催されるキャンペーン、お店の基本情報を告知するための折込チラシです。 [gallery link="file" columns="4" ids="725,726"] クライ...続きを読む

2015.03.19チラシ制作美容室

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

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

2015.04.08WEBサイト制作美容室

【フォト】第41回金比羅山・瀬戸川桜まつり

2019年3月25日(月)~4月7日(日)に開催された第41回金比羅山・瀬戸川桜まつり。藤枝市の中心を流れる瀬戸川沿いの両岸と金比羅山は、約800本以上ものソメイヨシノがあり、桜の名所として知られています。今年の桜の開花は4月に入ってからが満開でした。今回撮影したのは、夕暮れの瀬...続きを読む

2019.04.15フォトギャラリー

D-SALON様WEBサイトのデザイン提案

美容室のD-SALON様のWEBサイトのリニューアルにおけるデザイン提案をいたしました。WEBサイトのリニューアルのご提案において、従来のWEBサイトより、ふんわりとした女性らしく可愛らしいイメージでデザインをいたしました。 お店の特徴やPRしたい内容をバナーとして掲載し、...続きを読む

2019.04.15WEBデザイン美容室