Design Pattern

アコーディオン

アコーディオンは、複数のセクションの表示 / 非表示を切り替える UI パターンです。HTML の details と summary を使うことで、JavaScript なしでもアクセシブルなアコーディオンを実装できます。

難易度: 初級カテゴリ: ナビゲーション

いつ使う / 使わない

使うべきとき

FAQ など、複数の質問と回答を整理して表示したい場合
長いコンテンツをセクション分けして段階的に見せたい場合
設定画面やフィルターなど、カテゴリごとに項目をグループ化する場合

使わないべきとき

すべてのコンテンツを常に表示すべき場合
項目が 1〜2 個しかない場合 → ディスクロージャーを使う
コンテンツ間を頻繁に比較する必要がある場合 → タブや並列表示を検討する

構造（Anatomy）

1 サマリー（セクションのタイトル）

2 コンテンツパネル（展開時に表示される内容）

3 開閉アイコン（▶ / ▼）

サマリー — <summary> 要素。クリックやキーボードで開閉を切り替えるトリガー
コンテンツパネル — <details> 内の本文。展開時のみ表示される
アイコン — 開閉状態を視覚的に示すインジケーター。CSS で制御する

HTML 構造

重要なポイント

<details> と <summary> を使うと、JavaScript なしで開閉機能を実現できる
<summary> は <details> の最初の子要素として配置する
排他的アコーディオンは、同じ name 属性値を各 details 要素に設定する
初期状態で開いておきたい項目には open 属性を付与する

CSS 実装

スタイル設計のポイント

デフォルトの三角マーカーは ::-webkit-details-marker と list-style: none で非表示にする
開閉アイコンは疑似要素で実装し、[open] セレクターで回転や変形を加える
ボーダーと border-radius で複数項目をカード風にまとめると視認性が上がる
ホバー時の背景色変更でクリック可能であることを示す

キーボード操作

Tab で各アコーディオンヘッダーにフォーカス移動
Enter または Space で開閉を切り替え
排他的アコーディオンでは、1 つを開くと他が自動的に閉じる

ライブデモ

details 要素で作るアコーディオン

HTML ネイティブの details / summary を使った最もシンプルな実装です。

1つだけ開くアコーディオン

同じ name 属性を指定して、1 つを開くと他が閉じるパターンです。

カスタムスタイル

デフォルトの三角アイコンを隠し、独自の見た目にしたバリエーションです。

よくある間違い

div + JavaScript で自作する

ネイティブの details / summary で済む場面で自作すると、アクセシビリティや状態管理の負債が増えやすくなります。

開閉状態をアイコンだけで示す

視覚表現だけでなく、支援技術にも状態が伝わる実装にする必要があります。

重要なコンテンツを隠す

必ず読んでほしい情報をアコーディオン内に隠すと、見落としや誤操作の原因になります。

ネストが深すぎる

アコーディオンの中にさらにアコーディオンを入れると、情報構造が複雑になりやすいです。