Bootstrap 縦型タブ vertical tabs の作り方を完全解説 flex-columnでナビゲーションタブを実装する方法

1. Bootstrapの縦型タブとは何か

1. Bootstrapの縦型タブとは何か

Bootstrapは、見た目が整ったデザインを簡単に作れる便利な仕組みです。ナビゲーションタブは、ページの内容を切り替えるために使われる部品です。通常のタブは横方向に並びますが、縦型タブはメニューを縦に並べて表示します。

縦型タブは、管理画面、プロフィール編集画面、設定画面などでよく利用されます。縦方向にメニューが並ぶことで、画面の左側にメニュー、右側に内容を表示するレイアウトを作りやすくなります。

Bootstrapではflexboxという仕組みを利用してレイアウトを制御しています。flexboxとは、部品を横や縦に自由に並べることができる仕組みです。flex-columnを指定すると、並び方が縦方向になります。

初心者の方は、縦型タブを本棚に並んだ本のようにイメージすると分かりやすいです。本棚では本が上から下へ順番に並びますが、縦型タブも同じように上から下へメニューが並びます。

2. flex-columnの役割と基本構造

2. flex-columnの役割と基本構造

flex-columnはBootstrapで用意されているクラスです。クラスとは、見た目や配置を指定するための名前のことです。このクラスを指定すると、部品を縦方向に並べることができます。

通常のタブはnavクラスとnav-tabsクラスを組み合わせて作ります。縦型タブでは、さらにflex-columnを追加するだけで、横並びだったタブを縦並びに変更できます。

また、タブを押したときに内容が切り替わる仕組みを実現するためには、data-bs-toggleという属性を使います。これは、ボタンを押したときに画面を切り替えるための合図のようなものです。

タブと表示内容は、idという識別子で関連付けます。識別子とは、それぞれの部品に付ける名前のようなものです。同じ名前を使うことで、どのタブがどの内容を表示するかを決めることができます。

<div class="d-flex">
    <div class="nav flex-column nav-tabs">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab1">メニュー1</button>
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab2">メニュー2</button>
    </div>

    <div class="tab-content p-3 border">
        <div class="tab-pane fade show active" id="tab1">
            内容1を表示
        </div>
        <div class="tab-pane fade" id="tab2">
            内容2を表示
        </div>
    </div>
</div>

3. d-flexを使ったレイアウトの考え方

3. d-flexを使ったレイアウトの考え方

d-flexはflexboxを有効にするためのクラスです。これを指定することで、内部の部品を横方向に並べることができます。縦型タブでは、タブメニューと内容表示を横に並べるためにd-flexを使います。

flexboxは、机の上に物を並べるイメージで理解すると分かりやすいです。机の上に本とノートを横に置くように、タブメニューと内容表示を横に配置できます。

d-flexを指定しない場合は、部品は縦に並びます。しかし縦型タブでは、左にメニュー、右に内容という形にするため、横並びが必要になります。

<div class="d-flex">
    <div class="nav flex-column nav-pills me-3">
        <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#info">情報</button>
        <button class="nav-link" data-bs-toggle="pill" data-bs-target="#profile">プロフィール</button>
    </div>

    <div class="tab-content">
        <div class="tab-pane fade show active" id="info">
            基本情報の表示
        </div>
        <div class="tab-pane fade" id="profile">
            プロフィールの表示
        </div>
    </div>
</div>

4. nav-tabsとnav-pillsの違い

4. nav-tabsとnav-pillsの違い

Bootstrapにはnav-tabsとnav-pillsという二種類の見た目があります。nav-tabsは、ファイルの見出しのような形のタブです。一方、nav-pillsはボタンのように丸みのあるデザインになります。

機能としてはほとんど同じですが、見た目が違うため、用途やデザインに合わせて使い分けます。縦型タブでもどちらの形式でも実装できます。

初心者の方は、nav-tabsは書類の仕切り、nav-pillsは押せるボタンと考えると理解しやすくなります。

<div class="d-flex">
    <div class="nav flex-column nav-tabs">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#home">ホーム</button>
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#contact">連絡先</button>
    </div>

    <div class="tab-content p-3 border">
        <div class="tab-pane fade show active" id="home">
            ホーム画面の内容
        </div>
        <div class="tab-pane fade" id="contact">
            連絡先画面の内容
        </div>
    </div>
</div>

5. 幅を調整して縦型タブを見やすくする方法

5. 幅を調整して縦型タブを見やすくする方法

縦型タブでは、メニュー部分の幅を調整すると、より見やすい画面になります。Bootstrapではwidthを指定するクラスを使うことで簡単に幅を調整できます。

例えば、メニュー部分を固定幅にすると、内容部分の表示が安定します。設定画面や管理画面では、この方法がよく使われます。

幅を整えることは、本棚の棚板の幅を揃えることに似ています。棚板の幅がバラバラだと本が整理しにくくなりますが、幅が揃っていると見た目が整います。

<div class="d-flex">
    <div class="nav flex-column nav-pills border p-2" style="width:200px;">
        <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#menu1">商品</button>
        <button class="nav-link" data-bs-toggle="pill" data-bs-target="#menu2">注文</button>
        <button class="nav-link" data-bs-toggle="pill" data-bs-target="#menu3">顧客</button>
    </div>

    <div class="tab-content p-3 border flex-fill">
        <div class="tab-pane fade show active" id="menu1">商品管理画面</div>
        <div class="tab-pane fade" id="menu2">注文管理画面</div>
        <div class="tab-pane fade" id="menu3">顧客管理画面</div>
    </div>
</div>

6. 画像や説明文を組み合わせた実用的な縦型タブ

6. 画像や説明文を組み合わせた実用的な縦型タブ

縦型タブは文字だけでなく、画像や説明文を組み合わせることで、より分かりやすい画面を作ることができます。商品紹介やサービス紹介の画面では特に効果的です。

Bootstrapでは画像も簡単に配置できるため、タブの内容部分に画像を追加するだけで視覚的に分かりやすくなります。

<div class="d-flex">
    <div class="nav flex-column nav-tabs me-3">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#service1">サービスA</button>
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#service2">サービスB</button>
    </div>

    <div class="tab-content border p-3">
        <div class="tab-pane fade show active" id="service1">
            <img src="/img/sample150-100.jpg" class="img-fluid mb-2">
            <p>サービスAの説明内容</p>
        </div>
        <div class="tab-pane fade" id="service2">
            <img src="/img/sample150-100.jpg" class="img-fluid mb-2">
            <p>サービスBの説明内容</p>
        </div>
    </div>
</div>

7. 縦型タブを使うメリットと活用場面

7. 縦型タブを使うメリットと活用場面

縦型タブは情報を整理しやすく、ユーザーが迷わず操作できるというメリットがあります。特に項目数が多い場合は、横タブよりも縦タブの方が視認性が高くなります。

管理画面、会員情報画面、商品管理画面、設定画面などでは縦型タブが多く採用されています。縦方向に並ぶことで、どの項目を選択しているかが分かりやすくなるためです。

また、スマートフォン表示ではメニューを折りたたむなどの応用も可能です。Bootstrapはレスポンシブデザインという仕組みを備えており、画面サイズに合わせてレイアウトを変更できます。

縦型タブを理解することで、より実践的な画面設計ができるようになります。特に業務システムや管理画面の制作では、縦型タブの知識が役立ちます。

まとめ

まとめ

縦型タブは画面設計において重要な役割を持つ表示構造であり情報整理操作性向上画面理解向上に大きく貢献する機能である縦方向にナビゲーションを配置することで利用者は選択項目を視線移動だけで確認でき管理画面設定画面商品管理会員情報編集画面サービス紹介画面など多くの業務系画面で活用されている縦型タブを構築するためにはブートストラップのナビゲーション機能を理解しフレックスレイアウトを正しく利用することが重要になるフレックス構造は部品配置を柔軟に制御できる仕組みであり横方向配置縦方向配置中央配置など自由な画面構成を実現できる縦型タブではフレックスディスプレイを利用してメニュー領域と内容表示領域を横並びに配置しその内部でナビゲーションを縦方向に整列させることが基本となるフレックスコラムクラスを指定することで通常横方向に並ぶナビゲーションリンクを縦方向に変更できるため少ない記述で高度な画面構造を作成できる点が大きな利点となるまたナビゲーションタブは表示内容を切り替えるインターフェースとして利用され利用者が選択した項目に応じて内容領域を動的に変更する仕組みを持つこの切替処理はデータ属性を利用して実装され各タブボタンと内容表示領域を識別子で関連付けることで連動した画面制御が可能になる識別子を正しく設定することで誤動作を防止し安定した画面遷移を実現できるナビゲーションデザインにはタブ形式とピル形式が存在しタブ形式は書類管理を連想させる構造でありピル形式はボタン操作を強調する視覚表現を持つ利用目的や画面印象に応じて選択することで操作性と視認性を両立できる縦型タブではメニュー幅調整も重要な設計要素となるメニュー幅を一定に保つことで内容領域の表示が安定し利用者は画面構造を理解しやすくなる幅指定には固定幅指定や自動伸縮指定を利用でき管理画面など項目数が多い場合は固定幅が有効となるさらに内容領域には画像説明文章カード表示表形式情報など多様な要素を配置できるため情報表現の幅が広がる特に商品紹介やサービス説明では画像と説明文章を組み合わせることで利用者理解を促進できるレスポンシブ設計にも対応可能であり画面サイズに応じてメニュー折り畳みや表示位置変更を行うことで携帯端末でも快適な操作体験を提供できる縦型タブは単なる装飾ではなく情報整理導線設計操作効率向上利用者体験改善を実現する重要技術であり実務開発において頻繁に利用される基本構造を理解することで複雑な管理画面構築や多機能画面設計にも応用できるまた構造を分割して管理することで保守性再利用性も向上し長期的なシステム運用にも適した設計となる縦型タブの理解は現代的な画面設計技術習得に直結し利用者にとって分かりやすく操作しやすい画面を提供するための重要な基礎知識となるさらに縦型タブを活用することで情報分類階層構造設計利用者導線最適化視覚認識向上など多面的な利点を得ることができる業務システム開発においては画面操作回数削減作業効率改善入力ミス防止情報確認速度向上などの効果も期待できる縦型タブを構築する際は配置構造表示順序選択状態視覚表現内容連動処理など複数の要素を統合的に設計する必要があるため基本構造を確実に理解することが重要である縦型タブは画面情報を整理し利用者が迷わず目的操作を行える環境を実現するための有効な設計手法であり現代的な業務画面制作において欠かすことができない表示構造である

縦型タブの実践サンプルプログラム

<div class="d-flex">
<div class="nav flex-column nav-pills border p-2" style="width:220px;">
<button class="nav-link active" data-bs-toggle="pill" data-bs-target="#summary1">
<i class="bi bi-gear"></i> 設定管理
</button>
<button class="nav-link" data-bs-toggle="pill" data-bs-target="#summary2">
<i class="bi bi-people"></i> 利用者管理
</button>
<button class="nav-link" data-bs-toggle="pill" data-bs-target="#summary3">
<i class="bi bi-box"></i> 商品管理
</button>
</div>

<div class="tab-content p-3 border flex-fill">
<div class="tab-pane fade show active" id="summary1">
<img src="/img/sample150-100.jpg" class="img-fluid mb-2">
<p>設定情報を管理する画面です</p>
</div>

<div class="tab-pane fade" id="summary2">
<img src="/img/sample120-120.jpg" class="img-fluid mb-2">
<p>利用者情報を管理する画面です</p>
</div>

<div class="tab-pane fade" id="summary3">
<img src="/img/sample150-100.jpg" class="img-fluid mb-2">
<p>商品情報を管理する画面です</p>
</div>
</div>
</div>