コピペで完結！タブ切替 #04【超軽量・シンプル】

html/css/js
2025.10.04

details / summary でつくる「シンプルタブ」

<details> / <summary> を使って、超軽量・JS最小限のタブ風UIを作ります。素の状態でも動作し、オプションのスクリプトで「常に1枚だけ開く」「矢印キー移動」などの体験を少し良くします。アクセシビリティ属性も付与済みです。

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

デモ

概要

details/summaryだけで開閉。JSなしでも使えるシンプル構成です。

仕様
  • HTMLネイティブ要素のみで開閉
  • CSSでタブ風に装飾（summaryをタブ見出しとして扱う）
  • オプションJSで「同時に1枚だけ開く」に強制
使い方
  1. <details> をタブ数だけ配置
  2. 各 <summary> を「見出し」に、後続の要素を「パネル」に
  3. 必要ならJSで「単一オープン」「矢印キー移動」を追加

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

/* =========================================================
  details/summary で作るシンプルタブ — CSS（#tabs-ds-01 にスコープ）
========================================================= */

/* ルート要素：白背景・角丸・影付きのカード風デザイン */
#tabs-ds-01{
  background:#fff;                         /* 背景を白に */
  border:1px solid var(--border);          /* 外枠ボーダー */
  border-radius:12px;                      /* 角丸 */
  box-shadow:0 6px 18px rgba(2,8,23,.08);  /* 薄い影 */
  overflow:hidden;                         /* 角丸からはみ出す要素を隠す */
}

/* タブ見出し列：上部の帯（縦積み仕様） */
#tabs-ds-01 .ds-tablist{
  display:block;                           /* 縦方向に積む */
  border-bottom:1px solid var(--border);   /* 下線で区切り */
  background:#fff;                         /* 背景は白 */
}

/* 各タブ（details要素）に下線を付ける */
#tabs-ds-01 .ds-item{
  border-bottom:1px solid var(--border);   /* 項目の区切り線 */
}

/* 最後のタブ項目だけは下線を外す */
#tabs-ds-01 .ds-item:last-of-type{
  border-bottom:none;
}

/* summary（見出し部分）をボタン風に装飾 */
#tabs-ds-01 .ds-summary{
  list-style:none;                         /* デフォルトリストスタイルを無効化 */
  position:relative;                       /* 疑似要素を配置する基準に */
  display:block;                           /* ブロックにして幅いっぱいに */
  padding:10px 14px;                       /* 内側余白 */
  margin:0;                                /* 外側余白なし */
  cursor:pointer;                          /* カーソルをポインタに */
  color:var(--muted);                      /* 文字色を薄めに */
  background:#fff;                         /* 背景は白 */
  border:none;                             /* 枠線なし */
  font-size:14px;                          /* テキストサイズ */
}

/* ブラウザ既定のディスクロージャーマーカー（三角アイコン）を非表示 */
#tabs-ds-01 .ds-summary::-webkit-details-marker{
  display:none;
}

/* summary の前にカスタム矢印アイコンを追加（閉▶ 開▼） */
#tabs-ds-01 .ds-summary::before{
  content:"▸";                             /* 矢印アイコン（右向き） */
  display:inline-block;                    /* インラインブロック表示 */
  margin-right:8px;                        /* テキストとの間隔 */
  transition:transform .2s ease;           /* 開閉時の回転アニメーション */
}

/* open状態のsummary（選択中タブ）のスタイル変更 */
#tabs-ds-01 .ds-item[open] .ds-summary{
  color:var(--ink);                        /* 文字色を濃く */
  background:#f8fafc;                      /* 背景を薄い灰色に */
}

/* open時は矢印を90度回転（右▶→下▼に） */
#tabs-ds-01 .ds-item[open] .ds-summary::before{
  transform:rotate(90deg);
}

/* パネル本文：summaryの下に出るコンテンツ部分 */
#tabs-ds-01 .ds-panel{
  padding:14px 16px;                       /* 内側余白 */
  background:#fff;                         /* 背景は白 */
}

コメント