CSS のみで実装するタブ UI
JavaScript を一切使わず、CSS だけで切り替わるタブUIです。仕組みは隠したラジオボタンと label の組み合わせ。ラベルをクリックすると対応するラジオが選択状態になり、 input:checked と兄弟セレクタを使って該当するパネルだけを表示します。
解説
JavaScript を一切使わず、CSS だけで切り替わるタブUIです。仕組みは隠したラジオボタンと label の組み合わせ。ラベルをクリックすると対応するラジオが選択状態になり、input:checked と兄弟セレクタを使って該当するパネルだけを表示します。同じ name でグループ化しているため、常にひとつのタブだけが開きます。
製品の概要・仕様・FAQの出し分け、料金プランの比較、説明セクションの整理など、限られた領域に情報を切り替えて詰めたい場面に向いています。スクリプト依存がないので読み込みが速く、JavaScript が無効でも壊れません。
調整とアクセシビリティ
- 選択中のタブの下線色は
input:checked+labelのborder-colorで変えられます。 - タブを増やす場合はラジオとラベル、対応パネルをセットで追加します。
- キーボード操作で扱いやすくしたい場合は、ラジオを完全に消さずフォーカスが当たるよう工夫すると、より多くの利用者に優しくなります。
使用例・適したシーン
- サービス紹介の切替表示
- 料金プラン比較
- FAQ カテゴリ切替
よくある質問
本当にJavaScriptなしで動きますか。
動きます。ラジオボタンのchecked状態とCSSの兄弟セレクタだけでパネルを出し分けているため、スクリプトは一切必要ありません。
タブを増やすにはどうしますか。
ラジオボタンとラベル、対応するパネルを1組ずつ追加し、ラジオは既存と同じname、idとforとパネルのdata-pを新しい値で揃えてください。