Bootstrap 5とBootstrap 4の主要変更点を比較│関東・名古屋・福岡のホームページ制作会社│アイエムワークス株式会社

070-2017-3870 無料相談・お見積り

BLOG

開発者ブログ

Bootstrap 5とBootstrap 4の主要変更点を比較

こんにちは。
2021年5月に正式リリースとなったBootstrap5。
Bootstrap 5のリリースによって、Bootstrap 4から様々な改良が行われましたね。
ここでは、Bootstrap 5の主な変更点と、導入時に押さえておきたいポイントを簡潔にまとめてみます。

これからBootstrapを始める方も、すでにBootstrap 4で構築しているサイトをBootstrap 5にアップデートする方も、両バージョンの違いを理解しておくことは非常に大切です。変更点を把握しておくことで、スムーズに最新機能を活用し、より効率的にプロジェクトを進められます。

実は先日、別ブログにてBootstrapのバージョンアップについて相談を受けました。
互換性の部分で気にされていたので、この記事では初心者の方でも理解しやすいよう、なるべく完結に紹介していきます。これを参考に、スムーズにバージョンアップを行えるようサポートできればと思います。

Bootstrap4と5の、技術的な4つの違い
Bootstrap5のコーディング時に気を付けるポイント
Bootstrap5の変更点は他にも変更はあります
Bootstrapでの開発はお任せください

Bootstrap4と5の、技術的な4つの違い

脱jQuery

Bootstrap 4までは、モーダル、ドロップダウン、ツールチップなどでjQueryを必須としていましたが、Bootstrap 5ではこれが不要になりました。
Bootstrap 5のすべてのコンポーネントは、ネイティブのJavaScriptで実装されています。

Bootstrap4

参照：https://getbootstrap.jp/docs/4.5/getting-started/introduction/

Bootstrap4はjquery依存なので、bootstrap.jsを読み込む前にjqueryを読み込む必要があります。

Bootstrap5

参照：https://getbootstrap.jp/docs/5.0/getting-started/introduction/

Bootstrap5はjqueryが完全に廃止され、よりモダンなjavascriptで構成されています。

脱jquery構成になったことで、ファイルの読み込みサイズが軽減され結果的にページの読み込み速度が高速になります!

Internet Explorer非サポート

Bootstrapは、Internet Explorerを含むクロスブラウザ対応を強調していたのが特徴でした。しかし、Bootstrap 5ではInternet Explorerへのサポートが行われないと発表されています。

もともとInternet Explorerのユーザー数は多くなく、Microsoft Edgeの登場によってさらに利用率は減少しました。Windows 10ではサポート終了まで数年の猶予がありましたが、Microsoft 365は2021年8月にInternet Explorerのサポートが終了しています。

すでに多くのサービスがInternet Explorerのサポートを終了しており、Microsoft 365のサポート終了に続いて多くのサービスでも同様の動きが見込まれています。そのため、Internet Explorerが非対応であっても大きな影響はないでしょう。

参照：https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/

新しいグリッドシステムとブレークポイント

Bootstrap 4と5の主な違いの一つは、新しいブレークポイントの追加です。
Bootstrap 5では、より柔軟なレスポンシブデザインを実現するために、新たに追加されたブレークポイントがあります。

Bootstrap 4のブレークポイント

Bootstrap 4のブレークポイントは次の5つです。

xs	(モバイル): 0px 以上
sm	(小型デバイス): 576px 以上
md	(中型デバイス): 768px 以上
lg	(大型デバイス): 992px 以上
xl	(超大型デバイス): 1200px 以上

Bootstrap 4のブレークポイント一覧

Bootstrap 5のブレークポイント

Bootstrap 5のブレークポイントは次の7つです。

xs	(モバイル): 0px 以上
sm	(小型デバイス): 576px 以上
md	(中型デバイス): 768px 以上
lg	(大型デバイス): 992px 以上
xl	(超大型デバイス): 1200px 以上
xxl	(特大デバイス): 1400px 以上

Bootstrap 5のブレークポイント一覧

Bootstrap 5では、新しくxxlブレークポイントにより、非常に大きなデバイス向けのスタイルを詳細に設定できるようになりました。これにより、大型ディスプレイやデスクトップ向けのデザインをさらに調整しやすくなります。

Bootstrap Iconsの提供

Bootstrap 5では、Bootstrap独自のアイコンセット「Bootstrap Icons」が新たに導入されました。Bootstrap 4には公式のアイコンセットがなく、外部のアイコンライブラリ（Font AwesomeやMaterial Iconsなど）を利用するのが一般的でしたが、Bootstrap 5では公式のアイコンライブラリが追加され、さらに簡単にアイコンを使えるようになっています。

Font AwesomeやMaterial Icons（Bootstrap 4）

参照：https://fontawesome.com/v4/icons/

Font Awesomeを例にすると、Font AwesomeのCDN（外部サービス）よりフォントCSSを読み込んで利用していました。使い勝手は悪くはないのですが、Font AwesomeのCSS自体がかなりの容量があり、結果的にサイトの表示速度にも影響することが多々ありましたね。

Bootstrap Icons

参照：https://icons.getbootstrap.com/

Bootstrap Iconsの特徴

SVG形式のアイコン

Bootstrap IconsはSVG形式で提供され、軽量でスケーラブル、品質を損なわずに拡大縮小が可能です。SVGをインラインで埋め込むこともでき、HTMLに直接アイコンを追加するのが簡単です。

豊富なアイコン数

現在、Bootstrap Iconsは2,000種類以上のアイコンを提供しており、UI要素やアクションアイコン、ソーシャルメディアアイコンなど幅広くカバーしています。

公式サポートとスタイルの統一

Bootstrapのデザインと統一感があり、Bootstrap 5の他の要素と自然に馴染むスタイルが特徴です。

使いやすいカスタマイズオプション

SVGなので、CSSを使ってアイコンのサイズやカラーを簡単に変更できます。Bootstrap Icons公式サイトには、アイコンの一覧と使用例も提供されているので、選びやすく使いやすい仕様になっています。

Bootstrap Iconsは、外部ライブラリに依存することなく、Bootstrap 5で公式にサポートされているアイコンセットとして活用できます！

CSS カスタムプロパティ (変数) が使える

参照：https://getbootstrap.jp/docs/5.3/customize/css-variables/

Bootstrap 5では、CSSカスタムプロパティ（CSS変数）の導入により、テーマやスタイルのカスタマイズが非常に簡単かつ効率的になっています。これにより、テーマ全体の色やフォントサイズなどを変数として定義し、一箇所を変更するだけで一括で更新が可能になりました。

カスタムプロパティはちょっと難しいので、ここでは簡単に説明します。

:root {
  --bs-primary: #0d6efd; /* ブートストラップの主要カラー */
  --bs-secondary: #6c757d;
  --bs-font-size-base: 1rem;
}

body {
  color: var(--bs-primary);
  font-size: var(--bs-font-size-base);
}

Bootstrap 5で予め定義されている –bs-primaryの色はもともと#0d6efdです。

次に、bodyのcolorにvar(–bs-primary)と定義します。
また、他の場所でも同様に定義することで、変数として一括管理できる仕組みです。

Bootstrap 5のCSSカスタムプロパティの導入により、デザインの柔軟性が高まり、ダークモードやテーマのカスタマイズが格段に容易になりました。
ちなみに、今回はカラーで説明しましたが、フォントサイズ、padding、marginなどに対しても変数が設定されているので、Bootstrap 4に比べてカスタマイズ性が向上しました！