タブ切り替えUI

解説

これは、上のタブを押すと対応する内容（パネル）に表示が切り替わる定番の UI です。各タブには data-panel で表示先のパネル ID を持たせ、クリックすると全タブの選択状態を解除してから押されたタブだけを is-active にし、対応するパネルを表示します。タブには role="tab" と aria-selected、パネル側にも適切な役割を付け、支援技術にも今どこが選ばれているかが伝わる作りです。切り替えには transition が効いて色がなめらかに変わります。

使いどころ

• サービスを「Web制作／SEO／運用」のように分けて見せたいとき
• 製品の仕様・レビュー・FAQ を一画面でまとめたい場面
• 料金プランや事例を種類別に切り替えて比較させたいとき

タブとパネルを増やすときは、タブに表示先 ID を指定し、同じ ID のパネルを用意するだけです。色や角丸、間隔は CSS で調整できます。キーボードだけでも操作しやすくするには、左右キーでのタブ移動を加えるとさらに 親切です。表示されていないパネルは隠れているだけで DOM には残るため、内容は検索エンジンにも読まれます。第一タブを初期表示にしておくと、開いた瞬間に空白になりません。