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を適用すると以下のように変化します。

02-table.html

<ソースコード>

<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についてのコメントを加えました。

新人エンジニア研修
Bootstrap5を使用したナビゲーションバー
新人エンジニア研修
ハンバーガーメニューに変わったところ
<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)のように変化します。

画像とコードに番号を振っています。

新人エンジニア研修
Bootstrap5を使用したフォーム

<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)をご覧ください。

		<div class="m-2">
			<button type="button" class="btn btn-primary">btn-primary:主要なアクションに使用されます。</button>
		</div>
		<div class="m-2">
			<button type="button" class="btn btn-secondary">btn-secondary:主要なアクション以外のものに使用します。</button>
		</div>
		<div class="m-2">
			<button type="button" class="btn btn-success">btn-success:成功または肯定的なアクションに対して使われます。</button>
		</div>
		<div class="m-2">
			<button type="button" class="btn btn-danger">btn-danger:危険や否定的なアクションに対して使われます。</button>
		</div>
		<div class="m-2">
			<button type="button" class="btn btn-warning">btn-warning:警告や注意が必要なアクションに対して使われます。</button>
		</div>
		<div class="m-2">
			<button type="button" class="btn btn-info">btn-info:情報提供のためのアクションに対して使われます。</button>
		</div>
		<div class="m-2">
			<button type="button" class="btn btn-light">btn-light:明るいテーマのデザインに使われます。</button>
		</div>
		<div class="m-2">
			<button type="button" class="btn btn-dark">btn-dark:暗いテーマのデザインに使われます。</button>
		</div>
		<div class="m-2">
			<button type="button" class="btn btn-link">btn-link:リンクも一種のボタンとして指定可能です。</button>
		</div>
	</div>

<解説>

「class="btn btn-xxxx"」と指定することでBootstrapのボタンになります。それぞれのボタンには以下のような色と意味があります。

新人エンジニア研修
BootStrapのボタンの色

また、ボタンのサイズもカスタマイズ可能です。btn-lg, btn-sm, btn-blockクラスを使用することで、大きなボタン、小さなボタン、ブロックレベルのボタンを作成することができます。

BootStrapのボタンのソースコードのリンクです。

1.5 カードを扱う

Bootstrapのカード【Card】は、様々な種類のコンテンツを含め、それを整理して表示するための柔軟なコンテナです。カードは、写真、テキスト、リンク、ドロップダウンメニューなど、様々な情報を含むことができます。

サンプル09-card.html(link)をご覧ください。

     <div class="row row-cols-md-2 row-cols-1 g-4 mb-4">
            <div class="col">
                <div class="card">
                    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image 1">
                    <div class="card-body">
                        <h5 class="card-title">カードのタイトル 1</h5>
                        <p class="card-text">これはカードの本文の例です。</p>
                    </div>
                </div>
            </div>
      //(カードを4枚省略)
            <div class="col">
                <div class="card">
                    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image 4">
                    <div class="card-body">
                        <h5 class="card-title">カードのタイトル 6</h5>
                        <p class="card-text">これはカードの本文の例です。</p>
                    </div>
                </div>
            </div>
        </div>

ここでのポイントは以下のクラス指定です。

row row-cols-md-2 row-cols-1 g-4 mb-4

  1. row
    Bootstrapのグリッドシステムの行を定義します。コンテンツを列(col)として配置するためのコンテナです。
  2. row-cols-md-2
    中サイズ(md)以上のスクリーン(ウィンドウ幅が768ピクセル以上)では、1行に2列を表示します。
  3. row-cols-1
    小サイズ(md未満)のスクリーン(ウィンドウ幅が768ピクセル未満)では、1行に1列を表示します。
  4. g-4
    グリッド項目間のギャップ(間隔)を設定します。この場合、各項目間に4のスペースを持たせます。
  5. mb-4
    下部に4のマージン(余白)を設定します。

例題

上記のカードのクラス「row-cols-xx-x」のxの値を変化させ、カードの並びがどのように変化するかを確かめなさい。

上記の知識を応用すれば、当面のゴールとしている自動車販売のWebサイトのソースコードも読み解けるようになったはずです。

<まとめ:隣の人に正しく説明できたらチェックを付けましょう>

□ CDNでBootstrapのクラスにはテーブル、ナビゲーションバー、フォーム、ボタン、カードなどのコンポーネントがそろっている

今回は「コンポーネント編」でした。

以下のリンクでは最終課題に向けてBootStrapとJavaScriptの小技を紹介していますので参考にしてみて下さい。

https://saycon.co.jp/portal-for-newcomer/javaweb/webtips#BootStrap

https://saycon.co.jp/portal-for-newcomer/javaweb/webtips#JavaScript

最後までお読みいただきありがとうございました。

BootStrapで今風のデザインを実現する 最後までお読みいただきありがとうございます。