Blog スタッフブログ

コーダーのKです。

Bootstrap5についてご紹介します。

ウェブデザインやウェブ開発において、レスポンシブでモバイルファーストなウェブサイトやウェブアプリケーションを簡単に作成できるようにするためのツールセットを提供します。HTML、CSS、JavaScriptの組み合わせで構成されており、豊富なコンポーネント、グリッドシステム、カスタマイズオプションを備えています。

Bootstrap 4からの変更点

Bootstrap 5では、多くの新機能と改善が導入されていました。

主に以下の点が変更されました。

jQueryの廃止

Bootstrap 5では、依存関係としてのjQueryが廃止されました。これにより、軽量化とモダンなJavaScriptの利用が促進されました。

カスタムプロパティの導入

CSSカスタムプロパティ（変数）が導入され、テーマのカスタマイズがさらに簡単になりました。これにより、カラーやフォントサイズなどの変更が一元管理できます。

新しいグリッドシステム

新しいグリッドシステムが導入され、レイアウトの制御がさらに強化されました。特に、xxlブレークポイントが追加され、大きなディスプレイへの対応が向上しました。

アイコンの統合

Bootstrap Iconsという公式アイコンセットが導入され、簡単にアイコンを利用できるようになりました。

Bootstrap 4から5に移行する際の注意点

Bootstrap 4からBootstrap 5に移行する際には、いくつかの重要な変更点や注意点があります。これらを把握しておくことで、スムーズに移行することができます。

クラス名の変更

一部のクラス名が変更されています。
移行ガイドを参照し、対応するクラス名に変更する必要があります。

jQueryの廃止

Bootstrap 5ではjQueryの依存性がなくなったため、カスタムJavaScriptコードでjQueryを使用している場合は、純粋なJavaScriptに書き換える必要があります。