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/
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 ファイルを使用してカスタマイズできます。