タブバー Tab Bar
コンテンツを複数のタブで切り替え表示する。情報整理に便利。
ライブデモ
概要のコンテンツがここに表示されます。
詳細な説明がここに表示されます。
ユーザーレビューがここに表示されます。
ソースコード
<div class="demo-tabs">
<div class="demo-tabs-header" role="tablist">
<button class="demo-tab active" role="tab" aria-selected="true" data-tab="tab1">概要</button>
<button class="demo-tab" role="tab" aria-selected="false" data-tab="tab2">詳細</button>
<button class="demo-tab" role="tab" aria-selected="false" data-tab="tab3">レビュー</button>
</div>
<div class="demo-tab-panel active" role="tabpanel" id="tab1">概要のコンテンツがここに表示されます。</div>
<div class="demo-tab-panel" role="tabpanel" id="tab2">詳細な説明がここに表示されます。</div>
<div class="demo-tab-panel" role="tabpanel" id="tab3">ユーザーレビューがここに表示されます。</div>
</div>.demo-tabs-header {
display: flex; gap: 0; border-bottom: 2px solid #e5e7eb;
}
.demo-tab {
padding: 10px 20px; border: none; background: none;
cursor: pointer; font-size: 14px; color: #666;
border-bottom: 2px solid transparent; margin-bottom: -2px;
transition: color 0.2s, border-color 0.2s;
}
.demo-tab:hover { color: var(--ui-primary); }
.demo-tab.active {
color: var(--ui-primary); border-bottom-color: var(--ui-primary);
font-weight: 600;
}
.demo-tab-panel {
display: none; padding: 20px 8px; font-size: 14px; color: #444;
}
.demo-tab-panel.active { display: block; }document.querySelectorAll('.demo-tab').forEach(tab => {
tab.addEventListener('click', function() {
document.querySelectorAll('.demo-tab').forEach(t => { t.classList.remove('active'); t.setAttribute('aria-selected','false'); });
document.querySelectorAll('.demo-tab-panel').forEach(p => p.classList.remove('active'));
this.classList.add('active');
this.setAttribute('aria-selected','true');
document.getElementById(this.dataset.tab).classList.add('active');
});
});AIプロンプト
Basic
タブバーをHTML/CSS/JSで作ってください。3つのタブがあり、クリックでコンテンツが切り替わります。
Custom
以下の仕様でタブバーを実装してください。 - 下線スタイルのアクティブインジケーター（スライドアニメーション付き） - プライマリカラー: #2563eb - タブにアイコン+テキスト表示 - レスポンシブ対応（モバイルではスクロール可能なタブ） - タブ切り替え時にフェードトランジション
Advanced
アクセシビリティ対応のタブバーを実装してください。 - role="tablist", role="tab", role="tabpanel" を適切に設定 - aria-selected, aria-controls, aria-labelledby を使用 - 矢印キーでタブ間を移動（左右キー） - Home/Endキーで最初/最後のタブに移動 - タブのフォーカスとアクティベーションを分離 - アニメーションはprefers-reduced-motion対応 - 動的にタブを追加・削除できる機能