CSS のみで動くタブ切替

解説

このスニペットは、JavaScript を一切使わず CSS だけで動くタブ切替です。仕組みは隠した input type="radio" を 3 つ置き、ラベルをクリックすると対応するラジオが選択され、:checked と兄弟セレクタを組み合わせて、選ばれたタブのラベルだけ色を変え、対応するパネルだけ表示します。スクリプトが動かない環境でも確実に切り替わるのが、この実装の最大の利点です。下線でアクティブなタブを示すデザインも CSS で完結しています。

こんなときに便利

• 概要・機能・料金のように、内容を 3 つほどに分けて見せたいとき
• JavaScript を増やしたくない静的なサイトや LP
• 軽量さを重視したい情報整理ブロック

タブを増やすときは、ラジオ・ラベル・パネルを 1 組ずつ追加し、:checked 用のセレクタも対応する組み合わせを足します。アクティブ色や下線はラベルのスタイルで調整できます。注意点として、ラジオボタンを使う構造のため、キーボードでは矢印キーでの移動になります。読み上げ環境での体験を高めたい場合は、本格的なタブには role 属性を備えた JavaScript 版を検討する余地もあります。

使用例・適したシーン

• サービス紹介の切替表示
• 料金プラン比較
• FAQ カテゴリ切替