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

関連記事

【Win10】Office 2016 の一部が英語表記になり戻らない

Microsoft Office 2016 を Windows10 の環境で利用していたところ、いつの間にか、画面の一部が英語になってしまいました。リボンなどのUI部分ではなく、作業中にポップアップされる操作画面のごく一部の日本語が英語になるという半端な状態です。 修正...続きを読む

2021.01.24Windows10パソコンの使い方

【Win10】ファイルを削除する前に確認メッセージを表示する

Windows10でファイルやフォルダーを削除したい場合、エクスプローラーのメニューやツールバーで表示される【削除】や、マウスの右クリックで表示される【削除】を実行する方法や、キーボードの【Delete】キーを押すことで、ファイルやフォルダーを削除(ファイルやフォルダーをゴミ箱に...続きを読む

2019.07.06Windows10パソコンの使い方

【CSS】互い違いに行の色を変えるテーブルデザイン

CSS3では、nth-childの疑似クラスが定義されて、CSSだけで、テーブル<table>デザインをよりわかりやすく設計することができるようになりました。 nth-child(n)では、n番目の子となる要素にスタイルを適用することができるため、&...続きを読む

2015.02.08CSSHTMLコーディング

【WP】ソーシャルボタンを設置できる「WP Social Bookmarking Light」の導入方法

ソーシャルメディアを通じて「いいね」と評価される記事が共有され多くの人に広がることは、第三者から好評を得ている、評判がいいことが多いと思います。 またSEOにおいては、内容が良いものはより上位に掲載されるという考え方があり、ソーシャルメディアで評価されることはSEO対策にも...続きを読む

2015.04.14WordPress

【WP】アップロードするメディアフォルダをカスタマイズする

wordpressでは画像などのメディアファイルを投稿すると初期設定では「投稿年」「投稿月」のフォルダが作られ、そのフォルダ内にデータがアップロードされます。 コーポレートサイトとして運用しカスタム投稿や固定ページを多く使用するような場合はカスタム投稿やページ毎に分けて...続きを読む

2015.03.13WordPress