【Bootstrap】タブメニューの基本的な作成方法|コピペ可能

  • このエントリーをはてなブックマークに追加

タブを利用するとスッキリとしたレイアウトを作成することができ、表示内容が多い場合には有効なレイアウト方法です。Bootstrapを利用すると、簡単にタブレイアウトを再現することができます。基本的な利用方法をサンプルコードを提示しながら説明していきます。

  1. 下準備:タブ部分
  2. 下準備:コンテンツ部分
  3. タブで表示コンテンツを切り替え

 1. 下準備:タブ部分

ブロック要素とインライン要素、インラインブロック要素の説明をタブで切り替えられるUIを作成します。下準備としてタブ部分をBootstrapで用意されている「nav」を作成します。

●View(Html)

作成したタブは以下のようになります。デフォルトでblock要素のタブが選択されるように「active」クラスを付けました。

 2. 下準備:コンテンツ部分

ブロック要素とインライン要素、インラインブロック要素の説明部分を作成します。詳細な説明部分は省略しています。

●View(Html)

画面内に説明コンテンツが全て表示されます。今回のようにコンテンツ要素が多い場合は、画面をスクロールする必要があり、見にくくなってしまいます。

 3. タブで表示コンテンツを切り替え

タブを利用すればスッキリとしたレイアウトに変更することができます。Bootstrapを利用してタブレイアウトを実装します。

■ナビゲーション部分:Bootstrap

role=”tablist” タブをまとめている親要素に指定
role=”nav-item nav-link active” ナビゲーション要素:activeで初期選択
id=”○○” ナビゲーション要素:表示するコンテンツ部分と紐付けのため(コンテンツ要素のaria-labelledbyと同じ値)
data-toggle=”tab” ナビゲーション要素
href=”#△△ ナビゲーション要素:表示するコンテンツ部分と紐付けのため(コンテンツ要素のidと同じ値)
role=”tab” ナビゲーション要素:タブであることを指定
aria-controls=”△△” ナビゲーション要素:表示するコンテンツ部分と紐付けのため(コンテンツ要素のidと同じ値)
aria-selected=”true” ナビゲーション要素:初期で選択されたいる場合はtrue

●ナビゲーション部分:View(Html)

■コンテンツ部分:Bootstrap

class=”tab-content” コンテンツ要素をまとめる親要素に指定
class=”tab-pane” コンテンツ要素に指定
class=”fade” デフォルトでコンテンツ領域を非表示にする
class=”show active” デフォルトでコンテンツ領域を表示する
id=”△△” タブと紐付けるため指定する必要がある
role=”tabpanel”
aria-labelledby=”○○” タブと紐付けるため(タブ要素のidと同じ値)

●コンテンツ部分:Viwe(Html)

作成完了したタブレイアウトは以下のようになります。タブクリックで要素の説明部分の表示を切り替えることができ、スッキリさせることができます。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*