Bootstrap5 インストールして使用する

Bootstrap5 インストールと使用

この記事では、Bootstrap5 フレームワークをプロジェクトにインストールして使用する方法について、複数のインストール方法と使用方法を含めて詳しく説明します。

---

1. CDN を利用する

CDN を利用する場合、HTML ファイルの <head> タグ内に以下のコードを追加します。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

最初の <link> タグは Bootstrap 5 の CSS を読み込むためのものです。
2番目の <script> タグは Bootstrap 5 の JavaScript を読み込むためのものです。この中には Popper.js も含まれているため、別途読み込む必要はありません。
integrity 属性はファイルの整合性を検証するためのものです。

2. ファイルをダウンロードして導入する

Bootstrap 5 の公式サイト（https://getbootstrap.com/）にアクセスし、"Download" ボタンをクリックしてファイルをダウンロードします。
ダウンロードした圧縮ファイルを解凍します。
解凍したフォルダ内の css フォルダと js フォルダをプロジェクトの適切な場所に配置します。
HTML ファイルの <head> タグ内に、配置した CSS ファイルへのパスを指定して読み込みます。

<link rel="stylesheet" href="css/bootstrap.min.css">

HTML ファイルの </body> タグの直前に、配置した JavaScript ファイルへのパスを指定して読み込みます。

<script src="js/bootstrap.bundle.min.js"></script>

例: css フォルダと js フォルダをプロジェクトのルートディレクトリに配置した場合

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Bootstrap example</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Bootstrap 5 を使い始める

Bootstrap 5 を導入したら、HTML ファイルの基本構造を作成し、Bootstrap 5 のクラスやコンポーネントを使用してWebページを作成していきます。

HTML ページの基本構造

Bootstrap 5 を使用するには、HTML5 のセマンティックタグを使用し、viewport メタタグを設定する必要があります。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Bootstrap example</title>
  </head>
  <body>
    <script src="js/bootstrap.bundle.min.js"></script>
  </body>
</html>

viewport メタタグは、モバイルデバイスでWebページを正しく表示するために設定します。

Bootstrap 5 の定義済みスタイルを使用する

Bootstrap 5 には、グリッドシステム、タイポグラフィ、ボタン、フォームなど、多くの定義済みスタイルが用意されています。

グリッドシステム

Bootstrap 5 のグリッドシステムは、12 列のグリッドシステムです。container、row、col-* クラスを使用して、レスポンシブなレイアウトを作成できます。

<div class="container">
  <div class="row">
    <div class="col-md-6">左側のコンテンツ</div>
    <div class="col-md-6">右側のコンテンツ</div>
  </div>
</div>

タイポグラフィ

Bootstrap 5 には、見出し、段落、リストなど、様々なタイポグラフィスタイルが用意されています。

<h1>見出し1</h1>
<p>段落テキストです。</p>
<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>

ボタン

Bootstrap 5 には、様々なボタンスタイルが用意されています。

<button type="button" class="btn btn-primary">プライマリボタン</button>
<button type="button" class="btn btn-secondary">セカンダリボタン</button>
<button type="button" class="btn btn-success">成功ボタン</button>

フォーム

Bootstrap 5 には、様々なフォームコントロールやフォームレイアウトが用意されています。

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">メールアドレス</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">メールアドレスは公開されません。</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">パスワード</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

Bootstrap 5 のスタイルをカスタマイズする

Bootstrap 5 のスタイルは、Sass 変数やカスタム CSS ファイルを使用してカスタマイズできます。

Sass 変数

Bootstrap 5 は、Sass 変数を使用してスタイルを定義しています。これらの変数を変更することで、Bootstrap 5 のデフォルトスタイルをカスタマイズできます。

カスタム CSS ファイル

Bootstrap 5 のスタイルを上書きするには、カスタム CSS ファイルを作成し、HTML ファイルに読み込みます。

<link rel="stylesheet" href="css/custom.css">

Bootstrap 5 リソース

公式ドキュメント: https://getbootstrap.com/
テーマテンプレート: https://bootswatch.com/
学習リソース: https://www.udemy.com/topic/bootstrap/

Bootstrap 5 に関する Q&A

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

A1: Bootstrap 5 では、jQuery への依存関係が廃止され、JavaScript の機能が強化されています。また、グリッドシステムやユーティリティクラスなど、多くの点が改善されています。

Q2: Bootstrap 5 を使用するメリットは何ですか？

A2: Bootstrap 5 を使用すると、レスポンシブなWebページを簡単に作成できます。また、多くの定義済みスタイルやコンポーネントが用意されているため、開発時間を短縮できます。

Q3: Bootstrap 5 のスタイルをカスタマイズできますか？

A3: はい、Bootstrap 5 のスタイルは、Sass 変数やカスタム CSS ファイルを使用してカスタマイズできます。