【コピペOK】JavaScriptで作るタブ切り替えUI｜シンプル実装からアクセシビリティ対応まで解説

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

Webサイトでよく見かける「タブ切り替えUI」。

サービス説明や料金表など、複数の情報をコンパクトにまとめて切り替え表示できるので、ページをすっきりさせつつユーザーの操作性を高められる便利なパターンです。

ただ、「どうやって実装するの？」と悩む方も多いのではないでしょうか。

この記事では、シンプルなHTML＋CSS＋JavaScriptで作れるタブ切り替えUIを、初めての方でも理解しやすいよう段階的に解説していきます。

基本構造マークアップ

タブ切り替えのポイントは「タブボタン」と「コンテンツ」を分けて用意すること。
クリックされたタブに応じて、表示コンテンツを切り替える処理を追加します。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

アクセシビリティを意識した改善

キーボード操作やスクリーンリーダー対応のため、role="tablist" や aria-selected 属性を付与するとより親切です。

<div class="tab-buttons" role="tablist">
  <button role="tab" aria-selected="true" class="tab active" data-tab="1">概要</button> 
  <button role="tab" aria-selected="false" class="tab" data-tab="2">料金</button> 
  <button role="tab" aria-selected="false" class="tab" data-tab="3">アクセス</button>
</div>

まとめ

satokotadesignキャンペーン実施中！