サクッと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

【Adobe Firefly：初心者ガイド】スタイル「効果：流行」解説！画像サンプル付き！ 2024年7月4日

【Adobe Firefly：初心者ガイド】スタイル「効果：流行」解説！画像サンプル付き！

TRY to MAKE
【常時SSL化】301リダイレクトがエラー!?対処法とコピペ用コードも紹介 2024年7月3日

【常時SSL化】301リダイレクトがエラー!?対処法とコピペ用コードも紹介

TRY to MAKE
【Adobe Firefly：初心者ガイド】スタイルの「参照」の使い方解説！ 2024年6月5日

【Adobe Firefly：初心者ガイド】スタイルの「参照」の使い方解説！

TRY to MAKE

Category Post

Back To Top