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開発につながります。