タブ
Tabs並列するコンテンツパネルを、見出しの切り替えで同じ領域に表示し分けるUI。
タブは並列コンテンツの切り替えに使います。
選択中タブに aria-selected=true。
矢印キーでもタブ間を移動できます。
○ 使う場面
- 同格のコンテンツを2〜6個程度で切り替えるとき
- ページ遷移せずに文脈を保って見比べさせたいとき
× 避ける場面
- 項目が多すぎて1行に収まらないとき(→ドロップダウンや一覧を検討)
- 順序のある手順を進ませたいとき(→ステップバー)
別名
ナビゲーションタブ、タブ切り替え
近縁種との比較
「タブ」という呼び名は、紙のファイルフォルダの背表紙に付いた見出し用の小さな出っ張り(インデックスタブ)に由来するとされる。差し替え式フォルダで見出しをめくって書類を探す動作が、画面上で見出しを切り替えてコンテンツを表示し分ける挙動と重なることから、この呼称が定着したと言われる。
| 近縁種 | 違い・使い分け |
|---|---|
| セグメントボタン | セグメントボタンは見た目が似ているが、コンテンツの切り替えではなく単一の設定値・状態を選ばせるための入力部品である点が異なる。 |
| アコーディオン | アコーディオンはすべてのパネルを同じ縦方向に積んで開閉するため複数パネルを同時に開いたまま比較でき、省スペース性よりも一覧性を優先したいときに向くのに対し、タブは選択中の1パネルしか表示しないため横幅に余裕があり並列項目の切り替えに絞りたい場面に適する。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション