コピペで完結！タブ切替 #08【タブ記憶！戻る進む更新でもリセットされないタブ】

html/css/js
2025.10.05

URLハッシュ同期＆戻る進む対応

タブの選択状態をURLハッシュ（例：#tab=panel2）と同期し、リンク共有・再読込・ブラウザの戻る／進むに対応する実装例です。 クリック時にハッシュを書き換え、hashchange発火でタブを切り替えます。初期表示はハッシュを解析して対象タブを自動表示します。

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

デモ

いくつかのタブをクリックしたあとで、ブラウザの「戻る」ボタンや再読込（更新）を押しても選択状態はリセットされません。 URLハッシュ（例：#tab=panel2）でタブ状態を保持・復元します。

URLのハッシュとタブ状態を同期します。リンク共有・再読込・戻る進むに対応。

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

/* =========================================
   URLハッシュ同期＆戻る進む対応：CSS（#demo-section スコープ）
   -----------------------------------------
   ・必要最小限の見た目（アクセシビリティはHTML/JSで担保）
   ・他スタイルと衝突しないようセレクタは #demo-section 配下に限定
   ========================================= */

/* ルート：記事内デモのタイポグラフィ・色変数など */
#demo-section.demo-wrap{
  max-width: 960px;                          /* 横幅上限（レイアウトの基準） */
  margin: 0 auto;                            /* コンテンツ中央寄せ */
  padding: 0 16px;                           /* 左右の余白 */
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP","Yu Gothic UI",sans-serif; /* 読みやすいフォント */
  color: #0f172a;                            /* 基本文字色 */
  --ink:#0f172a;                              /* 文字色トークン */
  --muted:#64748b;                            /* 補助文字色トークン */
  --accent:#0b6bff;                           /* 強調色トークン */
  --border:#e5e7eb;                           /* 枠線色トークン */
  --bg:#ffffff;                               /* パネル背景トークン */
}

/* タブバー（ボタンを横並び、折返し可） */
#demo-section .tabs{
  display:flex;                               /* 横並び */
  flex-wrap:wrap;                             /* 狭い画面では折返し */
  gap:8px;                                    /* タブ間の余白 */
  margin:8px 0 12px;                          /* 上下余白 */
}

/* タブボタンの見た目 */
#demo-section .tab{
  appearance:none;                            /* OS既定の装飾を解除 */
  border:1px solid var(--border);             /* 薄い枠線 */
  background:#fff;                            /* 背景 */
  color:var(--ink);                           /* 文字色 */
  padding:8px 14px;                           /* クリックしやすい余白 */
  border-radius:8px;                          /* 角丸 */
  font-size:14px;                             /* 文字サイズ */
  cursor:pointer;                             /* ホバー時のカーソル */
  transition:background .2s,color .2s,border-color .2s; /* なめらかな色変化 */
}

/* 選択中タブ（JSが aria-selected=true を付与） */
#demo-section .tab[aria-selected="true"]{
  background:var(--accent);                   /* 背景を強調色に */
  border-color:var(--accent);                 /* 枠線も強調色 */
  color:#fff;                                 /* 文字は白 */
  font-weight:600;                            /* わずかに太く */
}

/* パネル（コンテンツボックス） */
#demo-section .panel{
  border:1px solid var(--border);             /* 枠線 */
  border-radius:10px;                         /* 角丸 */
  background:var(--bg);                       /* 背景色 */
  padding:16px;                               /* 余白 */
}
/* 表示/非表示は hidden 属性で切替（JSが制御） */

コメント