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

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

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

CSSだけでタブ切り替えを実装する基本構成

JavaScriptを使わなくても、
input type="radio" と label を組み合わせることで、CSSだけのタブ切り替えが可能です。

サンプルコード

以下は、HTMLとCSSのみで動作するタブ切り替えUIのサンプルです。

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

タブ切り替えの基本的な仕組み

基本的な考え方はとてもシンプルです。

• すべてのタブコンテンツを初期状態では非表示にする
• 選択されたタブ（＝チェックされたラジオボタン）に対応するコンテンツのみを表示する

「どのタブが選択されているか」をCSSで判定し、表示・非表示を切り替えています。

input type=”radio” と label を使う理由

radio ボタンには、複数の選択肢の中から1つだけを選べるという特性があります。

この特性を利用することで、

• 現在選択されているタブをCSSで判別できる
• JavaScriptを書かずに状態管理ができる

といったメリットがあります。

また、label を使うことで、見た目はボタンやタブ風にしつつ、内部的にはラジオボタンとして扱える点もポイントです。

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

CSSの :has() 疑似クラスを使うと、よりシンプルなHTML構造でタブ切り替えUIを実装できます。

サンプルコード（:has()を使った実装）

以下は、:has() を利用したタブ切り替えのサンプルです。

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

:has(:checked) によるスタイル制御

:has() を使うことで、
「チェックされた input を含む親要素」 に対してスタイルを適用できます。

これにより、

• 選択中のタブだけを強調表示する
• 対応するコンテンツだけを表示する

といった制御を、より直感的に記述できます。

order プロパティで表示順を調整する方法

HTMLの構造上、タブの中身（コンテンツ）が先に並ぶケースでは、見た目が不自然になることがあります。

その場合は、CSSの order プロパティを使うことで、

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

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

:has() を使う際の注意点（ブラウザ対応）

:has() 疑似クラスは非常に便利ですが、すべてのブラウザで完全に対応しているわけではありません。

特に、古いSafariなど一部のブラウザでは動作しない場合があります。

ブラウザ互換性が重要な案件では、前述の radio + label を使った方法を選ぶと安心です。

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

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

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

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

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

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

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

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