コピペで完結！アコーディオン#02【HTML＋CSSのみ】

html/css/js

コピペで完結！アコーディオン（CSS＋HTMLのみ／JS不要）

ネイティブの<details> / <summary>を使って、JavaScriptなしでアコーディオンを実装します。開閉状態は[open]属性で検出し、＋／−のアイコンもCSSだけで切り替え。アクセシビリティも良好です。

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

デモ

よくある質問 1：料金は？

基本プランは月額1,000円です。年払いで2ヶ月分お得になります。

よくある質問 2：解約はいつでも？

マイページからいつでも解約できます。日割りはありません。

よくある質問 3：サポートは？

メール・チャットの2チャネルで平日10:00〜18:00に対応しております。

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

/* =========================================================
  CSS＋HTMLだけで作るアコーディオン（コメント付き）
  - #acc-cssonly-1 にスコープしてテーマ干渉を低減
  - details / summary を使うので JS不要・[open] で開閉把握
========================================================= */
#acc-cssonly-1{
  --radius:12px; --border:#e5e7eb; --ink:#0f172a; --bg:#fff;
}

/* アイテム外枠（カード風） */
#acc-cssonly-1 .acc-item{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg);
  margin:12px 0;
  overflow:hidden; /* 角丸と中身を揃える */
}

/* 見出しsummary：左右にタイトルとアイコンを配置 */
#acc-cssonly-1 .acc-btn{
  list-style:none;                 /* 既定の三角を消す */
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 16px; color:var(--ink);
  font:inherit; line-height:1.4; user-select:none;
}
/* Safari等のデフォルトマーカー非表示 */
#acc-cssonly-1 .acc-btn::-webkit-details-marker{ display:none }

/* タイトルを少し太く */
#acc-cssonly-1 .acc-title{ font-weight:600 }

/* 右端の＋アイコン（擬似要素で描画） */
#acc-cssonly-1 .acc-btn::after{
  content:'＋';
  font-weight:700;
}
/* open時は−へ切替 */
#acc-cssonly-1 .acc-item[open] .acc-btn::after{
  content:'－';
}

/* ホバー＆フォーカス可視化 */
#acc-cssonly-1 .acc-btn:hover{ background:#f8fafc }
#acc-cssonly-1 .acc-btn:focus{ outline:none }
#acc-cssonly-1 .acc-btn:focus-visible{ outline:2px solid #93c5fd; outline-offset:2px }

/* 本文：gridで0→1frにしてアコーディオン的に展開アニメ */
#acc-cssonly-1 .acc-panel{
  padding:12px 16px; border-top:1px solid var(--border); color:var(--ink);
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .24s ease;
}
#acc-cssonly-1 .acc-panel > *{ overflow:hidden }
#acc-cssonly-1 .acc-item[open] .acc-panel{ grid-template-rows:1fr }

コメント