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

タブ切り替えは実はワードプレスの人気有料テーマのSWELLではHTMLやCSSをいじらずにサクッと作れてしまうのですが、私が使っている無料テーマのCocoonはそう簡単にはいかなくて。

手作りでなんとか設置できないかな～と調べること数日。

今回、思い切って導入しました！

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

CodePenはブラウザ上でHTML・CSS・JavaScript等のコードを書いてリアルタイムで表示確認ができます。

当記事のタブ切り替えはものぐさWEBノートさんのコードを流用しています。

Javascriptを使わずHTMLとCSSのみでタブ切り替えが可能です。

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

タブ切り替えをワードプレスで使う際の注意点

まずはじめに注意点です。

• このタブ切り替えはクラシックエディタでは使えません

クラシックエディタではワードプレスの仕様で自動的に<p></p>（段落を意味するHTMLのタグのひとつ）が挿入され、強制的に改行されてタブのレイアウトが崩れてしまうためです。

正確には<p></p>を後で削除すれば使えないこともないのですが、ブロックエディタのカスタムHTMLに記述することを推奨します。

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

初期状態ではタブ①が選択されているので（選択するタブは設定で変更可能）、タブ②、タブ③を押してみてください。

クリックすることによって下部に表示されるコンテンツが切り替わっていると思います。

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>

当記事ではHTMLの「radioボタン」を活用してタブを作成していきます。

<input>のtype属性は”radio”にします。

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

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

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

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

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

ここでは「tab-content」というクラス名をつけ、タブが選択された際の表示切り替えに利用します。

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

※ポイントとなる部分のみを抜粋しています。

1. <input> のname属性にすべて同じ名前を付ける。
   • タブ① <input id=”TAB-01” name=”TAB” />
   • タブ② <input id=”TAB-02” name=”TAB” />
   • タブ③ <input id=”TAB-03” name=”TAB” />
     
     
2. １行の<input>（radioボタン）の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では下記の設定をおこないます。

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

/**************************
 タブ切り替え
***************************/
/* タブの横並びのため親要素にflexを指定*/
.tab-wrap {
	--tab-color:lightgray; /*タブの色*/
	--active-tab-color:#93A4A4; /*選択したタブの色*/
	display: flex;
	flex-wrap: wrap;
	gap:0 1px; /*タブ間の余白*/
}

/* タブ１～３と書いているタブメニュー部分*/
.tab-label {
	color:white;
	background-color:var(--tab-color);
	text-align: center;
	padding: .5em 1em;
	cursor: pointer;
	flex: 1;
	order: -1; /*タブを上段に表示する*/
}

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


/* 選択したタブ、チェックされているradioボタンの隣にあるlabelの背景色を変える*/
.tab-switch:checked+.tab-label {
	background-color:var(--active-tab-color);
}

.tab-switch:checked+.tab-label+.tab-content {
	display: block;
	padding: 15px 0 0 0;
}

/*タブのスタイル*/
.tab-wrap:after {
	content: '';
	width: 100%;
	height: 1px;
	background-color:var(--active-tab-color);
	display: block;
	order: -1;
}

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

div {
    text-align: center;
  }

CSSの役割（抜粋）

タブの見た目を整える

/* タブの横並びのため親要素にflexを指定*/
.tab-wrap {
	display: flex;
	flex-wrap: wrap;
}
.tab-label {
 	order: -1; /*タブを上段に表示する*/
	flex: 1; /*flexアイテムを伸ばす*/
}

display: flex;でタブを横並びにし、上段に表示する、余白部分を埋めるように引き伸ばすといったスタイルの指定をしています。

選択されたタブの背景色を変更する

/* 選択したタブ、チェックされているradioボタンの隣にあるlabelの背景色を変える*/
.tab-switch:checked+.tab-label {
	background-color:var(--active-tab-color);
}

.tab-switch:checked+.tab-label で使用している「+」マークは隣接セレクタと呼ばれ、直後に出てくる要素に適用するという意味があります。ここでは、選択したinputタグ（radioボタン）の隣にあるtab-labelの背景色を変更するという意味になります。

コンテンツを一旦非表示にする

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

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

1. 一旦すべてのコンテンツを非表示状態に設定。
2. 選択されたinputタグ（radioボタン）の直後に記述された「tab-label」の直後にある「tab-content」を表示するという意味になります。

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

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

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

CSSカスタムプロパティ（変数）の使用

CCSの先頭でタブの色を設定しやすように、カスタムプロパティ記法（ここでは、--tab-color:lightgray; /*タブの色*/）を設定し、var() 関数（ここでは、background-color:var(–tab-color);）で呼び出しています。

CSSカスタムプロパティを使わずに、background-color:lightgray;（または#カラーコード;）と直接記述しても問題ありません。

タブの数は自由に変更できます

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

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

タブを増やす場合

１行の<input>のid属性と<label>のfor属性は必ず合わせ、

同一タブ内ではname属性をすべて同じにします。

ワンセットのHTMLコードを追加、タブ名、表示する内容等を編集して追加します。

タブを減らす場合

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

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

タブの中にタブもOK！入れ子にできる

このカスタマイズ方法を使うとタブを入れ子にできるので、

「新着記事」「人気記事」の２つを各カテゴリごとにタブ切り替えできるようにしました。

このコードでは、カテゴリーのタブの中に新着／人気の切り替えタブを入れています。

See the Pen タブ切り替え（複数設置） by はっちゃん (@hacchan) on CodePen.

タブのデザイン

CSSを少し変更すると、使い勝手の良い吹き出しのタブのデザインにもできますよ。

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

さいごに／サイト型トップページの作り方を公開しています

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

HTMLは複雑そうに見えてもそのままコピペでき、それぞれの属性につける名前を間違わないようにすれば難なく設置できるかと思います。

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

この記事は以上です。