TECH BLOG

マークリープス技術ブログ

open

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

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

よく読まれている関連記事

関連最新記事