CSSだけでタブ切り替えを実装する方法｜JavaScript不要のUIサンプル付き

HTMLとCSSだけで完結する、JavaScript不要のタブ切り替えUIの実装方法を紹介します。
シンプルな構成で実装できるため、学習用はもちろん、軽量なUIを作りたい場合にもおすすめです。

※用途によってはJavaScriptでの実装が適しているケースもあります。
該当する内容については、後半の「JavaScriptで実装した方がよいケース」」を参考にしてください。

実装の仕組み（radioボタン + label + :checked）

今回の実装では、次のような仕組みを使います。

1. radioボタンを複数設置（同じname）
2. labelクリックで選択状態を切り替え
3. :checked を使って該当コンテンツのみ表示

:checked は「フォーム要素が選択状態のとき」に適用されるCSSの擬似クラスです。

• 未選択 → 非表示
• 選択中 → 表示

という制御をCSSで行います。

デモコード

See the Pen CSSのみでタブ切り替え by mkl may (@mkl-may) on CodePen.

ポイントは以下の部分です。

radioは「複数の中から1つだけ選択できる」という特性があります。
この性質を利用することで、JavaScriptなしで状態管理が可能になります。

実装時の注意点（アクセシビリティ）

radioを display: none; で完全に消してしまうと、スクリーンリーダーやキーボード操作で認識できなくなる可能性があります。

そのため、視覚的にのみ隠す（visually-hidden手法）実装がおすすめです。

:has()疑似クラスを使ったタブ切り替え実装

:has() を使うと、「チェックされた input を含む親要素」に対してスタイルを適用できます。
これにより、よりシンプルなHTML構造でタブ切り替えが可能になります。

See the Pen CSSのみでタブ切り替え（:has()疑似クラス利用） by mkl may (@mkl-may) on CodePen.

仕組みは以下のとおりです。

• :has(:checked) で選択中のタブを判定
• 選択中のラベルを強調表示
• 対応するコンテンツのみ表示

また、HTML上でコンテンツが先に並ぶ場合は、order プロパティを使って

• タブラベルを上部に表示
• コンテンツを下に配置

といったレイアウト調整も可能です。

※ただし、:has() は一部の古いブラウザでは未対応の場合があります。
互換性が重要な案件では、radio + label 方式を選ぶと安心です。

JavaScriptで実装した方がよいケース

CSSだけでも多くのタブUIは実装できますが、次のような場合はJavaScriptを使った方が適しています。

• URLのハッシュ（例：#tab2）で特定のタブを直接開きたい場合
• 初期表示のタブを動的に変更したい場合
• 戻るボタンやサイドメニューなど、他UIと連動させたい場合

要件が複雑になるほど、JavaScriptによる制御の方が柔軟に対応できます。

まとめ｜CSSとJavaScriptを使い分けよう

CSSだけで実装できるタブ切り替えUIは、軽量でシンプル、学習用途にも最適な手法です。

一方で、動的な制御やURL連動が必要な場合は、JavaScriptを併用することで、より使いやすいUIを実現できます。

用途に応じてCSSとJavaScriptを適切に使い分けることが、より良いUI開発につながります。