タブコンポーネント
クリックで切り替わる標準タブ UI。aria-selected 等のアクセシビリティ属性付き。サービス紹介・料金プラン・FAQ カテゴリ切替に。
解説
タブコンポーネントは、UI コンポーネントカテゴリの「タブ」に分類される実装パターンです。CSS と JavaScript の組み合わせで構成され、難易度は中級レベル。
クリックでパネルを切り替えるタブ UI。role="tablist" / aria-selected を持つアクセシビリティ対応実装。
標準的なタブ切替コンポーネントです。role="tablist" や aria-selected 属性でスクリーンリーダー対応も配慮しています。サービス紹介・料金プラン・FAQ カテゴリ切替などで頻出。
仕組み
下記コードタブから HTML / CSS / JS をそれぞれ確認・コピーできます。プレビュー領域では実際の動作をその場で確認可能です。
JavaScript 部分は vanilla（プレーン）JS で書かれており、jQuery / React / Vue いずれの環境にも持ち込めます。
WAI-ARIA 属性を活用したアクセシブルな実装です。スクリーンリーダー・キーボード操作にも配慮しています。
注意点 / カスタマイズ時のポイント
JS なし版が欲しい場合は [utility-tabs-css-only](/snippets/utility-tabs-css-only.html)（ラジオボタン + :checked 兄弟セレクタ）を使ってください。
使用例・適したシーン
- サービス紹介の切替表示
- 料金プラン比較
- FAQ カテゴリ切替
よくある質問
URL ハッシュと連動させたい
window.location.hash の読み書き処理を追加すれば、#tab-1 のような URL でタブを直接開けるようになります。SEO 的にもベター。このスニペットは商用利用できますか？
はい。moatway がオリジナルで制作したスニペットは商用・個人問わず自由にご利用いただけます。クレジット表記も不要です。
そのまま貼り付ければ動きますか？
はい。HTML / CSS / JS タブのコードをそれぞれ自分のファイルにコピーして貼り付ければ動きます。クラス名が他の CSS と衝突しないよう、必要に応じてリネームしてください。
ブラウザ対応は？
最新 2 世代の Chrome / Safari / Firefox / Edge で動作確認しています。Internet Explorer はサポート対象外です。
jQuery でも書けますか？
この実装は vanilla JavaScript で書いています。jQuery が必要であれば
document.querySelector を $() に置き換える程度で動作しますが、近年は jQuery を使わない方が軽量で推奨されます。