1.Bootstrapのコンポーネント
Bootstrapのコンポーネントは、Webページに様々な機能を追加するための要素やモジュールを提供します。
全てのコンポーネントはカスタマイズ可能で、プロジェクトのニーズに合わせて調整することができます。また、HTML、CSS、そしてJavaScriptによって構成されているため、Bootstrapの全体的なデザインテーマと一貫性を保ちつつ、独自のスタイルや動作を追加することもできます。
1.1 テーブルを扱う
今回、当面のゴールとしている自動車販売のWebサイトでも上部でテーブルを使っています。
以下の01-table-original.html(link)のような単純なテーブルをBootStrapを使って装飾してみましょう。
<table>
<thead>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th>3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
上記の単純なテーブルがBootStrapを適用すると以下のように変化します。
<ソースコード>
<table class="table">
<!-- ① -->
<thead>
<!-- ② thead要素はテーブルのヘッダー行グループを示します。-->
<tr>
<!-- ③ tr要素はテーブルの行を示します。 -->
<th scope="col">#</th><!-- ④ th要素はテーブルのヘッダーセルを示します。
scope="col"はこのヘッダーセルが列のヘッダーであることを示します。 -->
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<!-- ⑤ tbody要素はテーブルのボディ行グループを示します。 -->
<tr>
<th scope="row">1</th>
<!-- ⑥ th要素はテーブルのヘッダーセルを示します。
今回はscope="row"が付与されていて、このヘッダーセルが行のヘッダーであることを示します。 -->
<td>Mark</td><!-- ⑦ td要素はテーブルのデータセルを示します。 -->
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<!-- ③ tr要素はテーブルの行を示します。 -->
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<!-- ③ tr要素はテーブルの行を示します。 -->
<th scope="row">3</th>
<!-- ⑧ td要素にcolspan="2"が付与されています。
これはこのデータセルが2列に跨ることを示します。 -->
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<解説>
①「class="table"」とするだけでBootStrapのテーブルになります。この例のようにBootStrap特有のクラスを指定することで通常のHTMLの要素にBootStrapのデザインを適用することができます。他のテーブルのスタイルについてはリンクをご覧ください。
例題
リンクのようなマウスポインタに反応して列がグレーになるテーブルをBootstrapを使い作成しなさい。
1.2 ナビゲーションバーを扱う
ナビゲーションバーとはメニューバーのことです。サンプル03-navbar.html(link)をご覧ください。
かなり複雑なコードになりますのでBootstrapのclassについてのコメントを加えました。


<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
<!-- Bootstrapのnavbarクラスを用いてナビゲーションバーを作成します。
navbar-expand-lgは画面がlgサイズより大きい時にナビゲーションバーを展開します。
navbar-darkとbg-darkはナビゲーションバーのテーマ色を暗く設定します。
mb-4はマージンボトムを設定します。-->
<div class="container-fluid">
<!-- container-fluidは、Bootstrapのクラスで、全画面幅を利用するコンテナを作成します。 -->
<a class="navbar-brand" href="#">Kaeru</a>
<!-- ①navbar-brandクラスを使用してブランドロゴを作成します。"Kaeru"がブランド名です。 -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<!-- ②navbar-togglerクラスを使用して、画面サイズが小さい場合に表示されるハンバーガーメニューの
トグルボタンを作成します。
このボタンは、クリックすると"navbarSupportedContent"というIDのdiv要素の表示を切り替えます。 -->
<span class="navbar-toggler-icon"></span>
<!-- このspan要素は、トグルボタンのアイコン(通常はハンバーガーアイコン)を表示します。 -->
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- このdiv要素は、navbar-togglerボタンによって表示の切り替えが行われる領域を示しています。 -->
<ul class="navbar-nav d-flex justify-content-between mb-2 mb-lg-0">
<!-- このul要素は、ナビゲーションバーの各項目をリストとして格納します。
d-flexクラスを使用してフレックスボックスを作成し、justify-content-betweenでアイテムを均等に配置します。 -->
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">新車</a>
<!-- ③これは"新車"というリンクを含むナビゲーションバーの項目です。
activeクラスが追加されているため、現在このページが選択されていることを示しています。 -->
</li>
<li class="nav-item">
<a class="nav-link" href="#">中古車</a>
<!-- ④これは"中古車"というリンクを含むナビゲーションバーの項目です。 -->
</li>
<li class="nav-item dropdown">
<!-- ⑤このli要素は、"サービス"というドロップダウンメニューを含むナビゲーションバーの項目です。 -->
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
サービス
</a>
<!-- このリンクをクリックすると、ドロップダウンメニューが展開します。 -->
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<!-- ⑥これが上記の"サービス"リンクをクリックした際に表示されるドロップダウンメニューです。 -->
<li><a class="dropdown-item" href="#">車検</a></li>
<li><a class="dropdown-item" href="#">点検</a></li>
<li>
<hr class="dropdown-divider">
<!-- ⑦dropdown-dividerクラスを持つ水平線(hr要素)で、ド
ロップダウンメニューの項目を分割します。 -->
</li>
<li><a class="dropdown-item" href="#">自動車保険</a></li>
<!-- ドロップダウンメニューの一項目、"自動車保険"のリンクです。 -->
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">ログイン</a>
<!-- ⑧これは"ログイン"というリンクを含むナビゲーションバーの項目ですが、
disabledクラスが付与されているため、現在使用できません。 -->
</li>
</ul>
</div>
</div>
</nav>
<!-- ナビゲーションバーの定義が終了 -->
<解説>
①「class="navbar"」を指定することでナビバーになります。「navbar-expand」はどのサイズの時にレスポンシブデザインに変更するかという指定です。「lg」「md」「sm」の3種類を抑えましょう。それぞれ、large,medium,smallの略でしたね。今回指定した「lg」は、992px以上のときは通常のデザイン、0〜991pxのときはレスポンシブデザインになります。(ハンバーガーメニューが出る)
「navbar-dark」「bg-dark」は色の指定です。bgはバックグラウンドの略です。「m-2」のmはマージンの意味で、ナビバーの外側の余白の幅を指定していましたね。幅の大きさは0~5の数字で指定しますので変更してナビバーの変化を見てください。
上記コメント以外のナビゲーションバーの解説についてはリンクをご覧ください。
例題
リンクのようなライトテーマのナビゲーションバーをBootstrapを使い作成しなさい。
1.3 フォームを扱う
以下の05-form-original.html(link)のような単純なフォームをBootStrapを使って装飾してみましょう。
<form>
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp">We'll never share your email with anyone else.</div>
</div>
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" id="exampleInputPassword1">
</div>
<div>
<input type="checkbox" id="exampleCheck1">
<label for="exampleCheck1">Check me out</label>
</div>
<button type="submit">Submit</button>
</form>
上記の単純なフォームがBootStrapを適用すると以下のform.html(link)のように変化します。
画像とコードに番号を振っています。

<form>
<!-- mb-3: 下向きのマージンを設定します。数値はマージンの大きさを表します。 -->
<div class="mb-3">
<!-- ①form-label: フォームのラベルにスタイリングを適用します。 -->
<label for="exampleInputEmail1" class="form-label">Email address</label>
<!-- ②form-control: フォーム要素にスタイリングを適用します。
ここではテキスト入力ボックスにスタイリングを適用しています。 -->
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<!-- ③form-text: フォームのヘルプテキストにスタイリングを適用します。
通常は、フォームフィールドの説明や指示に使用します。 -->
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<!-- form-label: フォームのラベルにスタイリングを適用します。 -->
<label for="exampleInputPassword1" class="form-label">Password</label>
<!-- form-control: フォーム要素にスタイリングを適用します。
ここではパスワード入力ボックスにスタイリングを適用しています。 -->
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<!-- ④mb-3: 上記と同様に下向きのマージンを設定します。
form-check: チェックボックスまたはラジオボタンとそのラベルに対するスタイリングを適用します。 -->
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<!-- ⑤btn: ボタンに対する基本的なスタイリングを適用します。
btn-primary: ボタンにプライマリー(通常は青色)の背景色を適用します。 -->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<解説>
②「form-control」は、フォーム部品に設定します。input、textarea、passwordなどのフォーム部品で利用します。大きさや色、レイアウトをいい感じに整えてくれます。
「aria-describedby」は、すぐ下のid属性「emailHelp」によって説明されるということを示しています。
⑤ボタンをprimaryに指定しています。その他のボタンを使いたい場合には次の「6.ボタンを扱う」を参照して下さい。
他のフォームの形式についてはリンクをご覧ください。
例題
リンクのようなdisabled属性を持つフォームをBootstrapを使い作成しなさい。
1.4 ボタンを扱う
Bootstrapにはきれいにデザインされたボタンが用意されています。
サンプル08-button.html(link)をご覧ください。
<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><!-- ② -->
<解説>
①「class="btn btn-xxxx"」と指定することでBootstrapのボタンになります。それぞれのボタンには以下のような色と意味があります。
btn-primary:主要なアクションに使用されます。深い青色の背景と白い文字色です。
btn-secondary:主要なアクション以外のものに使用します。灰色の背景と白い文字色です。
btn-success:成功または肯定的なアクションに対して使われます。緑色の背景と白い文字色です。
btn-danger:危険や否定的なアクションに対して使われます。赤色の背景と白い文字色です。
btn-warning:警告や注意が必要なアクションに対して使われます。黄色の背景と黒い文字色です。
btn-info:情報提供のためのアクションに対して使われます。薄い青色の背景と白い文字色です。
btn-light:明るいテーマのデザインに使われます。白色の背景と黒色の文字色です。
btn-dark:暗いテーマのデザインに使われます。黒色の背景と白色の文字色です。
また、ボタンのサイズもカスタマイズ可能です。btn-lg, btn-sm, btn-blockクラスを使用することで、大きなボタン、小さなボタン、ブロックレベルのボタンを作成することができます。
②リンクも一種のボタンとして指定可能です。
BootStrapのボタンのソースコードのリンクです。
1.5 カードを扱う
Bootstrapのカード【Card】は、様々な種類のコンテンツを含め、それを整理して表示するための柔軟なコンテナです。カードは、写真、テキスト、リンク、ドロップダウンメニューなど、様々な情報を含むことができます。
サンプル09-card.html(link)をご覧ください。
<div class="col">
<!-- Bootstrapのグリッドシステムを利用してコンテンツを配置します。"col"クラスは、利用可能な空間を等しく分割します。 -->
<div class="card">
<!-- "card"クラスは、Bootstrapのカードコンポーネントを示しています。
カードは、様々な種類の情報を整理して表示するための柔軟なコンテナです。 -->
<img src="img/sports.jpg" class="card-img-top" alt="car-name">
<!-- "card-img-top"クラスを持つimg要素は、カードの上部に画像を配置します。-->
<div class="card-body">
<!-- "card-body"クラスは、カードの主要なコンテンツ領域を表します。 -->
<h5 class="card-title">スーパーカー</h5>
<!-- "card-title"クラスは、カードのタイトルを定義します。-->
<p class="card-text">スピードと静寂、二つの世界が融合する</p>
<!-- "card-text"クラスは、カードのテキストコンテンツを定義します。この例では、説明文が設定されています。 -->
<button type="button" class="btn btn-primary">詳細</button>
<!-- "btn"と"btn-primary"クラスを持つbutton要素は、プライマリーボタンを定義します。-->
</div>
<!-- "card-body"の終了タグです。 -->
</div>
<!-- "card"の終了タグです。 -->
</div>
<!-- "col"の終了タグです。このコンテナ内に配置された要素(この例ではカード)は、
ブラウザの可視領域に応じて自動的にレスポンシブに配置されます。 -->
例題
上記のカードを横に2枚、3枚と横に並べなさい。レイアウト編で学んだ知識を使うこと。
上記のカードをlgでは横に並び、それ以下のサイズでは縦に並ぶようにしなさい。
上記の知識を応用すれば、当面のゴールとしている自動車販売のWebサイトのソースコードも読み解けるようになったはずです。
<まとめ:隣の人に正しく説明できたらチェックを付けましょう>
□ CDNでBootstrapのクラスにはテーブル、ナビゲーションバー、フォーム、ボタン、カードなどのコンポーネントがそろっている
今回は「コンポーネント編」でした。
最後までお読みいただきありがとうございました。