Design Pattern
ディスクロージャー
ディスクロージャーは、補足情報や詳細設定のような単一領域の表示 / 非表示を切り替えるシンプルな UI パターンです。details と summary を使うと、JavaScript なしでも基本構造を安全に実装できます。
いつ使う / 使わない
使うべきとき
- 「もっと見る」「詳細を表示」のように単一の情報塊を折りたたみたい場合
- 補足説明や注意事項を必要時だけ見せたい場合
- 設定の詳細項目を初期状態では隠しておきたい場合
使わないべきとき
- 複数項目の比較や一覧整理が目的の場合 → アコーディオンを検討する
- 必須の操作や重要情報を常に見せるべき場合
- より強い注意喚起が必要な場合 → ダイアログやインライン表示を使う
構造（Anatomy）
1 トリガー（クリックで開閉を切り替え）
2 コンテンツ（展開時に表示される内容）
- トリガー — 通常は
<summary>。何が開くかが分かるテキストを置く - コンテンツ — 展開時に見せる本文。補足情報や詳細設定などを配置する
HTML 構造
重要なポイント
<details>と<summary>を使うと、開閉状態がネイティブに管理される- summary の文言は「何が表示されるか」が分かる内容にする
- 初期展開が必要な場合は
open属性を使う - 内容が単なる補足ではなく必須情報なら、隠さない設計を優先する
CSS 実装
スタイル設計のポイント
- トリガーはボタンらしく見えるホバー / フォーカス表現を持たせる
- 開閉アイコンは疑似要素や SVG で付け、
[open]で回転させる - 本文との境界を余白やボーダーで明確にする
- アニメーションを加える場合も、状態変化が追いやすい速度にする
アクセシビリティ
WCAG 4.1.2 名前・役割・値
details / summary を使うと、開閉状態と操作対象がブラウザにより支援技術へ伝達されます。
WCAG 2.1.1 キーボード
<summary> はキーボード操作に対応しており、Enter / Space で開閉できます。
キーボード操作
- Tab でトリガーにフォーカス移動
- Enter または Space で表示 / 非表示を切り替え
ライブデモ
基本的な開閉
details / summary を使った最小構成のディスクロージャーです。
もっと見る
長い本文の続きだけを展開するパターンです。
設定パネル
詳細設定を折りたたみできるパネル型バリエーションです。
よくある間違い
summary のテキストが曖昧
「クリックしてください」ではなく、開いた先の内容が分かる文言にする必要があります。
重要な操作を中に隠す
送信ボタンや必須入力欄のような要素を折りたたみ内に入れると見落とされやすくなります。
開閉状態が視覚的に分からない
アイコンやボーダーの変化などで、現在の状態を補助する視覚表現が必要です。