最新版で学ぶBootstrap 4入門
タブの作り方

Twitter社製のライブラリBootstrapを用いると、レスポンシブでモバイルファーストなUIを素早く作成できます。本記事では、最新バージョンBootstrap 4の入門編として、HTMLコーディングのみでタブを作る方法を紹介します。

▼ Bootstrap 4を使ったタブの作例。上部のタブにより猫の写真が切り替わる

▼ 操作の様子を動画で確認する

Bootstrapの基本単位はコンポーネント

Bootstrapの各要素の基本単位は「コンポーネント」 と呼ばれます。NASAの公式ページでは、ナビゲーションドロップダウンにといったBootstrapのコンポーネントが採用されています。

▼ NASAの公式ページで使用されているBootstrapコンポーネント

今回はタブ用コンポーネントを用います。

Bootstrapを使うための準備

BootstrapによるUI構築のために、CSSを読み込みます。HTMLコードの<head>タグ内に次のコードを記述します。

▼ Bootstrap用CSSの読み込み

<!doctype html>
<html lang="ja">
<head>
  <title>タイトル</title>
  <!-- Bootstrap用CSSの読み込み -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

タブの切り替え、モーダルの表示などの「動き」の制御をするには、JavaScriptが必要です。BootstrapのJavaScriptはjQueryとPopper.js(※)を一緒に使うことで動作します。

Popper.jsは、吹き出し表示を行うライブラリーです。Bootstrapではドロップダウンメニューやツールチップ表示に使われています

各JavaScriptを次のように読み込みましょう。

▼ Bootstrapに必要なJavaScriptの読み込み

<!-- 中略 -->
<head>
  <!-- 中略 -->
  <!-- Bootstrap用JavaScriptの読み込み -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

CDN経由以外でBootstrapを読み込む方法

CDN経由以外にもBootstrapを読み込む方法はあります。たとえばソースファイルで読み込む方法や、パッケージマネージャー(npmやYarn)を使う方法などです。プロジェクトの性質にあわせて読み込み方法を選択するとよいでしょう。詳しくは公式ドキュメントのDownloadページを参照ください。

タブ部分の実装

Bootstrapの使用準備が終わったので、タブの部分を実装しましょう。

▼ タブの部分

タブを囲う親要素にnavクラスとnav-tabsクラスを設定します。

▼ タブの親要素のためのHTMLコード

<ul class="nav nav-tabs">
</ul>

1つのタブはnav-itemクラスで設定します。<a>タグとnav-linkを使ってタブの中のリンクを設定します。

▼ タブ1つのHTMLコード

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link">タブ1</a>
  </li>
</ul>

4つのタブ用のHTMLコードを記述します。また、最初のタブを選択状態にするため1つ目のタブにactiveクラスを設定します。タブの全体コードは次のとおりになります。

▼ 4つのタブ用HTMLコード

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active">タブ1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link">タブ2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link">タブ3</a>
  </li>
  <li class="nav-item">
    <a class="nav-link">タブ4</a>
  </li>
</ul>

ここまでのコードの実行結果はキャプチャーのとおりです。

▼ 4つのタブを作成した状態

4枚の写真部分の実装

続いて、タブを押したときに切り替わる4枚の写真部分を実装しましょう。

▼ 4枚の写真部分

4枚の写真部分のHTML要素にtab-contentクラスを設定します。tab-contentというクラス名は、「タブで表示が切り替わるコンテンツ」というようなニュアンスです。

▼ 4枚の写真部分のHTML要素

<div class="tab-content">
</div>

今回は4つのタブがあり、それに応じて写真が4枚表示されます。各写真要素にtab-paneクラスを設定することで、表示の切り替わる要素として機能させます。具体的には次のようにHTMLコードを記述します。

▼ 4つの写真のうちの1つの写真

<div class="tab-pane">
  <img src="images/photo1.jpg" alt="" class="img-fluid" />
</div>

img-fluidクラスの指定は必須ではないですが、画像のレスポンシブ対応ができる便利なクラスなので覚えておくとよいでしょう

写真を4枚表示するためにHTMLコードを記述します。注意点として、tab-contentで指定される要素はデフォルトで非表示になっています。1枚目の写真は最初から表示させたいので、activeクラスを設定します。次のコードを参照ください。

▼ 4つの写真部分HTMLコード

<div class="tab-content">
  <div id="photo1" class="tab-pane active">
    <img src="images/photo1.jpg" class="img-fluid" alt="" />
  </div>
  <div id="photo2" class="tab-pane">
    <img src="images/photo2.jpg" class="img-fluid" alt="" />
  </div>
  <div id="photo3" class="tab-pane">
    <img src="images/photo3.jpg" class="img-fluid" alt="" />
  </div>
  <div id="photo4" class="tab-pane">
    <img src="images/photo4.jpg" class="img-fluid" alt="" />
  </div>
</div>

ここまでのコードの実行結果はキャプチャーのとおりです。

▼ ここまでのコードの実行結果

要素の周りに余白を設ける

ここまでのコードの実行結果を見ると、要素が画面左上に寄ってしまっています。要素の周りに適切な余白を設けましょう。Bootstrapではクラス1つで余白が設定できます(参考「Spacing · Bootstrap」)。今回は上下左右に規定の余白を設定するp-3クラスを用います。

<main class="p-3">
  <ul class="nav nav-tabs">
    <!-- 中略 -->
  </ul>

  <!--写真部分-->
  <div class="tab-content">
    <!-- 中略 -->
  </div>
</main>

余白が設定された状態のキャプチャーは次のとおりです。

▼ 要素の余白が設定された

タブ切り替え機能の実装

さて、見た目は実装できましたが、タブを押しても何の反応もありません。「タブを押した時に、対応した写真を表示する」という処理を実装していないためです。本来ならJavaScriptコードを書いて実装するところですが、BootstrapではHTMLのクラス設定だけで切り替え機能を実装できます

まずはタブ側の設定です。それぞれのリンクにhref属性を使って「どのIDのコンテンツを表示するか」という設定をします。そして、タブ切り替え機能を有効にするためdata-toggle="tab"を指定します。

▼ タブの切り替えのためのコード

<ul class="nav nav-tabs">
   <li class="nav-item">
     <a href="#photo1" class="nav-link" data-toggle="tab">タブ1</a>
     <!--(省略)-->

続いて写真側の設定を行います。id属性を使って各写真に固有のIDを設定し、タブを押した時に切り替える仕組みを作ります。

▼ 写真のためのコード

<div class="tab-content">
  <div id="photo1" class="tab-pane active">
    <!--(省略)-->
  </div>
</div>

各設定を、タブ・写真4つそれぞれに設定することで、切り替え機能は完成します。

実行結果は次のとおりです。

▼ タブの切り替えが有効化された

完成コード

本記事で作成した全体のコードを確認しましょう。CSS・JavaScriptのコードを記述することなく、タブ機能が実装できました。

▼ 全体コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8"/>
  <title>サンプル</title>
  <!-- Bootstrap用CSSの読み込み -->
  <link
    rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  />
  <!-- Bootstrap用JavaScriptの読み込み -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<main class="p-3">
  <!-- 4個分のタブ -->
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a href="#photo1" class="nav-link active" data-toggle="tab">タブ1</a>
    </li>
    <li class="nav-item">
      <a href="#photo2" class="nav-link" data-toggle="tab">タブ2</a>
    </li>
    <li class="nav-item">
      <a href="#photo3" class="nav-link" data-toggle="tab">タブ3</a>
    </li>
    <li class="nav-item">
      <a href="#photo4" class="nav-link" data-toggle="tab">タブ4</a>
    </li>
  </ul>

  <!-- 写真部分 -->
  <div class="tab-content">
    <div id="photo1" class="tab-pane active">
      <img src="images/photo1.jpg" class="img-fluid" alt=""/>
    </div>
    <div id="photo2" class="tab-pane">
      <img src="images/photo2.jpg" class="img-fluid" alt=""/>
    </div>
    <div id="photo3" class="tab-pane">
      <img src="images/photo3.jpg" class="img-fluid" alt=""/>
    </div>
    <div id="photo4" class="tab-pane">
      <img src="images/photo4.jpg" class="img-fluid" alt=""/>
    </div>
  </div>
</main>
</body>
</html>

関連記事ではデザインのカスタマイズ方法を紹介します

本記事ではBootstrapの入門編として、HTMLコードのみでタブ機能を実装しました。しかし、実際の案件でタブ機能を使用する場合は、デザインのカスタマイズが必要になります。関連記事「webpack 4入門 - Bootstrapをバンドルする方法」では、webpackやSassなどのフロントエンド技術と連携してBootstrapのデザインをカスタマイズする方法を紹介します。あわせて参照くださいませ。