Webサイトの情報整理に便利な「タブ」UIとは？
Webサイト制作において、「タブ」UI（ユーザーインターフェース）は、限られたスペースに多くの情報を整理して表示するための非常に便利な機能です。ページを遷移することなく、ユーザーがクリック操作で表示したいコンテンツを瞬時に切り替えられます。
例えるなら、「デジタルのファイリングキャビネット」のようなものです。見出し（タブ）をクリックするだけで、関連する書類（コンテンツ）の束がさっと切り替わるイメージですね。
この記事では、Web制作でよく使われる「タブ」UIの代表的な実装方法を2つ、サンプルコードと合わせてご紹介します。
方法1：jQuery（JavaScript）を使用して実装する方法
一つ目は、HTML、CSS、そしてJavaScriptライブラリのjQueryを使って実装する方法です。Web制作では古くから使われている定番の手法です。
この方法の基本的な仕組みは、タブのクリックイベントをjQueryで検知し、対応するコンテンツに特定のCSSクラス（例えば「.is-active」など）を付けたり外したり（切り替えたり）することで、表示・非表示を制御するものです。
メリットは、複雑な動作やアニメーションも比較的直感的に実装できる点です。一方、jQueryライブラリ本体を読み込む必要があるため、CSSのみの方法と比べるとページの読み込み速度にわずかながら影響が出る可能性があります。
方法2：HTMLとCSSのみで実装する方法
二つ目は、JavaScriptやjQueryを一切使わず、HTMLとCSSのみでタブ切り替えを実現する方法です。近年、CSSの進化によって可能になった、よりモダンで軽量なアプローチと言えます。
この方法では、HTMLの<input type="radio">（ラジオボタン）と、それに対応する<label>タグ、そしてCSSの:checked疑似クラスを巧みに組み合わせて使用します。
仕組みとしては、タブ部分を<label>タグで作成し、実際には非表示にしたラジオボタンと連携させます。ユーザーがタブ（<label>）をクリックすると、対応するラジオボタンが「チェックされた状態（:checked）」になります。CSS側では、その:checkedの状態をトリガーにして、兄弟要素や子孫要素のタブコンテンツ（divなど）の表示・非表示を切り替えるのです。
メリットは、JavaScriptが不要なため動作が非常に軽量であることです。一方、HTMLの構造がラジオボタンとラベルの関係性に依存するため、少し工夫が必要になる点がポイントです。
（以下のサンプルでは、仕組みが分かりやすくなるよう、本来はdisplay:none;などで隠すラジオボタンをあえて表示させています）
まとめ：どちらの方法を選ぶべきか？
どちらの実装方法にも一長一短があります。Webサイトの要件に合わせて使い分けるのが良いでしょう。
- 手軽さ・軽量さを優先するなら → CSSのみの方法
- 複雑なアニメーションや、タブ以外の要素との連携も考慮するなら → jQuery（JavaScript）の方法
ぜひ両方のテクニックをマスターして、あなたのWebサイト制作に役立ててください。
よくある質問（FAQ）
Q1. タブを実装する際、アクセシビリティ（A11y）で気をつけることは何ですか？
A1. 非常に重要な視点です。キーボード操作（Tabキーでの移動、Enter/Spaceキーでの決定）ができるようにすること、スクリーンリーダーがタブの役割（role="tab"）や選択状態（aria-selected）を正しく認識できるようにWAI-ARIA属性を適切に設定することが推奨されます。jQueryを使う方法の方が、こうした細かい制御はしやすい場合があります。
Q2. CSSのみの方法とjQueryの方法、SEO（検索エンジン最適化）に違いはありますか？
A2. どちらの方法でも、コンテンツ自体はHTMLに記述されているため、検索エンジンは問題なく内容をクロール（認識）できます。ただし、ページの表示速度（Core Web Vitals）もSEOの評価指標の一つです。CSSのみの方法はJavaScriptの読み込みが不要なため、表示速度の面でわずかに有利になる可能性があります。
Q3. 今回紹介された方法以外に、タブを実装する方法はありますか？
A3. はい、あります。最近のWeb制作では、jQueryを使わず、ライブラリに依存しない純粋なJavaScript（通称「Vanilla JS」）で実装するケースも増えています。また、ReactやVue.jsといったJavaScriptフレームワークを使用する場合は、フレームワークの機能や専用のコンポーネントライブラリを使ってタブを実装するのが一般的です。
