Bootstrap4とBootstrap5はどちらも人気のあるフロントエンドのフレームワーク。
Web開発者が効率的にレスポンシブデザインのサイトを構築できるように設計されています。
しかし両者にはいくつかの違いがありますので紹介していきます。
bootstrap4とbootstrap5の違い
今回はbootstrap4と5の大きな違いについて5つ紹介していきます。
1.デフォルトフォント
大きな違いはありませんがBootstrap5ではデフォルトフォントとして「Inter」を採用しています。
これはBootstrap4で使用されている「Helvetica Neue」に代わるものです。
InterはGoogle Fontsから利用できるオープンソースのフォントでBootstrap5で利用される色の一部にも使われています。
2.モジュール構造
Bootstrap5ではJavaScriptのモジュール構造が導入されました。
これにより必要なモジュールのみを使用してコードを最小化できます。
Bootstrap4では全てのJavaScript機能が含まれており使わない機能も読み込んでしまうことがありますので軽量化という面でBootstrap5がオススメです。
3.グリッドシステム
Bootstrap5ではグリッドシステムが改良されました。
例えば最大のブレークポイントが576pxから670pxに変更され新しい列のスパンクラス「col」が導入されました。
またBootstrap5では列の「gap」プロパティが利用可能になり列と列の間にスペースを設定できます。
4.フォーム機能
Bootstrap5ではフォーム機能が強化され多くの新しいフォームコントロールが追加されました。
例えば範囲スライダートグルスイッチファイルコントロールなどがあります。
5.レイアウトオプション
Bootstrap5ではレイアウトオプションが改良されたのでいくつかご紹介していきます。
画像のimg要素に.img-fluidクラスを追加することで簡単に実装することが可能です。
<img src="path/to/image.jpg" class="img-fluid" alt="Responsive image">画像の幅を指定している場合は、img要素に.img-fluidクラスとstyle=”width: 100%;”を追加します。
<img src="path/to/image.jpg" class="img-fluid" alt="Responsive image" style="width: 100%;">画像をコンテナーに合わせて中央揃えする場合は、.containerクラスで囲み、img要素に.img-fluidと.mx-autoクラスを追加します
<div class="container">
<img src="path/to/image.jpg" class="img-fluid mx-auto" alt="Responsive image">
</div>以上がBootstrap 5で画像をレスポンシブに表示する方法になります。
Bootstrap4とBootstrap5どちらがオススメ？
今から始めるならBootstrap5がオススメです。
新しい機能の追加 Bootstrap5では新しい機能が追加されています。
たとえばテキストの切り抜きやボックスシャドウグリッドの自由なカスタマイズなどがあります。
将来的なサポート Bootstrap5はBootstrapの最新版であり今後のアップデートが予定されています。
Bootstrap4は2022年11月にサポートが終了する予定でありその後はセキュリティパッチ以外のアップデートは提供されません。
このため将来的なサポートを考慮するとBootstrap5がオススメです。
既存のプロジェクトのアップグレード Bootstrap5には互換性のあるクラス名が用意されているため
Bootstrap4からのアップグレードも容易に行えます。
逆にBootstrap5からBootstrap4にダウングレードする場合はいくつかのクラス名が変更されるため手間がかかることになります。
新しい機能や将来的なサポートを重視するのであればBootstrap5がオススメです。
ただし既存のプロジェクトがBootstrap4で構築されている場合はアップグレードによる影響があるので注意しましょう。
まとめ
以上がBootstrap4とBootstrap5の主な違いについてでした。断然Bootstrap5がオススメです。
Bootstrap5はより現代的なWeb開発のニーズに合わせて改良されているので今後も注目していきましょう。