Bootstrap 5とBootstrap 4の違い：主要な変更点をまとめて紹介
2021年5月5日に正式リリースとなったBootstrap5。
Bootstrap4からBootstrap5で大きく変わった点、Bootstrap5を使用するのなら知っておきたいポイントを紹介します。これから始める方も、既存サイトではBootstrap4が使われていたりするので、違いを把握しておくと便利です。
Bootstrap4と5の、技術的な4つの違い
1. 脱jQuery
Bootstrap4まではjQueryに依存する形でbootstrap.jsファイルが動いていました。
https://getbootstrap.jp/docs/4.5/getting-started/introduction/
しかし、Bootstrap 5ではjQueryが完全に削除*され、より軽量でモダンなJavaScriptで構成されています。これはVeu.jsなどのJavaScriptフレームワークが多く利用されている現状で、よりシンプルに、どのフレームワーク内でも使いやすいように依存関係を無くしたようです。
脱jQueryの構成になったことで、ファイルサイズが軽量化し、ページの読み込みがより高速に行われるようになったと発表されています。
導入もbootstrap.bundle.jsを使う場合は１ファイルだけなのでスッキリしていますね。
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. アイコンセットの提供
Bootstrap 4ではFont Awesomeが推奨されていましたが、Bootstrap 5では独自の「Bootstrap Icons」が導入されました。
特にユーザー登録などをしなくても、CDNでCSSファイルを読み込むだけですぐに使えます。デザインもシンプルで、基本的なアイコンは概ね揃っているので、汎用性は高いでしょう。
4.CSS カスタムプロパティ (変数) が使える
Bootstrap5ではCSS カスタムプロパティ(CSS変数)が利用できるようになりました。結果、テーマのカスタマイズがより簡単、短時間でできるようになったことも大きな変更点です。ダークモード対応もできます。
ちなみに、CSS変数（カスタムプロパティ）とは、CSSの中で値を再利用するための機能です。これにより、色やフォントサイズなどのスタイルを1つの変数として定義し、他の部分でも繰り返し使ったり、一括して変更することができます。
▽ CSS変数について詳しくはこちら
Skillhubブログ
例えばbootstrap4で、Bootstrapで用意されているカラーと合わせて背景色を付けたい場合、どちらかの方法を使っていました。
方法A：HTMLでBootstrapの色クラスを指定
<div class="bg-primary"></div>
方法B：CSSで独自に記述する
.xx{
background-color: #007bff;
}
Aだと複数箇所で使いたい場合、それぞれにクラスを入れなくてはいけません。
Bの場合はカラーコードを確認するのが手間ですね。
Bootstrap5では色のCSS変数が用意されているので、自分で作った要素（クラス）にも同じ色を使いたい、とか、「danger」の色味を全体的に変えたい、みたいな場面での調整がしやすくなっていると言えます。
まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする
サクッとコーディング時に気をつけたい3つのポイント
1. ブレークポイント「xxl」追加
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
2. ガターを細かく設定できるg-*クラス登場
Bootstrap5ではGutters (ガター)というユーティリティが登場しています。
Bootstrap4まではrowにガターが設定されており、それを打ち消すためのno-guttersクラスがあるのみでした。カラム同士の間を開けたいときなどは、paddingやmarginのクラスを使用しする形でしたね。
Bootstrap5からは、rowに「g-*」というクラスを追加することで、子要素となるカラム同士の余白を任意で設定できるようになりました。
- .g-* ：縦横ガター
- .gy-*：縦ガター
- .gx-*：横ガター
3. 左（l）、右（r）の入ったクラスが使えない
Bootstrap4では、例えば左にmarginを付けたい時に、leftの頭文字が入った「ml-3」などのクラスを使っていました。右ならrightなので「mr-3」ですね。
Bootstrap5では、このleftとrightがなくなりました。文字の記述される方向（書字方向）によって方向を決めるため、start（inline-start）とend（inline-end）が使われています。左にマージンを付けたかったら、「ms-3」になるわけです。
余白だけではなく、floatやtext-alignにもこのルールが適用されます。Bootstrap4からBootstrap5にアップグレードした時に、一番レイアウトが崩れるのが、このsides（方向を決める）の違いかなぁと思います。
他にも変更はあります
ここまで紹介した以外にも、コンポーネントのクラスなど小さな変更点はたくさんあります。
例えば、カードデッキクラス（.card-deck）が無くなっていたり、Navbarの配色用の記述が変わっていたり。
また、jQueryに依存しない独自のJavascriptが設定されたことで、カルーセルやナビバー（ハンバーガー開閉）などのコードも変更されています。読み込ませているBootstrapのバージョンだけを変更してしまうと、動かなくなる・レイアウトが崩れる箇所が多々出てくるので注意しましょう。
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
5月18日まで