04基本的なコンポーネント
ここではBootstrapの基本的なコンポーネントについて解説していきます。
各コンポーネントごとに新しくファイルを作成し、実際に手を動かしながら学んでいきましょう。
ファイルのひな型は以下です。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<!-- ここにサンプルコードを記載 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>アコーディオン
まずは先ほども紹介した「アコーディオンメニュー」です。
アコーディオンメニューは、ウェブサイトやアプリケーションにおいて、コンテンツをコンパクトに表示し、
ユーザーが必要に応じて情報を展開できるようにするための便利なUI（ユーザーインターフェイス）コンポーネントです。
Webサイト等では「よくある質問」などで使われることが多いUIコンポーネントになります。
【サンプルコード】
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse
plugin adds the appropriate classes that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse
plugin adds the appropriate classes that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse
plugin adds the appropriate classes that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
上記の画像のように表示されていたら成功です。
バッジ
Badges（バッヂ）は、数値やテキスト情報を小さなラベルとして表示するためのUIコンポーネントです。
Webサイト等では、アイテムの数を示したり、追加情報（例えば、新しい通知の数や未読メッセージの数など）を視覚的に強調するために使用されます。
【サンプルコード】
対象の要素に対してタグを使い、badgeクラスと、背景色を指定するためのbg-クラス（には色を表すキーワードが入ります）を追加します。
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>画面を見てみると以下のようになっていると思います。
いろんなバッチが表示されていますね。
クラス名を２つけるだけで簡単に実装することができます。
Bootsrtapでは「primary」や「secondary」などのクラス名が多く出現します。
クラス名によって色がわかってくるので覚えておくか、表をすぐに見られるようにしておくと便利です。
| クラス名 | 色 | 用途 |
| primary | 青色 | 決定や成功を伝えたいとき |
| secondary | 灰色 | キャンセルや追加情報を伝えたいとき |
| success | 緑色 | 成功を伝えたいとき |
| danger | 赤色 | 失敗や警告、危険を伝いたいとき |
| warning | 黄色 | 注意を促したいとき |
| info | 水色 | 情報を示したいとき |
| light | 明るい灰色 | 軽いアクションを伝えたいとき |
| dark | 黒色 | エレガントやモダンな印象を与えたいとき |
【応用】
バッジを用いることでよく見る通知のアイコンのようなコンポーネントを作成することができます。
以下のコードをコピペして画面を確認してみましょう。
<button type="button" class="btn btn-primary position-relative">
通知
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">通知</span>
</span>
</button>以下のような画像になっていたらOKです。
ほかのBootstrapの機能などと組み合わせるとより複雑なデザインも作成することができます。
コードを少し編集して試しながら進めていきましょう。
ボタン
ボタンは皆さんがよくWebサイトで見かける、クリックやタップすることで特定のアクションを実行できるUIコンポーネントです。
よく用いられるコンポーネントなので扱えるようにしましょう。
ボタンはbtnクラスと、背景色を指定するbtn-*のクラスを付与することにより使用することができます。
【サンプルコード】
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>画面を見てみると以下のようになっていると思います。
いろんなボタンが表示されていますね。
ボタンは画像のようなデザインだけでなく、アウトラインボタンのデザインやボタンの大きさを変更したりすることができます。
【アウトラインデザインサンプルコード】
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
アウトラインデザインの場合はbtnクラスと、アウトラインの色を指定するためのbtn-outline-*クラスを付与することによって使用することができます。
【サイズ変更のサンプルコード】
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
サイズ変更の場合、btnクラスとbtn-*クラスを指定することで使用することができます。
| クラス名 | 大きさ(px)※あくまでも目安 | 備考 |
| btn-lg | 約 46px | ボタンの縦幅が大きくなり、フォントサイズも若干大きくなります |
| btn-sm | 約 30px | ボタンの縦幅が小さくなり、フォントサイズも若干小さくなります |
| デフォルト | 約 38px | ボタンにサイズ指定のクラスを追加しない場合の標準サイズ |
カード
続いてカードについてです。
カードは、柔軟なコンテナとして設計されたコンポーネントで、画像、テキスト、リンクなどのコンテンツを美しく表示するために使用されますUIコンポーネントです。
ウェブページ上での製品の紹介、ユーザープロフィール、ブログ投稿など、さまざまな用途に応じてカスタマイズできるので非常に便利です。
【サンプルコード】
<div class="card" style="width: 18rem;">
<img src="https://placehold.jp/280x180.png" class="card-img-top" alt="ダミー画像">
<div class="card-body">
<h5 class="card-title">カードタイトル</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">もっと見る</a>
</div>
</div>コードをコピペしてブラウザで確認すると、以下の画像のようなカードスタイルデザインが表示されるはずです。
※「placehold.jp」という簡単にダミー画像を作成してくれるサイトで生成した画像を使用しております。
card-bodyやcard-titleなどのクラスを付与することによって使用することができます。
コンポーネントの説明
| クラス名 | 解説 |
| card | カードコンポーネントのコンテナとなるクラス。 |
| card-img-top | カードの上部に画像を配置するためのクラス。<img>タグにこのクラスを適用します。 |
| card-body | カードの内容（テキストやボタンなど）を囲むためのコンテナ。 |
| card-title | カードのタイトルに使用されるテキスト。通常は<h5>タグなどの見出しタグに適用されます。 |
| card-text | カードの本文や説明文に使用されるテキスト。パラグラフ(<p>)タグに適用します。 |
| list-group | カード内でリストを使用するためのクラス。<ul>または<div>で表されます。 |
| list-group-item | カード内でリストを使用するためのクラス。<li>または<div>で表されます。 |
| card-footer | カードの最下部に配置するためのクラス。 |
【応用】
<div class="card" style="width: 18rem;">
<img src="https://placehold.jp/280x180.png" class="card-img-top" alt="ダミー画像">
<div class="card-body">
<h5 class="card-title">カードタイトル</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">アイテム１</li>
<li class="list-group-item">アイテム２</li>
<li class="list-group-item">アイテム３</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">リンクテキスト１</a>
<a href="#" class="card-link">リンクテキスト２</a>
</div>
</div>list-groupやlist-group-itemを用いることによってさらに複雑なカードスタイルを作成することもできます。
カルーセル
カルーセル（Carousel）は、スライダー形式でコンテンツを表示するためのUIコンポーネントです。
画像、テキスト、その他のカスタムコンテンツを含む複数のスライドを順番に表示することや自動的に切り替わるように設定することもでき、
ユーザーが手動で切り替えることも可能です。ウェブサイトのヘッダー部分で特集記事や製品を紹介するのによく使用されます。
【サンプルコード】
※<img>のsrcに画像を追加してください
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>画像ではかなり見にくいですが、画面左右中央にある矢印をクリックすると画像がスライドさせることができます。
carousel-itemクラス内にactiveクラスがありますが、このactiveクラスの場所を変えることで最初に表示する画像を変更することができます。
付け替えたり、文字を編集するなどしてどこがどう変わるのか確認しながら進めていくと、より一層理解することができます。
ドロップダウン
ドロップダウンは、クリックまたはホバーすることで表示される隠れたメニュー項目を提供するUIコンポーネントです。
ユーザーが利用可能な追加オプションを選択できるようにするために使用され、ナビゲーションバー、アクションリスト、その他の多くの用途に適しています。
【サンプルコード】
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
選択してください
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">その１</a></li>
<li><a class="dropdown-item" href="#">その２</a></li>
<li><a class="dropdown-item" href="#">その３</a></li>
</ul>
</div>問い合わせフォームなどでよく見るドロップダウンメニューが簡単に表示できました。
ドロップダウンメニューの基本構造
| 要素/属性 | クラス名/属性値 | 説明 |
| ドロップダウントリガー | .dropdown-toggle | ドロップダウンメニューを開くためのトリガー（ボタンやリンク）にこのクラスを使用します。 |
data-bs-toggle="dropdown" | ドロップダウン機能を有効にするためにこのデータ属性をトリガー要素に追加します。 | |
| ドロップダウンメニュー | .dropdown-menu | ドロップダウンで表示されるメニュー項目を含むコンテナにこのクラスを使用します。 |
| ドロップダウンアイテム | .dropdown-item | ドロップダウンメニュー内の各選択肢にこのクラスを使用します。 |
| ドロップダウンディビジョン | .dropdown-divider | メニュー内の項目を区切るために使用する水平線にこのクラスを使用します。 |
| ドロップダウンヘッダー | .dropdown-header | ドロップダウンメニュー内でセクションのヘッダーとして使用されるテキストにこのクラスを使用します。 |
| アクティブなドロップダウンアイテム | .active | 選択されている、または現在のアクティブなドロップダウンアイテムにこのクラスを使用します。 |
| ドロップダウンメニューの位置調整 | .dropdown-menu-end | ドロップダウンメニューをトリガー要素の右端に揃えるために使用します（左揃えがデフォルト）。 |
| ドロップダウンの無効化 | .disabled | ドロップダウンアイテムを無効化し、インタラクションできなくするためにこのクラスを使用します。 |
また、ドロップダウンメニューの色も変更することもできます。
buttonタグのクラス名にbtnとbtn-*(btn-dangerなど)を指定することでカラフルなボタンを作成できます。
さらに、下向きにメニューを出すだけでなく、左向きや上向きにもメニューを出すことができます。
<!-- Default dropstart button -->
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropstart button -->
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropstart</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
<button type="button" class="btn btn-secondary">
Split dropstart
</button>
</div>親要素のdivタグにdropstartクラスを付与することで左側に表示することができます。
リストグループ
リストグループは、一覧表示するためのUIコンポーネントです。
リストグループを使うことで、テキストのリスト、リンクのリスト、ボタンのリストなどを綺麗に整理して表示することができます。
Webサイトでは、コンテンツの一覧表示やメニュー、ナビゲーションパネルなどに利用されます。
【サンプルコード】
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>簡単にリストスタイルが作成できました。
サンプルコードにaタグを追加することでメニューのように、特定のURLに遷移できるリストグループが作成できます。
<div class="list-group">
<a href="https://www.pro-demia.com/" class="list-group-item list-group-item-action active" aria-current="true">
プロデミア
</a>
<a href="https://my-page.pro-demia.com/curriculum/show/1" class="list-group-item list-group-item-action">Lesson1
事前準備</a>
<a href="https://my-page.pro-demia.com/curriculum/show/2" class="list-group-item list-group-item-action">Lesson2
HTML</a>
<a href="https://my-page.pro-demia.com/curriculum/show/3" class="list-group-item list-group-item-action">Lesson3
CSS</a>
</div>上記のようにコードを編集してみましょう。
保存してブラウザを再表示すると、以下の画像のように表示されるはずです。
「Lesson2 HTML」などのリストをクリックすると、Lesson２ HTML教材ページに遷移するはずです。
このように、aタグを追加し、適切なURLとリストのタイトルを設定することで簡単にWebサイトのナビゲーションメニューを作成することができます。
リストグループを使用するときに必要なクラスについて解説します。
| クラス名 | 説明 |
| .list-group | 親クラスに指定することで、リストグループを使うことを宣言します。 |
| .list-group-item | 各リスト項目に付与します。 |
| .list-group-item-action | 付与することで、リンクやボタンとして機能するリスト項目を作成することができます。 |
| .active | 付与することで、選択状態のリストを表現することができます。 |
| .disabled | 付与することで、無効化状態を表現することができます。 |
| .list-group-flush | 付与することで、項目間の境界線を非表示にすることができます。 |
| .list-group-horizontal | リストを縦ではなく、横並びにさせたいときに使用します。 |
| .list-group-numbered | リストに項目番号を使用したいときに指定します。 |
【応用】
「list-group-horizontal」と「list-group-flush」をもちいて横並びのチェックボックスを作成する方法をご紹介します。
<ul class="list-group list-group-horizontal">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
<label class="form-check-label stretched-link" for="firstCheckboxStretched">checkbox その１</label>
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
<label class="form-check-label stretched-link" for="secondCheckboxStretched">checkbox その２</label>
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
<label class="form-check-label stretched-link" for="thirdCheckboxStretched">checkbox その３</label>
</li>
</ul>以下の画像のように横並びのチェックぼっくが表示されます。
このように、ナビゲーションメニューだけでなく、お問い合わせフォームの入力欄のようなUIも作成することができます。
モーダル
モーダルとはポップアップウインドの一種でユーザーが特定のアクションを行うための情報やフォーム、メッセージなどを表示するために使用されるUIコンポーネントです。
Webサイトでは、画面の前面に表示され、背景のコンテンツは暗く表示されます。
また、一時的に暗く表示されている部分の操作ができなくなります。
【サンプルコード】
<!-- モーダル表示ボタン -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
モーダルを開く
</button>
<!-- モーダル -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">モーダルのタイトル</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
モーダルの中身<br>
Webアプリケーションでのモーダルは注意分を入れたり、<br>ちょっとした情報の保存・削除などを行う時に利用されます。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
<button type="button" class="btn btn-primary">保存する</button>
</div>
</div>
</div>
</div>画面を再度読み込むと、「モーダルを開く」ボタンが表示されるはずです。
「モーダルを開く」ボタンをクリックしてみましょう。
以下画像のようにモーダルが表示されるはずです。
モーダルはWebアプリケーションを作成するときに利用頻度が高いUIコンポーネントになります。
この後のカスタマイズ方法や使い方をしっかりと理解しておきましょう。
モーダルのクラスについて説明します。
| クラス名 | 説明 |
| .modal | モーダルの基本クラス。モーダルにしたい親クラスに指定します。 |
| .modal-dialog | モーダルのコンテナに適用します。モーダルの幅とマージンを管理している。 |
| .modal-content | モーダルの内容を囲むために使用します。 モーダルの背景色、境界線、影などを管理しています。 |
| .modal-header | モーダルのヘッダー部分に使用します。 よくモーダルのタイトルと閉じるボタン（×）が配置されます。 |
| .modal-title | モーダルヘッダー内のタイトルに使用します。 |
| .modal-body | モーダルの本文に適用します。 モーダルのメインコンテンツ（テキスト、画像、フォームなど）部分を指します。 |
| .modal-footer | モーダルのフッター部分に使用します。 よくアクションボタンや閉じるボタンが配置されます。 |
| .modal-backdrop | モーダルが開いている間、背景を暗くするために自動的に追加されるクラスです。 |
| .fade | モーダル表示時にアニメーション効果（フェードイン、フェードアウト）を適用するためのクラスです。 |
| .show | モーダルを表示するために、.fadeクラスがある要素にJavaScriptによって動的に追加されます。 |
| .modal-sm, .modal-lg, .modal-xl | モーダルのサイズを小（sm）、大（lg）、さらに大（xl）に調整します。.modal-dialogに適用します。 |
【応用】
モーダル内にリンクを配置する
<!-- モーダル表示ボタン -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
モーダルを開く
</button>
<!-- モーダル -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">モーダルのタイトル</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h2 class="fs-5">プロデミア</h2>
<p><a href="https://www.pro-demia.com/" data-bs-toggle="tooltip" title="Tooltip">プロデミアWebサイト</a>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
<button type="button" class="btn btn-primary">保存する</button>
</div>
</div>
</div>
</div>サンプルコードをコピペして画面を再度読み込んでみましょう。
以下の画像のようにモーダル内に、リンクが表示されるはずです。
リンクをクリックするとプロデミアのWebサイトに遷移することができます。
２．モーダルでフォームを作成する
Webサイトでもよく見かけるお問い合わせをモーダルで作成することもできます。
より実践的な使い方です。
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"
data-bs-whatever="@fat">モーダルを開く
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">お問い合わせ</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="name" class="col-form-label">お名前:</label>
<input type="text" class="form-control" id="name">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">問い合わせ内容:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">キャンセル</button>
<button type="button" class="btn btn-primary">送信する</button>
</div>
</div>
</div>
</div>サンプルコードをコピペして画面を再度読み込んでみましょう。
以下の画像のようにモーダル内に、問い合わせフォームが表示されるはずです。
実際に送信はできませんが、画面のデザインまでは簡単に作成することができます。
３．複数のモーダルを作成する
Webアプリケーションではモーダルを２枚以上表示させる必要がある場合があります。
２枚以上のモーダルになってもBootstrapでは簡単に作成することができます。
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel"
tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalToggleLabel">１枚目のモーダル</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
１つ目のモーダルの中身です。
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">
２枚目のモーダルへ
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2"
tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalToggleLabel2">２枚目のモーダル</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
２つ目のモーダルの中身です。
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">
１枚目のモーダルへ
</button>
</div>
</div>
</div>
</div>サンプルコードをコピペして画面を再度読み込んでみましょう。
以下の画像のように１枚目のモーダルに「２枚目のモーダルへ」ボタンが表示されています。
「２枚目のボタンへ」ボタンをクリックすると２枚目のモーダルを表示させることができます。
ナビバー
ナビバー（Navbar）は、WebサイトやWebアプリケーションのナビゲーション(ヘッダーメニュー)を利用するためのUIコンポーネントです。
ナビバーはWebページの最上部に配置され、サイトのロゴ、メニュー、フォームなどを表示させることが多いです。
【サンプルコード】
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">プロデミア</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">トップ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">コース</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">金額</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Cloud9</a>
</li>
</ul>
</div>
</div>
</nav>サンプルコードをコピペして画面を再度読み込んでみましょう。
画面上部にヘッダーメニューが表示されています。
ナビバーのクラスについて解説します。
| クラス名 | 説明 |
| .navbar | ナビバーの基本クラスになります。親要素のnavタグに指定します。 |
| .navbar-brand | ナビバー内のタイトルやロゴ部分に指定します。 |
| .navbar-nav | ナビゲーションリンクのリストに指定します。 |
| .nav-item | 個々のナビゲーション項目に指定します。通常、.navbar-navの子要素として使います。 |
| .nav-link | ナビゲーションリンクに指定します。.nav-itemの子要素として使います。 |
| .navbar-toggler | モバイルデバイスでナビバーを折りたたむためのボタンに指定します。 |
| .navbar-toggler-icon | ナビバーの折りたたみボタン内のアイコンに指定します。 ハンバーガーアイコンを表示するために使います。 |
【応用】
ドロップダウンメニュー
ドロップダウンメニューはメニュー名の中にさらに細かいメニューを表示させたい場合に用いられます。
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">プロデミア</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">トップ</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
コース
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">エンジニアコース</a></li>
<li><a class="dropdown-item" href="#">デザイナーコース</a></li>
<li><a class="dropdown-item" href="#">マーケティングコース</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">金額</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Cloud9</a>
</li>
</ul>
</div>
</div>
</nav>サンプルコードをコピペして画面を再度読み込んでみましょう。
画面上部にヘッダーメニューが表示されています。
ヘッダーメニューのコースをクリックしましょう。
以下の画像のように３つの詳細が表示されます。
これがドロップダウンメニューです。
メニュー数が多いWebサイトやWebアプリケーションでよく用いられます。
以上が基本的なコンポーネントの解説でした！
公式サイトにはまだまだたくさんのコンポーネントがありますのでぜひ見てみてください。
コメントを残す