タブ切り替えをHTMLとCSSで実装（JavaScriptなし）

「タブ切り替えを作りたいけど、JavaScriptを書くのはちょっと大げさかも…」

そんなときは、HTMLとCSSだけでもタブ切り替えを実装できます。

この記事では、ブラウザ対応の広い「:checked版」と、コードをスッキリ書ける「:has()版」の2つの方法を紹介します。

どちらもコピペで試せるサンプル付き。さらに、均等幅・吹き出し風・丸ボタン風などのカスタマイズ例や、WordPressで実装するときの注意点もまとめました。

まずは動くコードを試しながら、自分のサイトに合ったタブ切り替えを作ってみましょう。

HTMLとCSSだけで実現！タブ切り替えの実装方法

ここでは次の2つの方法を紹介します。

1. :checked版 → ブラウザ対応が広く、実用向き
2. :has版 → モダンな書き方でスッキリ

今なら基本的に :has() がおすすめです。古いブラウザ対応が必要な場合は :checked を選ぶと安心です。

CSSの基本やカスタマイズ方法については、こちらの記事で詳しく解説しています。

CSSカスタマイズの手順｜ブログがなんかダサい…をCSSで解決する方法【初心者向け】

ブログを続けていると、ふとした瞬間にこんな悩みが出てきます。なんとなくデザインが素人っぽい見出しやボタンをもう少し整えたいでもどこを触ればいいのか分からない正直...

turicco.com

HTMLやCSSの編集場所がわからない方は、こちらの記事を参考にしてください。

Cocoonカスタマイズ完全ガイド｜HTML・CSS・PHPの編集場所と使い分けを初心者向けに解説

Cocoonは無料テーマの中でも柔軟にカスタマイズできるテーマですが、「どこを編集すればいいの？」「HTMLとCSSとPHPの違いがわからない…」という初心者は...

turicco.com

方法① :checked を使う互換性重視版

ラジオボタンと :checked 擬似クラスを活用する方法。古めの環境も含めて幅広く対応するため、使いやすい方法です。

▶ DEMO（:checked版）

See the Pen タブ切り替え｜基本スタイル by Turicco (@Turicco) on CodePen.

<div class="tab-switch">
  <input type="radio" id="tab1" name="TAB" checked>
  <label for="tab1">タブ①</label>
  <div class="tab-content">タブ①の内容</div>

  <input type="radio" id="tab2" name="TAB">
  <label for="tab2">タブ②</label>
  <div class="tab-content">タブ②の内容</div>

  <input type="radio" id="tab3" name="TAB">
  <label for="tab3">タブ③</label>
  <div class="tab-content">タブ③の内容</div>
</div>

.tab-switch {
  --cstm-tab-color:#92bac2;
  display: flex;
  flex-wrap: wrap;
  max-width: 800px;
  margin-inline: auto;
  gap: 0 5px;
}

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

/* タブボタン */
.tab-switch label {
  padding: 0.7em 1em;
  background:#eee;
  cursor: pointer;
  order: -1;
  text-align: center;
}

/* コンテンツ非表示 */
.tab-content {
  display: none;
  width: 100%;
  padding: 1.5em 0;
}

/* 選択されたタブ＋コンテンツ表示 */
.tab-switch input:checked + label {
  background: var(--cstm-tab-color);
  color: #fff;
}
.tab-switch input:checked + label + .tab-content {
  display: block;
}

HTML記述のポイント

• ラベルとラジオの紐づけ
  → id="tab1" と for="tab1" この2行がタブ切り替えの要です。

<!-- タブ①  -->
<input type="radio" id="tab1"  name="TAB" checked>
<label for="tab1">タブ①</label>

<!-- タブ②  -->
<input type="radio" id="tab2"  name="TAB">
<label for="tab2">タブ②</label>

<!-- タブ③  -->
<input type="radio" id="tab3"  name="TAB">
<label for="tab3">タブ③</label>

CSSのポイント

• ラジオボタンを非表示
  → ボタンそのものは見せずに、label をタブとしてデザイン。

.tab-switch input {
  display: none;
}

• 選択中のタブを強調
  → :checked 状態の直後にあるラベルを装飾。

.tab-switch input:checked + label {
  background: var(--cstm-tab-color);
  color: #fff;
}

• 選択中のコンテンツを表示
  → 選択中のラベルの直後にある .tab-content だけ表示されます。

.tab-switch input:checked + label + .tab-content {
  display: block;
}

方法② :has() を使うシンプル実装（モダンブラウザ向け）

:has() を使うと「子要素の状態を見て親要素の見た目を変える」ことができます。

今回は「選択されているラジオボタンを含む label」を判定して、アクティブなタブの色を変更しています。

▶ DEMO（:has版）

See the Pen タブ切り替え｜外枠付き by Turicco (@Turicco) on CodePen.

<div class="tab-switch"> 
  <label><input type="radio" name="TAB" checked>タブ①</label> 
  <div class="tab-content">タブ①の内容</div> 

  <label><input type="radio" name="TAB">タブ②</label> 
  <div class="tab-content">タブ②の内容</div> 

  <label><input type="radio" name="TAB">タブ③</label> 
  <div class="tab-content">タブ③の内容</div> 
</div>

.tab-switch {
  --cstm-tab-color:#dbb6a2;
  display: flex;
  flex-wrap: wrap;
  max-width: 800px;
  margin-inline: auto;
  gap: 5px;
}

/* タブボタン */
.tab-switch label {
  padding: 0.7em 1em;
  background:#eee;
  cursor: pointer;
  order: -1; /* 上に表示 */
  text-align: center;
}

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

/* コンテンツ非表示 */
.tab-content {
  display: none;
  width: 100%;
  padding: 1.5em 0;
}

/* 選択されたタブ＋コンテンツ表示 */
.tab-switch label:has(:checked) {
  background: var(--cstm-tab-color);
  color: #fff;
}
.tab-switch label:has(:checked) + .tab-content {
  display: block;
}

HTML記述のポイント

• ラジオボタンをラベル内に書く
  → ラベルをクリックすると input が切り替わり、同時にCSSで状態を判定できます。

<label><input type="radio" name="TAB" checked>タブ①</label>

CSSのポイント

• :has(:checked) で選択状態を判定
  → label の中に :checked な input がある場合のみ、スタイルを適用。

.tab-switch label:has(:checked) {
  background: var(--cstm-tab-color);
  color: #fff;
}

• 隣接するコンテンツを表示
  → 選択されたラベルのすぐ後ろにある .tab-content を表示します。

.tab-switch label:has(:checked) + .tab-content {
  display: block;
}

タブのスタイル｜カスタマイズ例

タブ切り替えは中身を切り替えるだけでなく、デザイン次第で見やすさも変わります。

ここからは実際によく使うカスタマイズ例を紹介します。

タブ均等幅

タブを横並びにして、均等に幅を分けたいときは flex: 1; を指定します。項目数が変わっても自動で幅が調整されるので便利です。

See the Pen タブ切り替え｜input表示バージョン by Turicco (@Turicco) on CodePen.

.tab-switch label {
  flex: 1; /* 均等幅 */
}

吹き出し風スタイル

選択中のタブに下向きの小さな三角形を付けて、吹き出し風に見せられます。

「今どのタブを選んでいるのか」を直感的に伝えられるデザイン。特にブログ記事の切り替えメニューなどにおすすめです。

See the Pen タブ切り替え｜吹き出し風 by Turicco (@Turicco) on CodePen.

.tab-switch label {
  position: relative;
}

/* 吹き出し */
.tab-switch label:has(:checked)::before {
  content: '';
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 9px;
  background-color: var(--cstm-tab-color);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

丸・白抜きスタイル

タブをボタン風にしたい場合は、丸みをつけた白抜きデザインがおすすめです。

See the Pen タブ切り替え｜丸み by Turicco (@Turicco) on CodePen.

.tab-switch label {
  border: 1px solid var(--cstm-tab-color); /* 枠線 */
  border-radius: 30px; /* 丸み */
}

枠線の色を var(--cstm-tab-color) にしておけば、サイト全体のテーマカラーに合わせて統一感を出せます。

CSSの色を一括管理！CSS変数（カスタムプロパティ）の使い方｜var・:rootの基本と実践

「色を変えたいだけなのに、同じコードを何ヶ所も修正…」こんな非効率なCSS管理をしていませんか。CSS変数（カスタムプロパティ）を使えば、一箇所の変更だけでサイ...

turicco.com

タブ切り替えを 同ページに複数セット（2つ以上）置く場合

タブ切り替えを1ページに複数セット置く場合は、いくつか注意点があります。

• ラジオボタンの name 属性はグループごとに固有にする
  ラジオボタンは 同じname を持つと1つしか選べない特性があるため、1つのタブセットごとに違う名前にします。

<!-- タブセット1 -->
<input type="radio" name="TAB1" id="tab1-1" checked>
<input type="radio" name="TAB1" id="tab1-2">

<!-- タブセット2 -->
<input type="radio" name="TAB2" id="tab2-1" checked>
<input type="radio" name="TAB2" id="tab2-2">

• id と for 属性も重複させない
  • <label for="id名"> は対応する <input> と結びつきます。
  • ページ内で同じ id を複数使うと正しく動作しないので、タブセットごと別の id を付けます。

WordPressでタブ切り替えを実装する場合の注意点

WordPressでは、<p> や <br>が自動挿入されることがあります。

タブ切り替えは「input → label → .tab-content」のような隣接関係を利用しているので、間に不要なタグが入ると正しく動作しません。

うまく切り替わらない場合は、次を確認してください。

• カスタムHTMLブロック内にまとめて記述しているか
• 不要な改行が入っていないか
• ブロックエディタで自動的に段落が追加されていないか

特にクラシックエディタでは自動整形が有効になっていることが多く、このケースが発生しやすい傾向があります。

実際に、この不具合でお問い合わせいただいた方のほとんどがクラシックエディタを使っていました。

→ CSSが反映されない原因と対策をチェック

CSSが効かない原因はこれ｜デベロッパーツールで「当たってない・負けてる」を確認する方法

CSSが反映されない原因を詳しく解説！デベロッパーツールの活用方法から優先度やキャッシュの影響、エラーチェック方法まで、初心者にも分かりやすい解決策をまとめました。

turicco.com

Cocoonの「タブ」ブロックと活用例

ここまでで、HTMLとCSSだけでタブ切り替えを実装する方法を紹介しました。

• 「Cocoonでコードを書かずに実装したい」
• 「ブロックで完結させたい」

という方は、Cocoon標準のタブブロックを使う方法がおすすめです。実際に当サイトでは、Cocoonのタブブロックをベースにデザインを調整して使っています。

ブロック操作で簡単なタブ切り替えの作りから、デザインをワンクリックで選べる便利なカスタマイズまで詳しく解説しています。

Cocoonタブブロックを使いやすくカスタマイズ｜均等配置・折り返し・横スクロールをワンクリック化

Cocoonのタブブロックはとても便利なのですが、タブを均等幅にしたいスクロールではなく自動で折り返したいデザインを選びたいと感じたときに標準機能では設定できま...

turicco.com

タブをトップページや固定ページで活用したい方はこちらの記事もおすすめです。サイト型トップページの中でタブを使うと、記事一覧や更新情報を見やすく整理できます。

Cocoonトップページ作成ガイド（サイト型）｜HTML・ブロック2つの方法を比較して解説

Cocoonでブログを作っていると、「トップページがなんだか普通…」「もっとサイトっぽくしたい」「おしゃれなトップページに憧れる」と感じることがあるかと思います...

turicco.com

• Cocoonブロック機能版（フルワイド対応）
• HTML＆CSS版（シンプルデザイン）
• Cocoonでフルワイド表示を作る方法

タブ切り替えまとめ

HTMLとCSSだけで、シンプルかつ機能的なタブ切り替えを実装できました。

• :checked方式 → 互換性が高く、古いブラウザでも動作
• :has()方式 → より直感的に書けるが、モダンブラウザ向け

迷ったらまずは :has() 版がおすすめです。

コードがシンプルで管理しやすく、現在の主要ブラウザでも問題なく動作します。

一方で、古いブラウザ対応が必要な場合は :checked 版を選びましょう。