ナビゲーション / 同じ対象の異なる表示
Tabs
同じ対象の表示を切り替えます。JavaScriptなしでは、すべての内容を表示します。
基本的な使い方
HTML
意味に沿ったHTMLにクラスを付けます。
CSS
文書にスタイルシートを読み込みます。
HTML
<div class="tabs" data-dd-tabs>
<div class="tablist" role="tablist" aria-label="出力形式の作例">
<button class="tab" role="tab" id="sample-html-tab" aria-controls="sample-html" aria-selected="true">HTML</button>
<button class="tab" role="tab" id="sample-css-tab" aria-controls="sample-css" aria-selected="false">CSS</button>
</div>
<section class="tabpanel" role="tabpanel" id="sample-html" aria-labelledby="sample-html-tab"><h3 class="tabpanel-title">HTML</h3><p>意味に沿ったHTMLにクラスを付けます。</p></section>
<section class="tabpanel" role="tabpanel" id="sample-css" aria-labelledby="sample-css-tab"><h3 class="tabpanel-title">CSS</h3><p>文書にスタイルシートを読み込みます。</p></section>
</div>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
data-dd-tabs | タブのグループ。 |
.tablist / .tab | タブの並びと各ボタン。 |
.tabpanel / .tabpanel-title | 内容と、印刷時やJavaScriptなしで読むための見出し。 |
aria-controls / aria-labelledby | 重複しないIDで各ボタンとパネルを結びます。 |
使い方の注意
初期HTMLで非アクティブなパネルにhiddenを付けないでください。矢印キー・Home・Endで移動できます。印刷では全パネルを表示します。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。