コピペで完結！タブ切替 #01【CSS＋HTML のみ（ラジオボタン方式）】

html/css/js
2025.10.03

CSS+HTMLのみでタブ切替実装（ラジオボタン方式）

JavaScript不要で使える、input[type="radio"]＋label＋擬似クラスだけで実装するタブUIです。
単一選択（常に1枚だけ表示）に向いており、テーマの影響を避けるためにデモ用CSSはコンポーネントIDへスコープしています。

コードについて 本記事のコードは AI（ChatGPT）による生成をベースに作成・調整しています。ご利用の環境でテストの上ご使用ください。
免責 本コードの利用に伴う不具合・損害について、当サイトは責任を負いません。自己責任にてご利用ください。

デモ

CSSオンリーのシンプルなタブ

ラジオの :checked 状態を利用して、対応するパネルだけを表示します。

  • 単一選択（排他制御）はラジオの特性そのまま
  • URL同期や履歴制御は不要な軽量UIに最適
  • ARIAは簡易対応（CSSのみのため aria-selected 切替は静的）
  1. ラジオ（hidden）をタブ数分用意
  2. label[for]をタブの見出しに
  3. .tab-toggle:checked と兄弟セレクタで該当パネルを表示

コードをコピーして使おう！

/* =========================================================
  タブ切替 #01 — CSS（ラジオ方式・JS不要）
  ・#tabs-radio-1 にスコープしてテーマ衝突を回避
  ・ラジオ:checked と兄弟セレクタでタブとパネルを同期
========================================================= */
#tabs-radio-1{ --border:#e5e7eb; --ink:#0f172a; --muted:#64748b; --accent:#0b6bff; --bg:#fff; --radius:12px } /* カスタムプロパティ定義（テーマ色・角丸など） */

/* タブ見出しの並び */
#tabs-radio-1 .tablist{
  display:flex; gap:8px; align-items:flex-end; /* 横並び・下端揃えでタブ見出しを配置 */
  border-bottom:1px solid var(--border);       /* タブ見出し下に下線 */
  padding-bottom:6px; margin-bottom:10px;      /* 下線とパネル枠の間に余白 */
}

/* タブ（label要素をボタン風に） */
#tabs-radio-1 .tab{
  -webkit-appearance:none; appearance:none;    /* ブラウザ既定のボタン外観を無効化 */
  background:#fff; color:var(--ink);           /* 背景は白、文字は濃色 */
  border:1px solid var(--border); border-bottom:none; /* 下側はパネル枠と繋げるためボーダー無し */
  border-top-left-radius:10px; border-top-right-radius:10px; /* 上側だけ角丸でタブ形状に */
  padding:8px 12px; font-size:14px; cursor:pointer;   /* クリックしやすいサイズ感 */
}
#tabs-radio-1 .tab:hover{ background:#f8fafc }        /* ホバー時の軽い反応 */

/* パネル枠 */
#tabs-radio-1 .panels{
  border:1px solid var(--border);              /* 外枠ボーダー（上はタブに接続） */
  border-radius:0 10px 10px 10px;              /* 右上/右下/左下を角丸に（左上はタブと接続） */
  background:#fff;                             /* パネル背景を白に統一 */
}
#tabs-radio-1 .panel{ display:none; padding:14px 16px; color:var(--ink) } /* 既定は非表示。内側余白と文字色 */
#tabs-radio-1 .panel .muted{ color:var(--muted) }                          /* 説明文などの淡色 */

/* ラジオ:checked による選択状態の反映 */
/* 各ラジオが選択された時、対応するラベルタブを強調（背景=アクセント色、文字=白、ボーダー色も合わせる） */
#t1-1:checked ~ .tablist label[for="t1-1"]{ background:var(--accent); color:#fff; border-color:var(--accent) }
#t1-2:checked ~ .tablist label[for="t1-2"]{ background:var(--accent); color:#fff; border-color:var(--accent) }
#t1-3:checked ~ .tablist label[for="t1-3"]{ background:var(--accent); color:#fff; border-color:var(--accent) }

/* 選択されたラジオに対応するパネルだけ display:block で表示 */
#t1-1:checked ~ .panels #p1{ display:block }
#t1-2:checked ~ .panels #p2{ display:block }
#t1-3:checked ~ .panels #p3{ display:block }

/* 可視フォーカス（キーボード操作向け） */
#tabs-radio-1 .tab:focus-visible{ outline:2px solid #93c5fd; outline-offset:2px } /* キーボード操作時に見えるフォーカスリング */

コメント