bootstrap5 チュートリアル

Bootstrap 5 チュートリアル - 最新版フレームワークで作るモダンな Web デザイン

このチュートリアルでは、Bootstrap 5 を使って美しくレスポンシブな Web サイトを構築する方法を、基礎から実践まで体系的に学びます。豊富なコード例とわかりやすい解説で、初心者の方でもスムーズに Bootstrap 5 を習得し、モダンな Web デザインを実現できます。

1. Bootstrap 5 を始めよう

この章では、Bootstrap 5 の概要、導入方法、基本的な HTML テンプレートについて解説します。

Bootstrap とは？

Bootstrap は、世界中の開発者によって愛用されている、最も人気のあるオープンソースのフロントエンドフレームワークです。HTML、CSS、JavaScript をベースに構築されており、Web サイトや Web アプリケーションの開発を効率化します。特に、レスポンシブデザイン、モバイルファースト、クロスブラウザ対応といった現代の Web 開発に欠かせない機能を提供している点が大きな魅力です。

フロントエンドフレームワークの概要と利点

フロントエンドフレームワークは、Web サイトや Web アプリケーションの外観（フロントエンド）を構築するためのテンプレートやコンポーネントを提供するソフトウェアパッケージです。HTML、CSS、JavaScript などの基本的な Web 技術を抽象化し、開発者がより効率的に作業できるように支援します。

フロントエンドフレームワークを利用する主な利点は以下の通りです。

**開発の効率化:** あらかじめ用意されたコンポーネントやユーティリティクラスを利用することで、コードの記述量を削減し、開発スピードを向上させることができます。
**コードの再利用性:** コンポーネント指向の開発を促進するため、コードの再利用性を高め、保守性の向上に繋がります。
**一貫性のあるデザイン:** フレームワークのデザインガイドラインに従うことで、統一感のある美しい Web サイトを容易に構築できます。
**レスポンシブ対応の容易さ:** 多くのフレームワークがレスポンシブデザインに対応したグリッドシステムやユーティリティクラスを提供しており、様々なデバイスに対応した Web サイトを容易に構築できます。

Bootstrap 5 の新機能と変更点

Bootstrap 5 は、Bootstrap 4 から多くの新機能が追加され、変更が加えられています。主な変更点は以下の通りです。

**jQuery の廃止:** Bootstrap 5 では、jQuery への依存関係が完全に排除され、JavaScript のみで動作するようになりました。これにより、軽量化とパフォーマンス向上が実現しています。
RTL (Right-to-Left) のサポート:** アラビア語やヘブライ語のように、右から左へ記述する言語 (RTL) のサポートが強化されました。

**新しいコンポーネントの追加:** オフキャンバスメニューやアコーディオンなど、新たなコンポーネントが追加され、より多彩な UI を構築できるようになりました。
**ユーティリティクラスの拡充:** ユーティリティクラスがさらに充実し、より細かなスタイル調整が CSS のみで可能になりました。
**ドキュメントの刷新:** ドキュメントがより見やすく、使いやすく刷新されました。

Bootstrap 5 の導入

Bootstrap 5 を導入するには、以下の3つの方法があります。

CDN を利用した導入方法: CDN (Content Delivery Network) から Bootstrap の CSS と JavaScript ファイルを読み込んで使用する方法です。最も簡単な導入方法であり、HTML ファイルに以下のコードを記述するだけで Bootstrap 5 を使用できます。
```
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
```

パッケージマネージャーを利用した導入方法: npm や yarn などのパッケージマネージャーを使用して、Bootstrap 5 をプロジェクトにインストールする方法です。
```
npm install [email protected]
```

Bootstrap のダウンロードとローカル環境への設置: Bootstrap の公式サイトから、ソースファイルをダウンロードし、プロジェクトの任意の場所に配置する方法です。
```
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/bootstrap.bundle.min.js"></script>
```

基本的な HTML テンプレート

Bootstrap 5 を使用した基本的な HTML テンプレートは以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 の基本テンプレート</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Bootstrap 5 を適用した HTML の基本構造

上記のコードは、HTML5 の基本構造に Bootstrap 5 の CSS と JavaScript ファイルを読み込んだものです。Bootstrap 5 の CSS ファイルは、Bootstrap のスタイルを適用するために必要です。Bootstrap 5 の JavaScript ファイルは、Bootstrap の JavaScript プラグインを使用するために必要です。

viewport メタタグとレスポンシブ Web デザイン

<meta name="viewport" content="width=device-width, initial-scale=1.0"> は、viewport メタタグと呼ばれ、レスポンシブ Web デザインを実現するために非常に重要です。viewport メタタグを設定することで、ブラウザはデバイスの画面サイズに合わせて Web ページを適切に表示することができます。

グリッドシステムの概要と基本的な使い方

グリッドシステムは、Bootstrap の最も重要な機能の1つです。グリッドシステムを使用することで、様々な画面サイズに合わせて柔軟なレイアウトを作成することができます。グリッドシステムは、12 カラムを基本としており、カラムの幅を調整することで、様々なレイアウトを実現できます。

例えば、画面サイズが「md」（中）以上の場合は3カラム、画面サイズが「md」未満の場合は1カラムで表示するレイアウトは、以下のように記述します。

<div class="container">
  <div class="row">
    <div class="col-md-4">カラム1</div>
    <div class="col-md-4">カラム2</div>
    <div class="col-md-4">カラム3</div>
  </div>
</div>

2. Bootstrap 5 のレイアウト

この章では、Bootstrap 5 を使用したレイアウトの基本について解説します。具体的には、グリッドシステム、ユーティリティクラス、Flexbox について説明します。

グリッドシステム

Bootstrap 5 のグリッドシステムは、Web ページのレイアウトを容易に作成するための強力なツールです。レスポンシブデザインに対応しており、さまざまな画面サイズに合わせてコンテンツを美しく配置できます。

コンテナ、行、カラムの役割と使い方

Bootstrap 5 のグリッドシステムは、以下の3つの主要な要素で構成されています。

コンテナ (.container または .container-fluid): コンテンツを囲み、サイト全体の幅を制御します。.container は固定幅、.container-fluid は画面幅いっぱいに広がるレスポンシブな幅になります。
行 (.row): カラムを横一列に並べるための要素です。コンテナの中に配置します。
カラム (.col-*): コンテンツを配置する縦長の領域です。行の中に配置します。

<div class="container">
  <div class="row">
    <div class="col-sm-4">カラム1</div>
    <div class="col-sm-4">カラム2</div>
    <div class="col-sm-4">カラム3</div>
  </div>
</div>

ブレークポイントを活用したレスポンシブなレイアウト

ブレークポイントは、画面サイズが変化した際にレイアウトを調整するための閾値です。Bootstrap 5 では、以下のブレークポイントが定義されています。

ブレークポイント	画面サイズ	クラスプレフィックス
xs (Extra Small)	<576px	`.col-`
sm (Small)	≥576px	`.col-sm-`
md (Medium)	≥768px	`.col-md-`
lg (Large)	≥992px	`.col-lg-`
xl (Extra Large)	≥1200px	`.col-xl-`
xxl (Extra Extra Large)	≥1400px	`.col-xxl-`

カラムの幅を指定するクラスにブレークポイントのプレフィックスを付けることで、特定の画面サイズ以上でのみ適用されるレイアウトを定義できます。例えば、.col-md-6 は、中画面サイズ以上の画面でカラム幅が 50% になります。

カラムの整列、オフセット、順序変更

Bootstrap 5 のグリッドシステムでは、カラムの整列、オフセット、順序変更も簡単に行えます。

整列: .justify-content-* クラスを使って、カラムを水平方向に整列できます。例えば、.justify-content-center は、カラムを中央揃えにします。
オフセット: .offset-* クラスを使って、カラムを右側にオフセットできます。例えば、.offset-md-4 は、中画面サイズ以上の画面でカラムを 4 カラム分右にオフセットします。
順序変更: .order-* クラスを使って、カラムの表示順序を変更できます。例えば、.order-md-2 は、中画面サイズ以上の画面でカラムを 2 番目に表示します。

ユーティリティクラス

ユーティリティクラスは、Bootstrap 5 で用意されている、マージン、パディング、色、表示などを簡単に調整できる便利な CSS クラスです。これらのクラスを HTML 要素に適用することで、柔軟かつ効率的にスタイルを設定できます。

表示の制御 (d-* クラス)

.d-* クラスを使用して、要素の表示/非表示を制御することができます。例えば、.d-none クラスを適用すると、要素はすべての画面サイズで非表示になります。特定の画面サイズでのみ要素を非表示にする場合は、.d-sm-none、.d-md-none のようにブレークポイントを指定します。

余白とパディング (m-* クラス、p-* クラス)

.m-* クラスはマージン、.p-* クラスはパディングを調整するためのクラスです。* には、top、bottom、left、right、x (left & right)、y (top & bottom)、blank (all) を指定することができます。また、0、1、2、3、4、5 の6段階で余白とパディングの幅を調整することができます。さらに、ブレークポイントを指定することで、特定の画面サイズでのみ適用することも可能です。

色、背景色、フォントサイズなどの調整

Bootstrap 5 では、色、背景色、フォントサイズなどを調整するためのユーティリティクラスも用意されています。

テキストカラー: .text-* クラスを使用します。例えば、.text-primary はプライマリカラーのテキスト、.text-danger は赤色のテキストになります。
背景色: .bg-* クラスを使用します。例えば、.bg-light は明るい背景色、.bg-dark は暗い背景色になります。
フォントサイズ: .fs-* クラスを使用します。例えば、.fs-1 は最も大きいフォントサイズ、.fs-6 は小さいフォントサイズになります。

Flexbox

Flexbox は、CSS のレイアウトモジュールであり、要素を柔軟に配置するための強力なツールです。Bootstrap 5 は、内部的に Flexbox を使用しており、開発者はユーティリティクラスやグリッドシステムを通じてその恩恵を受けることができます。

Flexbox の基本的な概念と利点

Flexbox を使うと、従来のフロートやポジショニングでは難しかった、要素の垂直方向の配置、順序の入れ替え、均等な配置などが容易にできるようになります。

Bootstrap 5 での Flexbox の活用方法

Bootstrap 5 では、.d-flex クラスを要素に適用することで、Flexbox レイアウトを使用できます。さらに、.flex-row、.flex-column、.align-items-center、.justify-content-center などのクラスを組み合わせて、要素の配置を細かく調整できます。

レイアウトの柔軟性を高めるテクニック

Flexbox を使いこなすことで、より複雑で柔軟なレイアウトを実現できます。例えば、要素を上下左右に中央揃えしたり、要素を均等に配置したり、要素の高さを自動調整したりすることができます。

3. コンテンツのスタイリング

この章では、Bootstrap 5 を使用して、テキスト、テーブル、フォームなどのコンテンツを効果的にスタイリングする方法を解説します。

タイポグラフィ

Bootstrap 5 は、見出し、段落、リストなどのタイポグラフィ要素に対して、あらかじめ定義されたスタイルを提供しており、視覚的に魅力的で読みやすいテキストコンテンツを作成できます。

見出し、段落、リストのスタイル

見出し: <h1> から <h6> までの見出し要素に対して、適切なフォントサイズ、フォントウェイト、マージンなどが適用されます。
段落: <p> タグで囲まれた段落は、適切な行間とマージンで表示されます。
リスト: <ul> タグや <ol> タグで囲まれたリストは、番号付きリストと箇条書きリストとして表示されます。

インライン要素の装飾と強調表示

Bootstrap 5 では、<strong> や <em> などのインライン要素に対して、太字や斜体などのスタイルを適用することができます。また、<mark> タグを使用することで、テキストを強調表示することができます。

コードの表示とブロック引用

Bootstrap 5 では、コードスニペットを表示するための要素も用意されています。

インラインコード: <code> タグを使用して、コードをインラインで表示します。
コードブロック: <pre> タグを使用して、複数行のコードブロックを表示します。
ブロック引用: <blockquote> タグを使用して、引用文を表示します。

テーブル

Bootstrap 5 は、HTML のテーブルに対して、様々なスタイルや機能を追加するクラスを提供しており、見やすく洗練されたテーブルを作成できます。

基本的なテーブルのマークアップ

Bootstrap 5 でテーブルを作成するには、.table クラスをテーブル要素に適用します。

<table class="table">
  <thead>
    <tr>
      <th>見出し1</th>
      <th>見出し2</th>
      <th>見出し3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>データ1</td>
      <td>データ2</td>
      <td>データ3</td>
    </tr>
  </tbody>
</table>

ストライプ、ボーダー、ホバー効果の追加

Bootstrap 5 では、テーブルにストライプ、ボーダー、ホバー効果などを追加するクラスが用意されています。

ストライプ: .table-striped クラスは、テーブルに行ごとにストライプを適用します。
ボーダー: .table-bordered クラスは、テーブルにボーダーを適用します。
ホバー効果: .table-hover クラスは、テーブルの行にホバー効果を適用します。

レスポンシブテーブルの実装

Bootstrap 5 では、レスポンシブテーブルを実装するためのクラスも用意されています。.table-responsive クラスをテーブル要素を囲む要素に適用することで、テーブルが小さい画面サイズでもスクロールできるようにすることができます。

フォーム

Bootstrap 5 は、HTML のフォームに対して、様々なスタイルや機能を追加するクラスを提供しており、ユーザーフレンドリーで美しいフォームを簡単に作成できます。

様々なフォームコントロール

Bootstrap 5 は、テキストフィールド、パスワードフィールド、セレクトボックス、チェックボックス、ラジオボタン、ファイルアップロード、テキストエリアなど、様々なフォームコントロールに対して、統一されたスタイルを提供しています。これらのコントロールは、Bootstrap 5 のクラスを適用することで、簡単にスタイリングできます。

フォームのレイアウトとバリデーション

Bootstrap 5 では、フォームのレイアウトを調整するためのクラスも用意されています。例えば、.form-inline クラスは、フォームコントロールをインラインで配置します。.form-group クラスは、フォームコントロールとラベルをグループ化します。また、Bootstrap 5 は、HTML5 のフォームバリデーション機能をサポートしており、バリデーションエラーなどを表示するためのスタイルも提供しています。

カスタムフォームコントロール

Bootstrap 5 では、カスタムチェックボックスやカスタムラジオボタンを作成するためのクラスも用意されています。これらのクラスを使用することで、デフォルトのチェックボックスやラジオボタンのスタイルを変更することができます。

4. 再利用可能なコンポーネント

Bootstrap 5 は、Web サイトでよく使われる UI 要素をコンポーネントとして提供しています。ボタン、ナビゲーション、アラート、モーダルなど、多くのコンポーネントがあらかじめ用意されており、HTML、CSS、JavaScript を組み合わせることで、簡単に実装できます。

ボタン

Bootstrap 5 では、様々なスタイルやサイズのボタンを簡単に作成できます。

ボタンのスタイルとサイズ

Bootstrap 5 のボタンは、.btn クラスと、ボタンのスタイルを指定するクラスを組み合わせて使用します。例えば、プライマリボタンを作成するには、.btn クラスと .btn-primary クラスを組み合わせて使用します。ボタンのサイズを変更するには、.btn-sm、.btn-lg などのクラスを使用します。

ボタンの状態 (アクティブ、無効)

Bootstrap 5 では、ボタンの状態 (アクティブ、無効) を表現するためのクラスも用意されています。例えば、.active クラスは、アクティブなボタンを表します。.disabled クラスは、無効なボタンを表します。

ボタンのグループ

.btn-group クラスを使用することで、複数のボタンをグループ化することができます。

Bootstrap 5 では、ナビゲーションバーのスタイルや配置を調整するためのクラスが用意されています。例えば、.navbar-light クラスは、明るい色のナビゲーションバーを作成します。.navbar-expand-lg クラスは、画面サイズが「lg」以上の場合はナビゲーションバーを水平方向に展開します。

ドロップダウンメニュー

Bootstrap 5 では、ドロップダウンメニューを作成することもできます。ドロップダウンメニューは、.dropdown クラスを使用して作成します。

アラート

アラートは、ユーザーに重要な情報を通知するための要素です。Bootstrap 5 では、.alert クラスを使用してアラートを作成します。

アラートの表示と非表示

Bootstrap 5 のアラートは、デフォルトでは表示されています。JavaScript を使用することで、アラートの表示と非表示を切り替えることができます。

アラートのスタイルと種類

Bootstrap 5 では、アラートのスタイルと種類を指定するためのクラスが用意されています。例えば、.alert-success クラスは、成功メッセージのアラートを作成します。.alert-danger クラスは、エラーメッセージのアラートを作成します。

アラートの閉じるボタン

Bootstrap 5 のアラートには、デフォルトで閉じるボタンが表示されます。閉じるボタンをクリックすると、アラートが非表示になります。

モーダル

モーダルは、ユーザーの操作を妨げることなく、重要な情報を表示するためのダイアログボックスです。Bootstrap 5 では、.modal クラスを使用してモーダルを作成します。

モーダルの構造と表示方法

Bootstrap 5 のモーダルは、.modal、.modal-dialog、.modal-content などの要素で構成されます。モーダルを表示するには、JavaScript を使用します。

モーダルのスタイルとオプション

Bootstrap 5 では、モーダルのスタイルやオプションを調整するためのクラスが用意されています。例えば、.modal-lg クラスは、大きなモーダルを作成します。.fade クラスは、モーダルにフェードイン/フェードアウトのアニメーションを追加します。

モーダルのイベント処理

Bootstrap 5 のモーダルは、モーダルの表示、表示後、非表示、非表示後などのイベントを処理することができます。

その他

Bootstrap 5 には、上記以外にも様々なコンポーネントが用意されています。カルーセル、ドロップダウン、プログレスバー、ツールチップ、ポップオーバーなどがあります。

5. JavaScript との連携

Bootstrap 5 では、jQuery から Vanilla JavaScript への移行が行われましたが、引き続き JavaScript を使用してコンポーネントの操作やイベント処理を行うことができます。

jQuery から JavaScript へ

Bootstrap 5 からは、jQuery が廃止され、JavaScript のみで動作するようになりました。これにより、フレームワークが軽量化され、パフォーマンスが向上しています。

Bootstrap 5 での jQuery の廃止と JavaScript の利用

Bootstrap 5 では、jQuery を使用せずに、JavaScript のネイティブ API や Bootstrap 5 が提供する JavaScript プラグインを使用してコンポーネントを操作します。

JavaScript を利用したコンポーネントの操作

例えば、モーダルを表示するには、以下のように JavaScript を記述します。

const myModal = document.getElementById('myModal');
const modal = new bootstrap.Modal(myModal);
modal.show();

イベント

Bootstrap 5 のコンポーネントは、様々なイベントを発生させます。例えば、モーダルが表示されたときに発生する shown.bs.modal イベント、モーダルが非表示になったときに発生する hidden.bs.modal イベントなどがあります。

Bootstrap コンポーネントで発生するイベント

Bootstrap 5 のコンポーネントで発生するイベントについては、Bootstrap 5 の公式ドキュメントを参照してください。

イベントハンドラの登録と処理

Bootstrap 5 のコンポーネントで発生するイベントを処理するには、イベントハンドラを登録します。イベントハンドラは、addEventListener() メソッドを使用して登録します。

myModal.addEventListener('shown.bs.modal', () => {
  // モーダルが表示されたときの処理
});

データ API

データ API は、HTML 要素に特定の data 属性を設定することで、JavaScript を記述せずに Bootstrap 5 のコンポーネントを操作するための仕組みです。

JavaScript を記述せずにコンポーネントを操作

例えば、モーダルを表示するには、モーダルのトリガーとなる要素に data-bs-toggle="modal" 属性と data-bs-target="#myModal" 属性を設定します。

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  モーダルを表示
</button>

カスタム JavaScript

Bootstrap 5 の機能を拡張するには、カスタム JavaScript を記述します。

Bootstrap 5 の機能を拡張する方法

Bootstrap 5 の機能を拡張するには、Bootstrap 5 の JavaScript プラグインを継承した独自のプラグインを作成します。

独自のプラグインを作成

独自のプラグインを作成する方法については、Bootstrap 5 の公式ドキュメントを参照してください。

6. Bootstrap 5 のカスタマイズ

Bootstrap 5 は、Sass を使用して構築されているため、Sass を使用することで、簡単にカスタマイズすることができます。

Sass の活用

Sass は、CSS のメタ言語であり、変数、関数、ミックスインなどの機能を使用して、より効率的に CSS を記述することができます。Bootstrap 5 は、Sass を使用して構築されているため、Sass を使用することで、Bootstrap 5 を簡単にカスタマイズすることができます。

Bootstrap 5 のカスタマイズ方法

Bootstrap 5 をカスタマイズするには、Bootstrap 5 の Sass ファイルを編集します。Bootstrap 5 の Sass ファイルは、npm または yarn を使用してインストールすることができます。

変数とミックスインの利用

Bootstrap 5 の Sass ファイルには、様々な変数やミックスインが定義されています。変数を変更することで、Bootstrap 5 のデフォルトのスタイルを変更することができます。ミックスインを使用することで、Bootstrap 5 のスタイルを簡単に適用することができます。

テーマの作成

Bootstrap 5 をベースにした独自のテーマを作成することもできます。

独自の Bootstrap 5 テーマを作成

独自の Bootstrap 5 テーマを作成するには、Bootstrap 5 の Sass ファイルを複製して、変数やミックスインを編集します。作成したテーマは、CSS ファイルとして出力することができます。

便利なツール

Bootstrap 5 をカスタマイズする際に便利なツールを紹介します。

Bootstrap Studio

Bootstrap Studio は、Bootstrap を使用した Web サイトを視覚的に構築するためのツールです。ドラッグ & ドロップで要素を配置したり、スタイルを調整したりすることができます。

7. Bootstrap 5 活用事例

Bootstrap 5 は、様々な Web サイトや Web アプリケーションで使用されています。

Web サイト

企業サイト
ポートフォリオサイト
ランディングページ

Web アプリケーション

ダッシュボード
管理画面

8. 参考文献

Q&A

Q1: Bootstrap 4 と Bootstrap 5 の違いは何ですか？

A1: Bootstrap 5 では、jQuery の廃止、RTL サポートの強化、新しいコンポーネントの追加、ユーティリティクラスの拡充など、Bootstrap 4 から多くの変更が加えられています。詳細については、Bootstrap 5 の公式ドキュメントを参照してください。

Q2: Bootstrap 5 を使用する際に jQuery は必要ですか？

A2: いいえ、Bootstrap 5 は jQuery なしで動作します。Bootstrap 5 は、jQuery への依存関係を完全に排除しました。

Q3: Bootstrap 5 の最新情報はどのように入手できますか？

A3: Bootstrap 5 の最新情報は、Bootstrap の公式ブログや Twitter アカウントで入手できます。また、GitHub のリポジトリをウォッチすることで、最新の開発状況を追跡することもできます。