サクッとWEBサイトを作る「SAKUWEB（さくうぇぶ）」

Bootstrapドロップダウン付タブメニューを作ろう

前回は1番のキャットタワーのメイン情報部分が完了したので、今回は2番のドロップダウン付タブメニューを作っていきます。

ドロップダウン付タブメニューはBootstrapに準備されています。

たくさんの種類があるなか、今回は一番シンプルなデザインで作ります。

　

*-*-* Chapter41 *-*-*

ドロップダウン付タブメニューを学ぼう

bootstrapドロップダウン付タブメニューVol02

目次

  1. ドロップダウンのタブメニューって何？
  2. ドロップダウン付タブメニューをみてみよう
  3. ドロップダウン付タブメニューのコードを見てみよう
  4. aria-labelledby属性とdata-bs-target
  5. ドロップダウン付タブメニューをカスタマイズしよう
  6. タブメニューを作ろう
  7. 本文とタブを関連付けよう

　

　

Bootstrap5サンプルサイト
Bootstrap5サンプルサイト 「Catroom」ページ

SAKUWEB さくうぇぶ

　

ドロップダウンのタブメニューって何？

今回からドロップダウン付タブメニューを作っていきます。

ドロップダウン付タブメニュー
Bootstrap5サンプルサイト
CAT Room　サンプルサイト

SAKUWEB さくうぇぶ

　

ドロップダウンはナビゲーションで使ったので、分かりやすいですね。

そこにタブをメニュー化したものが、ドロップダウン付タブメニューです。

サンプルサイトには、「商品情報」「サイズ」というタブがあり、クリックすると直下に情報が表示・非表示される仕組みになります。

　

タブを使うと、場所を節約できるため、商品情報など情報量が多い場合やFAQなどによく利用されます。

　

ドロップダウン付タブメニューをみてみよう

Components→Nav Tab→Javascript behavior

bootstrapドロップダウン付タブメニュー

　

ドロップダウン付タブメニューには、いろんな種類が用意されています。

今回はシンプルなものを設置していきましょう。

　

サンプルコードをみると、ulタグで囲まれたパーツとdivタグで囲まれたパーツがあります。

　

ulタグにはタブメニューを、divタグの方はコンテンツを格納して、

ボタンをクリックすると、指定した情報を表示する仕組みになっています。

　

この関連付けを行っているのが「aria-labelledby属性」です。

要素とラベルを関連付けします。

関連付けたい要素のid属性の値を、aria-labelledby属性の値にも指定すれば関連付けることができます。

　

またbuttonタグの「data-bs-target」ですが、これは要素の折り畳みや非表示にする指定で、Bootstrap特有のものです。

　

ドロップダウン付タブメニューのコードを見てみよう

Botostrapのコードをコピペします。

場所は、前回作った1番のメイン情報直下です。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button
      class="nav-link active"
      id="home-tab"
      data-bs-toggle="tab"
      data-bs-target="#home"
      type="button"
      role="tab"
      aria-controls="home"
      aria-selected="true"
    >
      Home
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button
      class="nav-link"
      id="profile-tab"
      data-bs-toggle="tab"
      data-bs-target="#profile"
      type="button"
      role="tab"
      aria-controls="profile"
      aria-selected="false"
    >
      Profile
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button
      class="nav-link"
      id="contact-tab"
      data-bs-toggle="tab"
      data-bs-target="#contact"
      type="button"
      role="tab"
      aria-controls="contact"
      aria-selected="false"
    >
      Contact
    </button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div
    class="tab-pane fade show active"
    id="home"
    role="tabpanel"
    aria-labelledby="home-tab"
  >
    ...
  </div>
  <div
    class="tab-pane fade"
    id="profile"
    role="tabpanel"
    aria-labelledby="profile-tab"
  >
    ...
  </div>
  <div
    class="tab-pane fade"
    id="contact"
    role="tabpanel"
    aria-labelledby="contact-tab"
  >
    ...
  </div>
</div>

　

aria-labelledby属性とdata-bs-target

buttonタグと本文を入れるdivタグの箇所を抜き出します。

    <button
      class="nav-link active"
      id="home-tab"
      data-bs-toggle="tab"
      data-bs-target="#home"
      type="button"
      role="tab"
      aria-controls="home"
      aria-selected="true"
    >
      Home
    </button>

 <div
    class="tab-pane fade show active"
    id="home"
    role="tabpanel"
    aria-labelledby="home-tab"
  >
    ...
  </div>

　

まず、divタグのaria-labelledby属性は要素とラベルを関連付けするものでしたね。

buttonタグのid属性「home-tab」とdivタグを関連付けています。

　

buttonタグの「data-bs-target」は要素の折り畳みを制御していますね。

divタグのid属性「home」を関連付けています。

　

双方のクラスに「active」が記述されていますね。

「active」が付与された場合にタブが有効となり、違うタブをクリックしたらこのクラスが自動的に消されます。

これで表示非表示を制御しています。

　

では、このコードをサンプルサイトのようにカスタマイズしていきます。

　

　

ドロップダウン付タブメニューをカスタマイズしよう

サンプルサイトのテキストを利用して、カスタマイズしていきましょう。

また、id名なども自由に書き換えていきます。

　

ドロップダウン付タブメニュー

　

タブメニューを作ろう

以下の流れで作ってみましょう。

　

1）buttonタグ

1-1）「商品情報」ボタンを作る

1-2）data-bs-targetを「#prod01」にする

1-3）id属性を「prod-tab」にする

1-4）aria-controlsを「prod」にする

1-5）「サイズ」ボタンを作る

1-6）data-bs-targetを「#size01」にする

1-7）id属性を「size-tab」にする

1-8）aria-controlsを「size」にする

　

それではコードです。

<ul class="nav nav-tabs nav-fill" id="data" role="tablist">
  <li class="nav-item" role="presentation">
    <button data-bs-target="#prod01" id="prod-tab" aria-controls="prod" class="nav-link active" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">商品情報</button>
  </li>
  <li class="nav-item" role="presentation">
    <button data-bs-target="#size01" id="size-tab" aria-controls="size" class="nav-link" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">サイズ</button>
  </li>
</ul>

　

本文とタブを関連付けよう

2）divタグ

2-1）「商品情報」の本文を作ろう

<h3 class="h5">据え置きキャットタワー</h3>
      <p>安定性抜群の据え置き型キャットタワーです。</p>

      <ul>
        <li>【省スペース】<br>空間の利用効率がアップする省スペース設計なので、ワンルームでも場所を取りません。</li>
        <li>【爪とぎ】<br>爪とぎ用のハシゴとポールを備え付けています。</li>
        <li>【おもちゃ付き】<br>ネコが遊べるように、ポンポンのおもちゃをつけました。</li>
        <li>【隠れ家】<br>来客時に隠れられるように、パーソナルスペースを確保しました</li>
      </ul>

2-2）id属性を「prod01」にする

2-3）aria-labelledby属性を「prod-tab」にする

2-4）「サイズ」の本文を作ろう

<h3 class="h5">サイズ</h3>
      <ul>
        <li>【商品の寸法】55L x 40W x 83H cm</li>
        <li>【使用場所】室内</li>
        <li>【ペットの成長段階】すべてのライフステージ</li>
        <li>【ブランド】SakuWeb</li>
      </ul>

2-5）id属性を「size01」にする

2-6）aria-labelledby属性を「size-tab」にする

　

それでは、タブメニューと合算したコードです。

<!-- tabs -->
<ul class="nav nav-tabs nav-fill" id="data" role="tablist">
  <li class="nav-item" role="presentation">
    <button data-bs-target="#prod01" id="prod-tab" aria-controls="prod" class="nav-link active" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">商品情報</button>
  </li>
  <li class="nav-item" role="presentation">
    <button data-bs-target="#size01" id="size-tab" aria-controls="size" class="nav-link" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">サイズ</button>
  </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
  <div id="prod01" aria-labelledby="prod-tab" class="tab-pane active" role="tabpanel">
      <h3 class="h5">据え置きキャットタワー</h3>
      <p>安定性抜群の据え置き型キャットタワーです。</p>

      <ul>
        <li>【省スペース】<br>空間の利用効率がアップする省スペース設計なので、ワンルームでも場所を取りません。</li>
        <li>【爪とぎ】<br>爪とぎ用のハシゴとポールを備え付けています。</li>
        <li>【おもちゃ付き】<br>ネコが遊べるように、ポンポンのおもちゃをつけました。</li>
        <li>【隠れ家】<br>来客時に隠れられるように、パーソナルスペースを確保しました</li>
      </ul>
  </div>
  <div id="size01" aria-labelledby="size-tab" class="tab-pane" role="tabpanel">
      <h3 class="h5">サイズ</h3>
      <ul>
        <li>【商品の寸法】55L x 40W x 83H cm</li>
        <li>【使用場所】室内</li>
        <li>【ペットの成長段階】すべてのライフステージ</li>
        <li>【ブランド】SakuWeb</li>
      </ul>
  </div>
</div>

これでドロップダウン付タブメニューの設置が完了です。

　

次回は、要素の順番をブラウザのサイズによって変える方法と、ドロップダウン付タブメニューを設置していきます。

まとめ

ドロップダウン付タブメニューとは

ボタンをクリックすると関連情報が表示される仕組み

場所を節約できるため、情報量が多い場合やFAQなどによく利用される

aria-labelledby属性

要素とラベルを関連付けする属性

data-bs-target

要素の折り畳みや表示非表示を切り替える

Recent Post

【BingAI】深津式プロンプトでAIの精度が爆上がり！ 2023年12月21日

【BingAI】深津式プロンプトでAIの精度が爆上がり！

TRY to MAKE
【BingAI】ブログ執筆機能搭載！時短でブログ記事を書かせた結果！ 2023年12月21日

【BingAI】ブログ執筆機能搭載！時短でブログ記事を書かせた結果！

TRY to MAKE
ADOBEを快適に使えるPCはどれ？本当の必要スペックを考察！ 2023年12月17日

ADOBEを快適に使えるPCはどれ？本当の必要スペックを考察！

TRY to MAKE

Category Post

Back To Top