CSSだけでできる！JavaScript不要のタブ切り替え実装方法

「タブ切り替え」と聞くと、多くの方がまずJavaScriptを使った実装を思い浮かべるかもしれません。
ですが実は、CSSだけでもシンプルなタブUIを作ることができます。

この記事では、HTMLとCSSだけで完結するタブ切り替えUIの作り方を紹介します。
 
* 用途によってはJavaScriptでの実装が適しているケースもあります。
　気になる方は、先に「JavaScriptでの実装が向いているケース」の項目をチェックしてみてください。

サンプルコード

JavaScriptを使わなくても、<input type="radio"> と <label> を組み合わせることで、CSSだけでタブ切り替えが実現できます。
以下はそのサンプルです。
 

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

ポイント解説

・タブ切り替えの基本構造
　初期状態ではすべてのコンテンツを非表示にし、選択されたタブ（＝チェックされたラジオボタン）に対応するコンテンツだけを表示する仕組みです。
・input type=”radio” と label を使う理由
　ラジオボタンには「複数の中から1つを選択する」という特性があり、選択中のタブを識別するのに最適です。

サンプルコード（:has()疑似クラスを使った実装）

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

※ただし、:has()に対応していない古いブラウザ（例：古いSafariなど）では動作しないため、互換性が必要な場合は前述の方式を使いましょう。
 

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

ポイント解説

・:has(:checked) によるスタイル制御
:has() を使うことで、「チェックされた input を含む親要素」にスタイルを適用し、対応するタブコンテンツを表示できます。

・order: -1 を使った表示順の調整
通常の並びでは、タブの中身（div）が先に表示されるため、CSSの order プロパティでラベルを先に見せるようにしています。

JavaScriptでの実装が向いているケース

CSSだけでもいろいろなタブUIに対応できますが、次のようなケースではJavaScriptの方が向いています。

• URLのハッシュ（例：about.html#tab2）で特定のタブを開きたい
• 初期表示のタブを動的に変更したい
• サイドメニューとの連動や「戻る」ボタン対応など、複雑な挙動に対応したい

まとめ

CSSだけで実装できるタブ切り替えUIは、軽量かつシンプルで、学習目的にもぴったりです。
動作が軽いため、パフォーマンスを重視したい場面でも活躍します。

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