Bootstrap5入門｜タブとコンテンツ領域の関連づけをやさしく解説（aria-controls・aria-selected）

タブとコンテンツ領域の関連づけ：aria-controls/aria-selected解説

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapのタブを使うと、画面が切り替わるのは分かるんですが、中で何が起きているのか全然分かりません…」

先生

「タブは見た目だけでなく、画面の裏側で“どの内容を表示するか”をしっかり管理しています」

生徒

「aria-controlsとかaria-selectedって書いてあって、難しそうです…」

先生

「大丈夫です。仕組みを知れば、初めてパソコンを触る人でも理解できますよ」

1. Bootstrapのタブとは何かを超シンプルに理解しよう

Bootstrapのタブとは、画面の上にあるボタンをクリックすると、表示される内容が切り替わる仕組みです。ノートの見出しを切り替えるようなイメージで考えると分かりやすいです。Bootstrap5では、ナビゲーション、タブ、ピルといった部品を使って、誰でも簡単に切り替え画面を作れます。

2. タブとコンテンツは必ずセットで動いている

タブだけを置いても、実は何も起こりません。必ず「このタブを押したら、この内容を見せる」という対応関係があります。この対応関係を作るために使われるのが、idやaria-controlsといった属性です。属性とは、タグに追加で情報を書くための目印のようなものです。

3. aria-controlsの役割を日常の例えで理解する

aria-controlsは「このボタンは、どの内容を操作していますか？」を示すための情報です。テレビのリモコンで考えると、電源ボタンがテレビ本体を操作するのと同じ関係です。タブ側にaria-controlsを書くことで、対応するコンテンツを指定できます。


<ul class="nav nav-tabs">
    <li class="nav-item">
        <button class="nav-link active" aria-controls="home">ホーム</button>
    </li>
</ul>

<div id="home">
    <p>ホームの内容です</p>
</div>

ブラウザ表示

4. aria-selectedは「今どれを選んでいるか」の印

aria-selectedは、今どのタブが選ばれているかを示します。チェックマークが付いた状態を想像すると分かりやすいです。trueは選択中、falseは選ばれていない状態です。これは画面を読む支援技術にも大切な情報になります。


<button class="nav-link active" aria-selected="true">タブ1</button>
<button class="nav-link" aria-selected="false">タブ2</button>

ブラウザ表示

5. idとaria-controlsの正しいつなぎ方

aria-controlsには、表示したい内容のid名を書きます。そしてコンテンツ側には、同じ名前のidを付けます。これが一致していないと、タブを押しても正しく動きません。名前をそろえることが最大のポイントです。


<button class="nav-link" aria-controls="profile">プロフィール</button>

<div id="profile">
    <p>プロフィールの説明文です</p>
</div>

ブラウザ表示

6. タブが切り替わる流れを頭の中で追ってみよう

まず利用者がタブをクリックします。次にBootstrapがaria-selectedを切り替えます。そしてaria-controlsを見て、対応するコンテンツを表示します。この一連の流れを知るだけで、コードが急に読みやすくなります。

7. ピル表示でも仕組みはまったく同じ

ピルとは、角が丸い見た目のタブのことです。見た目が違うだけで、aria-controlsやaria-selectedの考え方は同じです。つまり、一度理解すれば、ナビゲーションでもタブでも応用できます。


<ul class="nav nav-pills">
    <li class="nav-item">
        <button class="nav-link active" aria-controls="setting" aria-selected="true">設定</button>
    </li>
</ul>

<div id="setting">
    <p>設定画面の内容です</p>
</div>

ブラウザ表示

8. aria属性があると何がうれしいのか

aria属性は、画面を見るのが難しい人のために、操作内容を正しく伝える役割があります。Bootstrap5が最初から用意しているのは、誰にとっても使いやすい画面を作るためです。難しく見えますが、実はとても親切な仕組みです。

まとめ

ここまで、Bootstrap5のタブ機能について、aria-controlsやaria-selectedといった属性を中心に、仕組みを一つひとつ確認してきました。 Bootstrapのタブは、見た目が切り替わるだけの便利機能ではなく、「どのタブが選ばれていて」「どのコンテンツを操作しているのか」を、HTMLの属性を使って明確に関連づけているのが特徴です。そのため、コードを読むときは、デザインよりもまず「タブ側」と「コンテンツ側」がどう結びついているかを見ることが大切になります。

特に重要なのが、aria-controlsとidの対応関係です。aria-controlsには、表示したいコンテンツのid名を書き、コンテンツ側には同じidを指定します。この名前が一致していることで、「このタブを押したら、この内容を表示する」という関係が成立します。名前が一文字でも違うと、正しく動かなくなるため、初心者のうちは特に注意が必要です。

また、aria-selectedは「今どのタブが選ばれているか」を示すための印です。 trueが設定されているタブは、現在表示されているコンテンツと結びついており、falseのタブは待機中の状態になります。この情報は、見た目だけでなく、画面読み上げ機能などを使う人にとっても非常に重要で、操作状況を正確に伝える役割を果たしています。

Bootstrap5では、これらのaria属性が最初から考慮されているため、正しい書き方を守るだけで、アクセシビリティに配慮した画面を作ることができます。難しそうに見える英語の属性名も、「操作している対象」「選ばれている状態」と日本語に置き換えて考えると、理解しやすくなります。初心者の方は、まずはサンプルコードを真似しながら、タブとコンテンツの対応関係を目で追う練習をするとよいでしょう。

タブとコンテンツの対応関係を復習するサンプル

以下は、今回学んだ内容をまとめたシンプルなサンプルです。 aria-controlsとid、aria-selectedの関係を意識しながら確認してみてください。


<ul class="nav nav-tabs">
    <li class="nav-item">
        <button class="nav-link active" aria-controls="tab-home" aria-selected="true">
            ホーム
        </button>
    </li>
    <li class="nav-item">
        <button class="nav-link" aria-controls="tab-profile" aria-selected="false">
            プロフィール
        </button>
    </li>
</ul>

<div id="tab-home">
    <p>ホーム画面の内容です</p>
</div>

<div id="tab-profile">
    <p>プロフィール画面の内容です</p>
</div>

ブラウザ表示

このように、タブ側のaria-controlsと、コンテンツ側のidが一致していることで、画面の切り替えが正しく行われます。実際のBootstrap5では、JavaScriptの処理も内部で動いていますが、基本となる考え方はこのHTMLの対応関係です。まずは仕組みを理解し、その上で公式ドキュメントや応用例を読むと、理解が一気に深まります。

先生と生徒の振り返り会話

生徒

「最初はaria-controlsやaria-selectedが何をしているのか全然分からなかったですが、タブとコンテンツをつなぐための目印だと考えると、すごく分かりやすくなりました」

先生

「その理解で大丈夫です。Bootstrapのタブは、見た目よりも裏側の対応関係が大切なんです。 idとaria-controlsをセットで見る癖をつけると、コードが自然と読めるようになりますよ」

生徒

「aria-selectedも、今どれが選ばれているかを示しているだけなんですね。英語が難しく見えて、身構えてしまっていました」

先生

「初心者の多くが同じところでつまずきます。でも意味が分かれば、アクセシビリティのために用意された、とても親切な仕組みだと分かります」

生徒

「これなら、タブだけでなく、ピル表示や他のナビゲーションにも応用できそうです」

先生