Bootstrap

Bootstrapでタブ（Tabs）を作る方法

2022年8月22日 by single コメントはまだありません

Contents

1 Bootstrapでタブ（Tabs）を作る方法
2 ご参考
- 2.1 関連ページ

Bootstrapでタブ（Tabs）を作る方法

デモページ

デモページ

まず、「デモページ」をクリックし、デモページを開いてから、記事を確認してみてください。

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>Bootstrap Tabs demo</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- JSファイル読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div style="margin-bottom:30px">
        <h2>.nav-tabs</h2>
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item" role="presentation"     >
            <a class="nav-link active" aria-current="page" href="#home1"
               id="home1-tab"
               data-bs-toggle="tab"
               role="tab"
            >ホーム</a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link" href="#profile1"      
               id="profile1-tab"
               data-bs-toggle="tab"
               role="tab"
               aria-controls="profile1"
               aria-selected="false"
            >プロフィール</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact1"
               id="contact1-tab"
               data-bs-toggle="tab"
               role="tab"
            >お問い合わせ</a>
          </li>
          <li class="nav-item">
             <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効（Disabled）</a>
          </li>
        </ul>
        <div class="tab-content" id="myTabContent1">
          <div
            class="tab-pane fade show active"
            id="home1"
            role="tabpanel"
            aria-labelledby="home1-tab"
          >
            ホーム
          </div>
          <div
            class="tab-pane fade"
            id="profile1"
            role="tabpanel"
            aria-labelledby="profile1-tab"
          >
            プロフィール
          </div>
          <div
            class="tab-pane fade"
            id="contact1"
            role="tabpanel"
            aria-labelledby="contact1-tab"
          >
            お問い合わせ
          </div>
        </div>
      </div>
    </div><!-- row -->

    <div class="row" >
      <div style="margin-bottom:30px">
        <h2>.nav-pills</h2>
        <ul class="nav nav-pills" id="myTab2" role="tablist">
          <li class="nav-item" role="presentation"     >
            <a class="nav-link active" aria-current="page" href="#home2"
               id="home2-tab"
               data-bs-toggle="tab"
               role="tab"
            >ホーム</a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link" href="#profile2"      
               id="profile2-tab"
               data-bs-toggle="tab"
               role="tab"
               aria-controls="profile2"
               aria-selected="false"
            >プロフィール</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact2"
               id="contact2-tab"
               data-bs-toggle="tab"
               role="tab"
            >お問い合わせ</a>
          </li>
          <li class="nav-item">
             <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効（Disabled）</a>
          </li>
        </ul>
        <div class="tab-content" id="myTabContent2">
          <div
            class="tab-pane fade show active"
            id="home2"
            role="tabpanel"
            aria-labelledby="home2-tab"
          >
            ホーム
          </div>
          <div
            class="tab-pane fade"
            id="profile2"
            role="tabpanel"
            aria-labelledby="profile2-tab"
          >
            プロフィール
          </div>
          <div
            class="tab-pane fade"
            id="contact2"
            role="tabpanel"
            aria-labelledby="contact2-tab"
          >
            お問い合わせ
          </div>
        </div>
      </div>
    </div><!-- row -->

    <div class="row">
      <div style="margin-bottom:30px">
        <h2>.nav-justified (hrefなし)</h2>
        <ul class="nav nav-pills nav-justified" id="myTab3" role="tablist">
          <li class="nav-item" role="presentation"     >
            <a class="nav-link active" aria-current="page" 
               id="home3-tab"
               data-bs-toggle="tab"
               data-bs-target="#home3"
               role="tab"
            >ホーム</a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link" 
               id="profile3-tab"
               data-bs-toggle="tab"
               data-bs-target="#profile3"
               role="tab"
               aria-controls="profile3"
               aria-selected="false"
            >プロフィール</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" 
               id="contact3-tab"
               data-bs-toggle="tab"
               data-bs-target="#contact3"
               role="tab"
            >お問い合わせ</a>
          </li>
          <li class="nav-item">
             <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効（Disabled）</a>
          </li>
        </ul>
        <div class="tab-content" id="myTabContent3">
          <div
            class="tab-pane fade show active" id="home3">
            ホーム
          </div>
          <div
            class="tab-pane fade" id="profile3" >
            プロフィール
          </div>
          <div class="tab-pane fade" id="contact3" >
            お問い合わせ
          </div>
        </div>
      </div>
    </div><!-- row -->

    <div class="row">
      <div style="margin-bottom:30px">
        <h2>&lt;nav&gt; ベースのナビゲーション .nav-fill</h2>
        <nav class="nav nav-pills nav-fill ">
          <a class="nav-link active" aria-current="page" data-bs-toggle="tab" href="#home4">ホーム</a>
          <a class="nav-link" data-bs-toggle="tab"  href="#profile4">プロフィール</a>
          <a class="nav-link" data-bs-toggle="tab" href="#contact4">お問い合わせ</a>
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効（Disabled）</a>
        </nav>
        <div class="tab-content" id="myTabContent4">
          <div class="tab-pane fade show active" id="home4">
            ホーム
          </div>
          <div class="tab-pane fade" id="profile4">
            プロフィール
          </div>
          <div class="tab-pane fade" id="contact4">
            お問い合わせ
          </div>
        </div>
      </div>
    </div><!-- row -->

    <div class="row">
      <div style="margin-bottom:30px">
        <h2>ドロップダウン .nav-tabs</h2>
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#home5">ホーム</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">ドロップダウン</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" data-bs-toggle="tab"  href="#profile5">プロフィール</a></li>
              <li><a class="dropdown-item" data-bs-toggle="tab"  href="#portfolio5">ポートフォリオ</a></li>
              <li><a class="dropdown-item" data-bs-toggle="tab"  href="#access5">アクセス</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" data-bs-toggle="tab"  href="#contact5">お問い合わせ</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#link5">リンク</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効（Disabled）</a>
          </li>
        </ul>
        <div class="tab-content" id="myTabContent5">
          <div class="tab-pane fade show active" id="home5">
            ホーム
          </div>
          <div class="tab-pane fade" id="profile5">
            プロフィール
          </div>
          <div class="tab-pane fade" id="portfolio5">
            ポートフォリオ
          </div>
          <div class="tab-pane fade" id="access5">
            アクセス
          </div>
          <div class="tab-pane fade" id="contact5">
            お問い合わせ
          </div>
          <div class="tab-pane fade" id="link5">
            リンク
          </div>
        </div>
      </div>
    </div><!-- row -->

    <div class="row">
      <div style="margin-bottom:30px">
        <h2>ドロップダウン .nav-pills</h2>
        <ul class="nav nav-pills">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#home6">ホーム</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">ドロップダウン</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" data-bs-toggle="tab"  href="#profile6">プロフィール</a></li>
              <li><a class="dropdown-item" data-bs-toggle="tab"  href="#portfolio6">ポートフォリオ</a></li>
              <li><a class="dropdown-item" data-bs-toggle="tab"  href="#access6">アクセス</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" data-bs-toggle="tab"  href="#contact6">お問い合わせ</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#link6">リンク</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効（Disabled）</a>
          </li>
        </ul>
        <div class="tab-content" id="myTabContent5">
          <div class="tab-pane fade show active" id="home6">
            ホーム
          </div>
          <div class="tab-pane fade" id="profile6">
            プロフィール
          </div>
          <div class="tab-pane fade" id="portfolio6">
            ポートフォリオ
          </div>
          <div class="tab-pane fade" id="access6">
            アクセス
          </div>
          <div class="tab-pane fade" id="contact6">
            お問い合わせ
          </div>
          <div class="tab-pane fade" id="link6">
            リンク
          </div>
        </div>
      </div>
    </div><!-- row -->

    <div class="row">
      <div style="margin-bottom:30px">
        <h2>縦のタブ</h2>
        <div class="d-flex align-items-start">
          <div
            class="nav flex-column nav-pills me-3"
            id="v-pills-tab"
            role="tablist"
            aria-orientation="vertical"
          >
            <button
              class="nav-link active"
              id="v-pills-home-tab"
              data-bs-toggle="pill"
              data-bs-target="#v-pills-home"
              type="button"
              role="tab"
              aria-controls="v-pills-home"
              aria-selected="true"
            >
              ホーム
            </button>
            <button
              class="nav-link"
              id="v-pills-profile-tab"
              data-bs-toggle="pill"
              data-bs-target="#v-pills-profile"
              type="button"
              role="tab"
              aria-controls="v-pills-profile"
              aria-selected="false"
            >
              プロフィール
            </button>
            <button
              class="nav-link"
              id="v-pills-messages-tab"
              data-bs-toggle="pill"
              data-bs-target="#v-pills-messages"
              type="button"
              role="tab"
              aria-controls="v-pills-messages"
              aria-selected="false"
            >
              メッセージ
            </button>
            <button
              class="nav-link"
              id="v-pills-settings-tab"
              data-bs-toggle="pill"
              data-bs-target="#v-pills-settings"
              type="button"
              role="tab"
              aria-controls="v-pills-settings"
              aria-selected="false"
            >
              設定
            </button>
          </div>
          <div class="tab-content" id="v-pills-tabContent">
            <div
              class="tab-pane fade show active"
              id="v-pills-home"
              role="tabpanel"
              aria-labelledby="v-pills-home-tab"
            >
              ホーム
            </div>
            <div
              class="tab-pane fade"
              id="v-pills-profile"
              role="tabpanel"
              aria-labelledby="v-pills-profile-tab"
            >
              プロフィール
            </div>
            <div
              class="tab-pane fade"
              id="v-pills-messages"
              role="tabpanel"
              aria-labelledby="v-pills-messages-tab"
            >
              メッセージ
            </div>
            <div
              class="tab-pane fade"
              id="v-pills-settings"
              role="tabpanel"
              aria-labelledby="v-pills-settings-tab"
            >
              設定
            </div>
          </div>
        </div>
      </div>
    </div><!-- row -->

    <div class="row">
      <div style="margin-bottom:30px">
        <h2>Javascriptサンプル</h2>
        <nav class="nav nav-pills" id="myTab8">
          <a class="nav-link"> ホーム</a>
          <a class="nav-link active" >プロフィール</a>
          <a class="nav-link" id="contactTab8"  data-bs-target="#contact8">お問い合わせ</a> 
          <button class="btn  btn-info" onclick="showContactTab();">お問い合わせ表示</button>
        </nav>
        <div class="tab-content" id="myTabContent8">
          <div class="tab-pane fade" id="home8">
            ホーム
          </div>
          <div class="tab-pane fade  show active" id="profile8">
            プロフィール
          </div>
          <div class="tab-pane fade" id="contact8">
            お問い合わせ
          </div>
        </div>
        <script>
          var lastTabEl = document.getElementById('contactTab8');
          var lastTab = new bootstrap.Tab(lastTabEl);
          function showContactTab() {
            lastTab.show();
          }
        </script>
      </div>
    </div><!-- row -->
  </div><!-- container -->
</body>
</html>

実装方法

Bootstrap導入

まず、BootstrapのCSSファイルとJSファイルを読み込みます。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

導入方法の詳細は、以下のページをご覧ください。

フレームワークBootstrap5の導入方法

タブ実装

Tabs

まず、タグ領域を生成します。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  ..
</ul>

ulタグや、navタグで領域を作り、classに「nav-tabs」をします。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" aria-current="page" href="#home1"
       id="home1-tab"
       data-bs-toggle="tab"
       role="tab"
    >ホーム</a>
  </li>
  ..
</ul>

ulは以下の場合には、liタグを設定し、その中にaタグでリンクを設定してください。

aタグを設定する際、href属性を設定し、アドレスに、この後生成するタブのidを先頭にシャープ（#）をつけて指定してください。

また、「data-bs-toggle」属性を設定し、値に『tab』を設定してください。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation"     >
    <a class="nav-link active" aria-current="page" href="#home1"
       id="home1-tab"
       data-bs-toggle="tab"
       role="tab"
    >ホーム</a>
  </li>
  ...
</ul>
<div class="tab-content" id="myTabContent1">
  <div
    class="tab-pane fade show active"
    id="home1"
    role="tabpanel"
    aria-labelledby="home1-tab"
  >
    ホーム
  </div>
  ...
</div>

次に、各タブの内容領域を定義します。

まず、divで領域を生成し、classに『tab-content』を設定してください。

その配下に各タブ領域を設定してください。classには『tab-pane』を設定し、idも設定し、タブ領域のaタグのhrefで設定した文字列と一致させてください。

タブを初期選択させる

タブの初期選択させるには、まず、タブ領域にはclass『active』。

タブ内容領域のclassには『show』『active』を設定してください。

フェード効果

タブ内容領域のclassに『fade』を設定すると、タブ切り替え時、フェード効果を与えることができ、ジンワリタブが切り替わります。

Pills

classに「nav-tabs」の代わりに「nav-pills」指定することもできます。

Pills

<ul class="nav nav-pills" id="myTab2" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" aria-current="page" href="#home2"
       id="home2-tab"
       data-bs-toggle="tab"
       role="tab"
    >ホーム</a>
  </li>
  ...
</ul>

利用可能な幅いっぱいのタブ

Fill and justify

<ul class="nav nav-pills nav-justified" id="myTab3" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" aria-current="page" 
       id="home3-tab"
       data-bs-toggle="tab"
       data-bs-target="#home3"
       role="tab"
    >ホーム</a>
  </li>
  ...
</ul>

classに「nav-justified」を設定することで、利用可能な幅いっぱいのタブを設定できます。

なお、aタグに「href」属性がなくても、「data-bs-target」属性を設定すれば、タブを実装できます。

<nav>ベースのナビゲーション

<nav>タグだけでもタブ領域を実装できます。

<nav class="nav nav-pills nav-fill ">
  <a class="nav-link active" aria-current="page" data-bs-toggle="tab" href="#home4">ホーム</a>
  <a class="nav-link" data-bs-toggle="tab"  href="#profile4">プロフィール</a>
  <a class="nav-link" data-bs-toggle="tab" href="#contact4">お問い合わせ</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効（Disabled）</a>
</nav>
<div class="tab-content" id="myTabContent4">
  <div class="tab-pane fade show active" id="home4">
    ホーム
  </div>
  <div class="tab-pane fade" id="profile4">
    プロフィール
  </div>
  <div class="tab-pane fade" id="contact4">
    お問い合わせ
  </div>
</div>

ドロップダウンでのタブ選択

Tabs with dropdowns

<ul class="nav nav-tabs">
    ...
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">ドロップダウン</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" data-bs-toggle="tab" href="#profile5">プロフィール</a></li>
      <li><a class="dropdown-item" data-bs-toggle="tab" href="#portfolio5">ポートフォリオ</a></li>
      <li><a class="dropdown-item" data-bs-toggle="tab" href="#access5">アクセス</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" data-bs-toggle="tab" href="#contact5">お問い合わせ</a></li>
    </ul>
  </li>
</ul>

ドロップダウンのタブについても、基本的な構造は変わりません。

まず、ulタグでclass『nav nav-tabs』を設定。

ドロップダウンリストの各項目に属性「data-bs-toggole」に『tab』を設定し、かつ、href属性にタブ内容領域のidをシャープ（#）で設定してください。

縦のタブ

<div class="d-flex align-items-start">
  <div
    class="nav flex-column nav-pills me-3"
    id="v-pills-tab"
    role="tablist"
    aria-orientation="vertical"
  >
    <button
      class="nav-link active"
      id="v-pills-home-tab"
      data-bs-toggle="pill"
      data-bs-target="#v-pills-home"
      type="button"
      role="tab"
      aria-controls="v-pills-home"
      aria-selected="true"
    >
      ホーム
    </button>
    ...
</div>

Bootstrapのクラス『d-flex』と『flex-column』を利用すれば、縦並びのタブ領域を生成できます。

Javascriptでタブ切り替え

Javascriptを使って「show()」メソッドを呼び出せば、タブクリック以外でもタブの切り替えが可能になります。

show

<nav class="nav nav-pills" id="myTab8">
  <a class="nav-link"> ホーム</a>
  <a class="nav-link active" >プロフィール</a>
  <a class="nav-link" id="contactTab8"  data-bs-target="#contact8">お問い合わせ</a> 
  <button class="btn  btn-info" onclick="showContactTab();">お問い合わせ表示</button>
</nav>
<div class="tab-content" id="myTabContent8">
  <div class="tab-pane fade" id="home8">
    ホーム
  </div>
  <div class="tab-pane fade  show active" id="profile8">
    プロフィール
  </div>
  <div class="tab-pane fade" id="contact8">
    お問い合わせ
  </div>
</div>
<script>
  var lastTabEl = document.getElementById('contactTab8');
  var lastTab = new bootstrap.Tab(lastTabEl);
  function showContactTab() {
    lastTab.show();
  }
</script>