タブの作り方

今回のお題

今回はBootstrapを用いたタブの作り方を取り上げます。

完全に自分用のメモです。

タブとは

こういうやつです。

　スマホのような小さい画面であっても複数の情報を無理なく載せることができるので便利ですよね。

タブの基本骨格

タブの上の方にあるクリックする部分（店舗紹介とかキャンペーン一覧とかの部分)をナビアイテム、ナビアイテムをクリックすると表示される部分をタブパネルといいます。

<!-- ナビアイテム定義部分 -->
  <ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <!-- ページを開いた時に表示されている部分に関してはclass="active"とaria-selected="true"が必要 -->
      <a href="#detail" class="nav-link active text-secondary" id="detail-tab" data-bs-toggle="tab" role="tab" aria-controls="detail" aria-selected="true">
        店舗紹介 <!-- ここに書いたものがナビアイテムとして表示される -->
      </a>
    </li>
    <li class="nav-item" role="presentation">
      <a href="#menu" class="nav-link text-secondary" id="menu-tab" data-bs-toggle="tab" role="tab" aria-controls="menu" aria-selected="false">
        取扱商品一覧
      </a>
    </li>
    <li class="nav-item" role="presentation">
      <a href="#campaign" class="nav-link text-secondary" id="campaign-tab" data-bs-toggle="tab" role="tab" aria-controls="campaign" aria-selected="false">
        キャンペーン一覧
      </a>
    </li>
    <li class="nav-item" role="presentation">
      <a href="#member" class="nav-link text-secondary" id="member-tab" data-bs-toggle="tab" role="tab" aria-controls="member" aria-selected="false">
        スタッフ一覧
      </a>
    </li>     
  </ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="detail" role="tabpanel" aria-labelledby="detail-tab">
      <!-- タブパネルの中身を書く -->
    </div>
    <div class="tab-pane fade" id="menu" role="tabpanel" aria-labelledby="menu-tab">
      <!-- タブパネルの中身を書く -->
    </div>
    <div class="tab-pane fade" id="campaign" role="tabpanel" aria-labelledby="campaign-tab">
      <!-- タブパネルの中身を書く -->
    </div>
    <div class="tab-pane fade" id="member" role="tabpanel" aria-labelledby="member-tab">
      <!-- タブパネルの中身を書く -->
    </div>

ナビアイテムのhref属性およびaria-controls属性とタブパネルのid属性、ナビアイテムのid属性とタブパネルのaria-labelledby属性を対応させる必要があります。