タブ切り替えをHTMLとCSSで実装（JavaScriptなし／複数設置可）

この記事では、HTMLとCSSだけでタブ切り替えを自作する方法を紹介します。

タブ切り替えは、コンテンツを整理しユーザーが必要な情報に迅速にアクセスするために役立ちます。通常はJavaScriptを使って実装されますが、CSSだけでもシンプルなタブ切り替えを実現できます。

この記事を読めば、機能的なタブ切り替えを実装できますのでぜひご覧ください。

当記事のタブ切り替えは、『ものぐさWEBノート』さんのコードを流用させていただきました。

タブ切り替えの動作イメージ

初期状態ではタブ①が選択されているので（選択するタブは設定で変更可能）、タブ②、タブ③をクリックしてみてください。クリックすることで下部に表示されるコンテンツが切り替わります。

See the Pen タブ切り替え by はっちゃん (@hacchan) on CodePen.

この３タブの切り替えを作ります。

タブ切り替え（タブとコンテンツ）を作成するHTML

まず、基本的なHTMLの構造を見てみましょう。

<div class="tab-wrap">
 <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" />
 <label class="tab-label" for="TAB-01">タブ①</label>
    <div class="tab-content">
      コンテンツ①をここに表示する
    <!--/tab-content--></div>

 <input id="TAB-02" type="radio" name="TAB" class="tab-switch" />
 <label class="tab-label" for="TAB-02">タブ②</label>
    <div class="tab-content">
      コンテンツ②をここに表示する
    <!--/tab-content--></div>

 <input id="TAB-03" type="radio" name="TAB" class="tab-switch" />
 <label class="tab-label" for="TAB-03">タブ③</label>
    <div class="tab-content">
      コンテンツ③をここに表示する
    <!--/tab-content--></div>
<!--/tab-wrap--></div>

HTMLの解説

ずらーっと並ぶと何がなんだかよく分からないように見えますが、タブ１つのコードはこの部分です。

<input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" />
<label class="tab-label" for="TAB-01">タブ①</label>
    <div class="tab-content">
      コンテンツ①をここに表示する
   <!--/tab-content--></div>

さらにイメージしやすいように、「タブの土台となるHTML」と「タブが選択された際に表示する内容のHTML」の2つに分けて解説します。

タブの土台となるHTML構造

<input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" />
<label class="tab-label" for="TAB-01">タブ①</label>

<input>のtypeを”radio”にすることで、HTMLの「ラジオボタン」を活用してタブを作成します。

ラジオボタンの「同時にひとつのボタンしか選択できない」（ひとつのラジオボタンをチェックすると他のラジオボタンのチェックが自動的に外れる）性質を利用してタブ切り替えを作成します。この仕組みを利用することにより、Javascriptを使わないタブ切り替えが可能となります。

１つのタブはinput（ラジオボタン）とlabelタグをセットとし、それぞれのinput（ラジオボタン）のid属性とlabel（タブ）のfor属性の名前を合わせます。同じ値を設定しておくことで、画面上のタブにあたるlabelがクリックされた際に、ラジオボタンを連動して機能させることができます。

input（ラジオボタン）に、タブのオン／オフ（そのタブが選択されているかいないか）を拾ってもらい、タブとなる部分はlabelを使って表示させて見た目を整えます。

ラジオボタンは仕組みだけを利用するため非表示にします。

タブが選択された際に表示する内容のHTML部分

<div class="tab-content">
      コンテンツ①をここに表示する
<!--/tab-content--></div>

この<div>要素は各タブのコンテンツを格納します。CSSを使って、対応するラジオボタン（タブ）が選択されているときにのみ表示されるようにします。

HTML記述のポイント（抜粋）

記述する際のポイントとなる部分のみを抜粋します。

1. input のname属性にすべて同じ名前を付ける。
   • タブ① <input id=”TAB-01” name=”TAB” />
   • タブ② <input id=”TAB-02” name=”TAB” />
   • タブ③ <input id=”TAB-03” name=”TAB” />
     
     
2. １行のinput（ラジオボタン）のid属性とlabelのfor属性に同じ名前を付ける。
   • タブ①<input id=”TAB-01” /><label for=”TAB-01“></label>
   • タブ②<input id=”TAB-02” /><label for=”TAB-02“></label>
   • タブ③<input id=”TAB-03” /><label for=”TAB-03“></label>
     
     
3. 初期状態でアクティブにするタブ
   • inputのchecked=”checked“を指定します

タブ切り替えを作るためのCSS

CSSでは下記の設定をおこないます。

役割についてはざっくりとコード内に/*コメントアウト*/で記入しました。

/*タブ切り替え--------------------*/

/* 全体を囲むdiv（親要素）*/
.tab-wrap {
	--tab-color:lightgray; /*タブの色*/
	--active-tab-color:#9EC3BC; /*選択したタブの色*/
	display: flex; /*タブを横並びにする*/
	flex-wrap: wrap;
	gap:10px; /*タブ間に余白*/
}

/*タブ(label)のスタイル*/
.tab-label {
	color:white;
	background-color:var(--tab-color);
	text-align: center;
	padding: .5em 1em;
	cursor: pointer;
	order: -1; /*タブを上段に表示する*/
}

/* タブのコンテンツ部分*/
.tab-content {
	width: 100%;
	display: none;
}

/*選択されていることがわかるように、選択されているタブの色を変える*/
.tab-switch:checked+.tab-label {
	background-color:var(--active-tab-color);
}

/* 選択されているタブのコンテンツを表示させる */
.tab-switch:checked+.tab-label+.tab-content {
	display: block;
}

/* input（ラジオボタン）は仕組みだけ利用するため非表示 */
.tab-switch {
	display: none;
}

CSSの解説

基本的なスタイル

.tab-wrap { 
    display: flex;
    flex-wrap: wrap;
}
.tab-label {
    order: -1; 
}

• display: flex: 親要素をフレックスコンテナにし、子要素を横並びに配置します。
• order: -1: フレックスアイテムの順序を指定し、タブを上に配置します。

選択されたタブのコンテンツのみを表示する

ここがタブ切替えに重要なポイントです。

/* タブのコンテンツ部分*/
.tab-content {
	width: 100%;
	display: none;
}
.tab-switch:checked+.tab-label+.tab-content {
	display: block;
}

• デフォルトでコンテンツを非表示状態に設定。
• :checkedを使いラジオボタンが選択された時に表示します。

.tab-switch:checked+.tab-label で使用している「+」マークは隣接セレクタと呼ばれ、直後に出てくる要素に適用するという意味があります。ここでは、選択されたラジオボタンの直後に記述された「tab-label」の直後にある「tab-content」を表示するという意味になります。

ラジオボタンを非表示にする

/* ラジオボタン非表示 */
.tab-switch {
	display: none;
}

ラジオボタンは仕組みだけ利用するため、ボタン自体は非表示にしています。

タブのデザイン

CSSを少し変更することで、お好みのデザインに変更できます。

シンプルなタブ

See the Pen 予備 by はっちゃん (@hacchan) on CodePen.

吹き出し

See the Pen Untitled by はっちゃん (@hacchan) on CodePen.

タブ数の増減について

HTMLの解説でも書いた通り、タブひとつ分のHTMLは<input><label>とタブに表示するコンテンツがワンセットになって作られています。

タブを増やす場合

タブに必要なワンセットの内容を編集して追加します。

1. <input> のname属性についている名前を合わせる（同一タブ内のname属性はすべて同じ）
   • タブ <input name=”TAB” />
     
2. １行の<input>のid属性と<label>のfor属性を合わせる
   • タブ<input id=”TAB-04” /><label for=”TAB-04“></label>

<input id="TAB-04" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-04">タブ④</label>
    <div class="tab-content">
      コンテンツ④をここに表示する
   <!--/tab-content--></div>

例）タブを８個に増やした例

例えば、多めにタブを８個作ってみると、このような感じでいくつでも増やすことができます。

タブを減らす場合

必要ないタブをワンセットまるごと削除します。

このとき外側の<div class=”tab-wrap”>を閉じている一番最後の閉じタグ</div>まで削除しないように注意しましょう。（<div></div>は必ず対になるように）

さいごに／タブ切り替えを使ったサイト型トップページの作り方を公開しています

タブ切り替えを自作する方法をご紹介しました。

HTMLは複雑そうに見えてもそのままコピペでき、それぞれの属性につける名前を間違わないようにすれば難なく設置できるのでないでしょうか。またJavascriptを使わないので動作が軽いのもポイントです。

当サイトして使用しているテーマ「Cocoon」で、当ページのタブ切り替えを使ったサイト型トップページの作り方を公開しています。

この記事は以上です。