Bootstrap 5と4の違い：主要な変更点をまとめて紹介

Bootstrap5はどう違う

アルファ版が2020年6月16日より正式にリリースされ、2021年02月10日には“Bootstrap 5 Beta 2”がリリースされているBootstrap5。

Bootstrap v5.0.0-beta3 (possibly promoted to v5 stable)
https://blog.getbootstrap.com/2021/02/10/bootstrap-5-beta-2/

公式ブログでも上記のように安定版について発表されています。
春の終わり頃には正式リリースという予測も多いですよね。

今のうちに知っておきたい、Bootstrap4からBootstrap5で大きく変わった点、Bootstrap5を使用するのなら知っておきたいポイントを紹介します。

• Bootstrap5と4、６つの違い
• - 1.脱jQuery
• - 2.Internet Explorer非サポート
• - 3.ブレークポイント「xxl」追加
• - 4.ガターを細かく設定できるg-*クラス
• - 5.CSS カスタムプロパティ (変数) が使える
• - 6.クラス名にも変更がある

Bootstrap5と4、６つの違い

Bootstrap5でBootstrap4とは大きく異なっている点を、６項目に分けて紹介します。
今すぐBootstrap v5に切り替えなくても、知っておいて損はないですよ！

1.脱jQuery

Bootstrap4まではjQueryに依存する形でbootstrap.jsファイルが動いていました。

はじめに - Bootstrap 4.5 - 日本語リファレンス
https://getbootstrap.jp/docs/4.5/getting-started/introduction/

しかし、Botstrap5からはjQueryが削除されました。
「Veu.js」などのJavaScriptフレームワークが登場したことで、よりシンプルに、どのフレームワーク内でも使いやすいように依存関係を無くしたようです。

脱jQueryの構成になったことで、ファイルサイズが軽量化し、ページの読み込みがより高速に行われるようになったと発表されています。
導入もbootstrap.bundle.jsを使う場合は１ファイルだけなのでスッキリしていますね。

はじめに · Bootstrap v5.0
https://getbootstrap.jp/docs/5.0/getting-started/introduction/

2.Internet Explorer非サポート

Bootstrap4までは、Internet Explorerを含めたクロスブラウザ対応が売りの一つでした。
しかし、Bootstrap5からはInternet Explorerへのサポートを行わないことが発表されています。

Bootstrap no longer depends on jQuery and we’ve dropped support for Internet Explorer. We’re sharpening our focus on building tools that are more future-friendly, and while we’re not fully there yet, the promise of CSS variables, faster JavaScript, fewer dependencies, and better APIs certainly feel right to us.
https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/

元々ユーザー数が多くなく、Edgeが登場したことで更に利用率が減少したInternet Explorer。windows10の場合サポート終了まではまた数年ありますが、Microsoft 365は2021年8月にInternet Explorerのサポートを終了させることが発表されています。

既にInternet Explorerのサポートを終了しているサービスもありますし、Microsoft 365と前後する時期でサポート終了が見込まれているサービスも多くあります。
利用者も減っていくと思われますので、IE非対応であっても大きな影響は無いでしょう。

3.ブレークポイント「xxl」追加

Bootstrap5ではブレークポイントが一つ追加されています。

Bootstrap4で最も大きなブレークポイントはxl（Extra large≥1200px）。
Bootstrap5では、その上にxxl（Extra extra large≥1400px）が登場しています。

xxlの追加により、デスクトップパソコンでシェア率上位の
1920px×1080px
1366px×768px
この２つ、どちらにも最適なWebサイトの構成がしやすくなりますね。

Stat Counter
https://gs.statcounter.com/screen-resolution-stats/desktop/worldwide

4.ガターを細かく設定できるg-*クラス登場

Bootstrap5ではGutters (ガター)というユーティリティが登場しています。

Bootstrap4まではrowにガターが設定されており、それを打ち消すためのno-guttersクラスがあるのみでした。カラム同士の間を開けたいときなどは、paddingやmarginのクラスを使用しする形でしたね。

Bootstrap5からは、rowに「g-*」というクラスを追加することで、子要素となるカラム同士の余白を任意で設定できるようになりました。

• .g-* ：縦横ガター
• .gy-*：縦ガター
• .gx-*：横ガター

Gutters (ガター) · Bootstrap v5.0
https://getbootstrap.jp/docs/5.0/layout/gutters/

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

Bootstrap5ではCSS カスタムプロパティ(CSS変数)が利用できるようになりました。
CSS変数というのは、予め名前をつけて登録しておいたスタイルを、他のセレクタの指定でも使用できるというものです。

例えばbootstrap4で、Bootstrapで用意されているカラーと合わせて背景色を付けたい場合、どちらかの方法を使っていました。

A,HTMLでBootstrapクラスを入れる

<div class="bg-primary"></div>

B,カラーコードを確認してCSSで記述

.xx{
  background-color: #007bff;
}

Aだと複数箇所で使いたい場合、それぞれにクラスを入れなくてはいけません。
Bの場合はカラーコードを確認するのが手間ですね。

Bootstrap5では色のCSS変数が用意されているので、配色を統一したい際などに便利です。

https://getbootstrap.jp/docs/5.0/customize/css-variables/

Bootstrap5では下記のように記述すると、

• .card-titleの文字色
• .commentの枠線の色
• footerの背景色 がすべてBootstrapの青色で統一されます。

.card-title{
  color: var(--bs-blue);
}
.comment{
  border:1px solid var(--bs-blue);
}
footer{
    background-color: var(--bs-blue);
}

こうしたCSS 変数は独自にカスタマイズや拡張も出来ます。
上手く活用すると制作時間の短縮に繋がり便利な一方、カスタマイズにはBootstrap4よりも高難易度のCSS知識が必要と言えるかもしれません。

6.クラス名にも変更がある

Bootstrap4→Bootstrap5の大きな変更点は上記５つです。
ただ、それ以外にもクラス名などで小さな変更点はたくさんあります。

例えば、左もしくは右のmarginやpaddingをつける時。
Bootstrap4ではleft,rightの頭文字で「ml-3」のように指定をしていました。
Bootstrap5ではstart,endの頭文字で「ms-3」のようなクラス指定をします。

また、jQueryに依存しない独自のJavascriptが設定されたことで
カルーセル
ナビバー（ハンバーガー開閉）
などのコードも変更されています。

読み込ませているBootstrapのバージョンだけを変更してしまうと、動かなくなる・レイアウトが崩れる箇所が多々出てくるので注意しましょう。