プロデミア

Lesson4 Bootstrap

Bootstrapとは？

Bootstrapは、ウェブサイトやウェブアプリケーションを開発するためのフレームワークです。

HTML、CSS、JavaScriptというウェブ開発の3つの基本技術を使って、見た目が美しく、レスポンシブ（画面サイズに合わせて最適な表示を行う）なウェブサイトを簡単に作ることができます。

少しの記述量できれいな見た目を作成できるため、デザインやCSSの記述時間を短縮することができます。

また、Webサイトやダッシュボードなどのテンプレートも公開されているため、CSSがわからない方やデザインが苦手な方でもプロのサイトを作成することができます。

Bootstrapの読み込み

では実際にBootstrapを実際に読み込んで使ってみましょう。

Bootstrapを読み込む方法は大きく

  1. CDN(Content Delivery Network)を使用する方法
  2. ファイルをダウンロードしてプロジェクトに直接組み込む方法

の２つあります。

順番に説明していきます。

まず、１つ目のCDNを用いる方法です。

CDNを使用すると、Bootstrapのファイルをインターネット上のサーバーから直接リンクすることができます。

この方法は、特に小規模なプロジェクトや、迅速にプロトタイピングを行いたい場合に便利です。

 

Cloud9にLesson3_Bootstrapフォルダを新たに作成し、その中に「index.html」を作成し、以下のコードをコピーアンドペーストしてください。

index.html

<!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>
</head>
<body>

</body>
</html>

では実際にBootstrapを読み込んでみましょう。
HTMLファイルの<head>タグ内の最後に、以下の記述を追加してください。

<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM” crossorigin=”anonymous”>

さらに、</body>タグの直前に以下のコードを追加してください。

<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>

CDNによる読み込み方法は以上です！

では、２つめのファイルをダウンロードしてプロジェクトに直接組み込む方法をご紹介します。

新たに、Lesson3_Bootstrapフォルダに「Download」という名のフォルダを作成してください。

その後、作成した「Download」フォルダの中に「download.html」ファイルと「CSS」「JS」フォルダを新規に作成しましょう。

次に、公式ドキュメントからファイルをダウンロードします。

https://getbootstrap.jp/docs/5.3/getting-started/download/

ダウンロードが完了したら、zipファイルを解凍し中身を確認しましょう。

zipを解凍すると「CSS」「JS」フォルダの２つが入っていると思います。

それぞれから１ファイルずつ

これでBootstrapが読み込まれました！

では実際にBootstrapのサンプルコードを挿入し、実際に画面を見てみましょう。

では、index.htmlの<body>タグ内に以下のコードを追加してください。

<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”>
          アコーディオンメニューが表示されます！
        </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”>
          アコーディオンメニュー２
        </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”>
          アコーディオンメニュー３
        </div>
      </div>
    </div>
  </div>
追記できたら、ブラウザ上で確認してみましょう。
Cloud9でプレビューを開いてください。

 

 

画像のようにアコーディオンメニューが表示されていたらBootstrapを無事に読み込めています。

ここでindex.htmlを見てみましょう。

デザインするのに必要なCSSや動きをつけるためのJavaScriptを１行も記述していないのに、画面上にはおしゃれなアコーディオンメニューが表示されています。

これがBootstrapの便利さです。

Bootstrapでは、HTMLのタグにあらかじめ用意されているクラス名を付与することによって、CSSを記述せずともCSSを適応させることができます。

例えば、「fw-bold」というクラスを追加すると、追加されたHTMLは太字になります。

つまり、fw-boldはCSSでいうfont-weight: bold;と同じ意味になります。

あらかじめBootstrap側で、以下のようなコードが用意されているためCSSは記述せずに済みます。

.fw-bold {

font-weight: bold;

}

では使い方が分かったところで、Bootstrapの基本的な使い方について見ていきましょう。

Bootstrapの基本

グリッド

グリッドはレスポンシブなページレイアウトを簡単に作成できる強力なツールです。

このグリッド機能を使うためにBootstrapを導入することもあるくらい、重要で便利な機能になるので扱えるようになりましょう。

グリッドはFlexboxで構築されており、コンテンツを簡単に整列させるために用いられます。

横幅を12カラムとして考えます。あまりイメージもわかないと思うのでさっそく使いながら理解していきましょう。

以下のコードをコピー＆ペーストしてください。

  <div class=”container text-center border”>
    <div class=”row”>
      <div class=”col border border-secondary p-2″>
        カラム
      </div>
      <div class=”col border border-success p-2″>
        カラム
      </div>
      <div class=”col border border-danger p-2″>
        カラム
      </div>
    </div>
  </div>

画面を見てみると横並びになったレイアウトができていると思います。

では、コードの説明をします。

まず、グリッドで大切な２つのクラスは「row」「col」です。

「row」はcolクラスの親要素に設定します。

「row」クラスを指定することで、グリッドを使用することができるようになります。

続いて「col」クラスですが、「row」クラスの子要素に対してクラス名を設定します。

colクラスを用いることで特定の幅を持つ要素を作成できるようになります。

ここでの理解は、rowクラスの子要素にcolクラスを指定するというルールがあるという理解で十分です。

では、さらに進めていきましょう。

以下のコードをコピー＆ペーストしてください。

  <div class=”container text-center border”>
    <div class=”row”>
      <div class=”col-6 border border-secondary p-2″>
      左側のコンテンツ
      </div>
      <div class=”col border border-success p-2″>
      真ん中のコンテンツ
      </div>
      <div class=”col border border-danger p-2″>
      右側のコンテンツ
      </div>
    </div>
  </div>
先ほどと変わった点は１つだけです。「半分のサイズのカラム」になっている部分のクラスが「col」ではなく「col-6」に代わっています。
画面を見てみましょう。
先ほどとデザインが変わっていますね。「左側のコンテンツ」の部分が画面サイズの半分を占め、ほかの「真ん中のコンテンツ」と「右側のコンテンツ」カラムが残りの半分を取り合っています。
では「col-6」の6は一体何の数字でしょうか？

６の正体について解説していきます。

最初に説明したように、グリッドでは横幅を12カラムとして判定しています。
そこで、12のうちのいくつ分のサイズを取るかを「col-数字」で表現することで、サイズの大きさを変えることができます。
今回は6なので画面サイズの6/12つまり1/2を占めるという意味になります。
「col」の場合は数字が省略されているので、今回は、それぞれ「col」が「col-3」に自動的に変換されています。
このようにcolの後ろの数字が省略されている場合は、Bootstrapが勝手に数字を調節してくれます。
もう一つ例を見てみましょう。
<div class=“container”>
<div class=“row”>
<div class=“col-1”>左側のコンテンツ</div>
<div class=“col-5”>真ん中のコンテンツ</div>
<div class=“col-4”>右側のコンテンツ</div>
</div>
</div>
  <div class=”container text-center border”>
    <div class=”row”>
      <div class=”col-6 border border-secondary p-2″>
        左側のコンテンツ
      </div>
      <div class=”col-1 border border-success p-2″>
        真ん中のコンテンツ
      </div>
      <div class=”col-1 border border-danger p-2″>
        右側のコンテンツ
      </div>
    </div>
  </div>

メディアクエリ

 

基本的なコンポーネント

アコーディオン

まずは先ほども紹介した「アコーディオンメニュー」です。

アコーディオンメニューは、ウェブサイトやアプリケーションにおいて、コンテンツをコンパクトに表示し、

ユーザーが必要に応じて情報を展開できるようにするための便利な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サイト等では、アイテムの数を示したり、追加情報（例えば、新しい通知の数や未読メッセージの数など）を視覚的に強調するために使用されます。

【サンプルコード】

対象の要素に対して<span>タグを使い、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/280×180.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/280×180.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コンポーネントです。
画像、テキスト、その他のカスタムコンテンツを含む複数のスライドを順番に表示することや自動的に切り替わるように設定することもでき、

ユーザーが手動で切り替えることも可能です。ウェブサイトのヘッダー部分で特集記事や製品を紹介するのによく使用されます。

【サンプルコード】

<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>
サンプルコードをコピペして画面を再度読み込んでみましょう。
以下の画像のように１枚目のモーダルに「２枚目のモーダルへ」ボタンが表示されています。

「２枚目のボタンへ」ボタンをクリックすると２枚目のモーダルを表示させることができます。

 

ナビバー

ナビバー（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アプリケーションでよく用いられます。

フォームコントロール

Webアプリケーションやウェブサイトにおいて、ユーザーからの入力を受け取るためのフォームは不可欠な要素です。
フォームを通じて、ユーザーは検索クエリを送信したり、登録情報を入力したりすることができます。Bootstrapは、多くのお問い合わせフォームを作成する上での便利機能やコンポーネントを提供してくれています。

具体的には、テキストボックス、セレクトメニュー、ラジオボタン、チェックボックスなど、さまざまなinputタイプなどがあります。

Bootstrapのフォームコントロールを利用することで、これらの要素を簡単にスタイリングし、一貫性のある画面デザインを作成することができるのでこれから学んでいきましょう。

サイズ

まずはサイズ調整です。

クラス名を追記するだけで簡単に高さを変更することができます。

では実際に見ていきましょう。

【サンプルコード】

  <div class=”mb-3″>
    <label for=”exampleFormControlInput1″ class=”form-label”>いろんなサイズのテキストボックス</label>
    <input type=”email” class=”form-control form-control-lg” id=”exampleFormControlInput1″ placeholder=”name@example.com”>
    <input type=”email” class=”form-control” id=”exampleFormControlInput1″ placeholder=”name@example.com”>
    <input type=”email” class=”form-control form-control-sm” id=”exampleFormControlInput1″ placeholder=”name@example.com”>
  </div>
サンプルコードをコピペして画面を読み込んでみましょう。

いろんなサイズのテキストボックスが表示されました。

「form-control-lg」「form-control-sm」のクラスをinputタグのクラス名に付与することでフォームのサイズを変えることができます。

フォームテキスト

Bootstrapにおけるフォームテキストは、フォームの説明や補足をするときに用いられることが多いです。

例えば、パスワード入力欄に「パスワードは大文字、小文字、数字を組み合わせた～」のような注釈を一度は見たことがあるのではないでしょうか。

Bootstrapは「form-text」というクラスを付与するだけで簡単に注釈を追加することができます。

【サンプルコード】

  <label for=”inputPassword5″ class=”form-label”>パスワード</label>
  <input type=”password” id=”inputPassword5″ class=”form-control” aria-labelledby=”passwordHelpBlock”>
  <div id=”passwordHelpBlock” class=”form-text”>
    大文字、小文字、数字、記号を組み合わせた8文字以上のパスワードを使用してください。
  </div>
サンプルコードをコピペして画面を読み込んでみましょう。

簡単に注釈が追加できました。

読み取り専用の項目

読み取り専用（Read-Only）属性は、フォームフィールドや入力要素において、ユーザーが表示されている値を見ることはできるが、その値を変更することはできないようにするために使用されます。

読み取り専用は、フォームで特定の情報をユーザーに提示する際に重宝します。

例えば、ユーザーが過去に入力した情報を確認する場合や、変更不可の値を表示する場合などに有効です。

Bootstrapでは、inputタグやtextareaタグに「readonly」属性を付与することで設定できます。

【サンプルコード】

  <div class=”mb-3″>
    <label for=”exampleFormControlInput1″ class=”form-label”>メールアドレス</label>
    <input type=”email” class=”form-control” id=”exampleFormControlInput1″ value=”sample@example.com” readonly>
  </div>
  <div class=”mb-3″>
    <label for=”exampleFormControlTextarea1″ class=”form-label”>問い合わせ内容</label>
    <textarea class=”form-control” id=”exampleFormControlTextarea1″ rows=”3″ readonly>読み取り専用</textarea>
  </div>
サンプルコードをコピペして画面を読み込んでみましょう。

見た目は今までとは変わりませんが、テキストエリアやテキストボックスをクリックしたりすると違いを感じられるはずです。

クリックしても、カーソルが入力エリアにあたることはなく、入力不可能になっているはずです。

ここで「disabled」属性との違いを解説します。

特性 readonly disabled
定義 ユーザーがフィールドの値を見ることはできるが、変更はできない。 ユーザーがフィールドの値を見ることも、変更することもできない。
見た目 通常のフォームと変わりなし。 フォームが薄い灰色でおおわれる。
フォーム送信 内容を送信できる 内容を送信できない

試しに先ほどのサンプルコードのreadonlyを１つdisabledに変更してみましょう。

以下のコードに変更

  <div class=”mb-3″>
    <label for=”exampleFormControlInput1″ class=”form-label”>メールアドレス</label>
    <input type=”email” class=”form-control” id=”exampleFormControlInput1″ value=”sample@example.com” readonly>
  </div>
  <div class=”mb-3″>
    <label for=”exampleFormControlTextarea1″ class=”form-label”>問い合わせ内容</label>
　<!– 以下タグの「readonly」を「disabled」に変更 –>
    <textarea class=”form-control” id=”exampleFormControlTextarea1″ rows=”3″ disabled>読み取り専用</textarea>
  </div>
サンプルコードをコピペして画面を読み込んでみましょう。

見た目も変わりましたね。

「disabled」はフォーム背景が薄い灰色になりました。

ユーザーが視覚的に入力ができないことがわかるUIになっています。

適切に使い分けられるようにしましょう。

ファイル

ファイル入力は、ユーザーがPCや携帯電話にあるファイルをWebアプリケーションやWebサイトにアップロードするために用いられます。

wordファイルや運転免許証などをアップロードしたことがある方はイメージがつくと思います。

【サンプルコード】

  <form>
    <div class=”mb-3″>
      <input class=”form-control” type=”file” id=”formFile”>
    </div>
    <input class=”btn btn-primary” type=”submit” value=”送信”>
  </form>
サンプルコードをコピペして画面を読み込んでみましょう。

ファイルを選択ボタンをクリックすると、自分のPCや携帯電話に入っているファイルを選択できるようになります。

送信ボタンをクリックしてもファイルは送信されませんが、「form-control」のクラス名を設定することで簡単にファイルをアップロードするためのフォームを作成することができます。

Bootstrap Icons

Boo

投稿日

カテゴリー:

投稿者:

prodemia-admin-user

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です