コピペで完結！タブ切替 #02【CSS＋HTML のみ（:target方式・URL連動）】

html/css/js

CSS+HTMLのみでタブ切替実装（:target方式・URL連動）

ページ内リンク（<a href="#panelId">）と :target セレクタだけで、JavaScript不要のタブUIを実装します。
ハッシュ（例：#tgt02-tab2）に連動するため、特定タブを開いた状態のURLをそのまま共有できます。
デモと、コピーして使えるCSS/HTMLを用意しました。どこにも干渉しないよう、デモ用は専用ID/クラスに厳密スコープしています。

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

デモ

概要

URLハッシュと :target で切替。直リンク・戻る/進むにも自然対応します。

仕様

  • JS不要・軽量
  • 共有リンクで任意タブから開始可能（例：#tgt02-tab2）
  • 初期表示は「ハッシュ無し時のみ」1枚目を表示

使い方

  1. 各パネルに固有の id を付与
  2. タブは <a href="#そのid">
  3. CSSで .panel:target{display:block} を指定

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

/* =========================================================
  :target タブ — CSS（コピペ用／衝突しないスコープ）
  ・#my-target-tabs をラッパーにしてテーマ干渉を低減
  ・構造は「パネル群 → タブ見出し」（後述のHTML参照）
  ・ハッシュ無し：1枚目表示、ハッシュ有り：対象のみ表示
  ・:has() 擬似クラスで「どのパネルが :target か」を上位から検知してタブ強調
  ・アンカー遷移でページスクロールが発生する場合は、ページ側のCSS/JSで調整してください
========================================================= */
#my-target-tabs{ --ink:#0f172a; --muted:#64748b; --border:#e5e7eb; --accent:#0b6bff; --bg:#fff } /* カラートークン（記事全体での再利用を想定） */
#my-target-tabs .mt-panels{ } /* パネルコンテナ（必要であればレイアウト用の余白等を追加可） */
#my-target-tabs .mt-panel{
  display:none; padding:14px 16px; color:var(--ink); /* 既定は非表示。読みやすい余白と文字色 */
  border:1px solid var(--border); border-radius:0 10px 10px 10px; background:#fff /* タブ見出しと繋がる形状 */
}
/* :target になったパネルのみ表示（URLの #id に一致する要素が対象） */
#my-target-tabs .mt-panel:target{ display:block }

/* タブ見出し（リンク群） */
#my-target-tabs .mt-tablist{
  display:flex; gap:8px; align-items:flex-end;        /* タブを横並びにし、下端を揃える */
  border-bottom:1px solid var(--border); padding-bottom:6px; margin:10px 0 /* タブ下線・間隔の整え */
}
#my-target-tabs .mt-tab{
  -webkit-appearance:none; appearance:none;           /* ブラウザ既定の装飾をオフ */
  display:inline-block; padding:8px 12px; font-size:14px; /* クリックしやすいサイズ */
  background:#fff; color:var(--ink); text-decoration:none; cursor:pointer; /* ボタン風の見た目 */
  border:1px solid var(--border); border-bottom:none; /* 下側はパネル枠と連結させるため外す */
  border-top-left-radius:10px; border-top-right-radius:10px; /* タブ風の角丸を上側に付与 */
}
#my-target-tabs .mt-tab:hover{ background:#f8fafc }   /* ホバーで軽く反応 */

/* 対応タブの強調（:has で :target 状態を検知して、該当する href を持つタブにスタイルを当てる） */
#my-target-tabs:has(#mt-panel-1:target) .mt-tablist .mt-tab[href="#mt-panel-1"],
#my-target-tabs:has(#mt-panel-2:target) .mt-tablist .mt-tab[href="#mt-panel-2"],
#my-target-tabs:has(#mt-panel-3:target) .mt-tablist .mt-tab[href="#mt-panel-3"]{
  background:var(--accent); color:#fff; border-color:var(--accent) /* アクティブタブの配色 */
}

/* 初期表示（ハッシュ無し）：1枚目のパネルを表示し、1番タブを強調
   - location.hash が空のときにのみ適用
   - ハッシュが存在する場合は :target 側が優先される */
#my-target-tabs:not(:has(.mt-panel:target)) #mt-panel-1{ display:block }
#my-target-tabs:not(:has(.mt-panel:target)) .mt-tablist .mt-tab[href="#mt-panel-1"]{
  background:var(--accent); color:#fff; border-color:var(--accent) /* 初期アクティブの見た目 */
}

/* アクセシビリティ：キーボード操作時にタブへ可視フォーカスを表示 */
#my-target-tabs .mt-tab:focus-visible{ outline:2px solid #93c5fd; outline-offset:2px }

コメント