タブ機能はHTML＋CSSだけで作成可能。JavaScriptは不要
ページ移動せずに表示内容を切り替えられるタブ機能(タブボックス)は、様々なウェブサイトでよく使われています。タブの切り替え処理にはJavaScriptなどのスクリプトが使われることも多いでしょうが、CSS3の記述方法を使えばHTML＋CSSだけで実現でき、スクリプトは不要です。本記事では、下図のような構成のタブ機能を例にして、HTML＋CSSだけで作る方法をご紹介いたします。
HTML＋CSSだけでタブ機能を作る
タブ部分は、標準では灰色で表示されています。タブにマウスポインタを載せると色が緑色に変化し、クリックして選択状態にすると黄色に変わります。タブの選択状態に合わせて、タブの下にあるボックス(パネル)の表示内容も切り替わります。これらの処理はすべてHTML＋CSSで実現しており、JavaScriptは使っていません。
タブにマウスポインタを載せると色が変化し、クリックするとタブに対応する本文が切り替わる
実際にお使いのブラウザで動作を試してみたい場合は、サンプルページ「HTML＋CSSだけで作る色が変化するタブ機能の例」をご覧下さい。上図のように、タブが3つあるサンプルを掲載しています。最初は左端のタブが選択済みの状態です。選択されていないタブはすべて灰色で表示されるため、選択されているタブがどれなのかが明確に分かります。
今回は、選択中のタブの色を変化させることで「どのタブが選択中なのか？」を明確に分かるようにしたタブ機能を、スクリプト不要のHTML＋CSSだけで作る方法をご紹介いたします。
【この記事の目次】
- なぜJavaScript不要のHTML＋CSSだけでタブ機能が作成可能なのか (p.1)
- HTML＋CSSだけで切り替えられるタブを作る方法 (p.2)
- 選択中のタブに対応するボックス(パネル)だけを表示する方法 (p.3)
- ソースのまとめ (p.4)
なぜJavaScript不要のHTML＋CSSだけでタブ機能が作成可能なのか
タブのようにユーザの操作で表示が切り替わる機能は、一見するとJavaScriptを使わないと実現できなさそうに思えます。しかし、CSS3の記述方法を使えばHTML＋CSSだけで作成可能です。そのキーになるのは下記の2点です。- HTMLのラジオボタン：複数の項目群の中で常に1つだけを選択状態にできる
- CSS3の「:checked疑似クラス」：チェックが入っている要素だけを装飾できる
ラジオボタンとチェックボックスは何かを選択する定番のインターフェイス
ラジオボタンを利用してタブ機能を作るには、チェックが入っている状態の要素だけに限定して装飾できる「:checked疑似クラス」の存在がとても重要です。この:checked疑似クラスは、CSS3で追加された仕様です。
この「ラジオボタンの仕様」と「:checked疑似クラス」を組み合わせてタブ機能を実現する方法について、その仕組みを以下に解説いたします。
ラジオボタンの仕様で作るタブ機能の仕組み
本記事で作成するタブ機能は、実は下図のような仕組みで動いています。各タブの左隣にラジオボタンが表示されていることがお分かり頂けるでしょう。完成形では、これらのラジオボタンはCSSで非表示にしています。
タブの切り替えにはラジオボタンの仕様を利用している
■HTMLソースでは「ラジオボタン」＋「ラベル」のセットになっている
タブに見えている部分は、実は「ラベル」で作ってある
チェックの入っているラジオボタンに対応するラベル(＝タブ)だけが、選択状態用のデザインで表示されます。この「選択状態のときにだけ装飾を切り替える」という方法が、CSS3の「:checked疑似クラス」です。
■ラジオボタンの仕様が、スクリプトを不要にしている
ラジオボタンは、複数の選択肢から1つだけしか選択できない仕様です。したがって、ラジオボタンの選択を切り替えると、タブも切り替わるように見えます。この仕様が、スクリプト不要でタブ機能を実現できる理由です。仕組みが分かりやすいように、あえてラジオボタンを見せた状態で表示確認したい場合は、サンプルページ「HTML＋CSSで作るタブ機能の仕組み」をご覧下さい。
ラジオボタンを非表示にすると、タブ機能らしく見える
タブのように見せている部分は「ラジオボタンのラベル」なので、ラジオボタンそのものを非表示にすれば、冒頭の例のようにタブ機能らしく見せられます。
これが、ラジオボタン(HTML)と:checked疑似クラス(CSS3)を活用することで、スクリプトを使わずにタブ機能を作る方法の概要です。実際にタブとして活用可能な状態にするには、これに加えて、
- 選択中のタブに対応する本文だけを表示する方法 (＝タブの中身を作る方法)
- 本文部分とタブ部分の境目をなくす装飾 (＝タブを選択中のように見せる方法)
の2点が必要です。これらもHTML＋CSSで実現できます。それぞれの作成方法は、これ以降のページで順にご紹介いたします。
それでは次のページから、ラジオボタン(HTML)と:checked疑似クラス(CSS3)を使ってタブ機能を作る具体的な方法を見ていきましょう。
