HTML要素 ・ その他
<details>
開閉できる詳細情報
クリックで開いたり閉じたりできる領域を作る要素です。JavaScriptなしでアコーディオンやFAQを作れます。
01
サンプルコード
HTML
1<details>
2 <summary>予約はできますか？</summary>
3 <p>4名様以上でご来店の場合、前日までにお電話でご予約いただけます。</p>
4</details>
5<details open>
6 <summary>駐車場はありますか？</summary>
7 <p>店舗の裏に3台分ございます。</p>
8</details>
CSS
1details {
2 border-bottom: 1px solid #ddd;
3 padding: 8px 0;
4}
5summary {
6 cursor: pointer;
7 font-weight: bold;
8}
9details p {
10 margin: 8px 0 0;
11}
02
実行結果
ブラウザでの表示質問の行をクリックすると開閉します
03
解説
details は、最初は summary の見出しだけを表示し、クリックすると中身が開く要素です。もう一度クリックすると閉じます。
open 属性を付けると、最初から開いた状態で表示されます。
キーボードでも開閉でき、読み上げソフトにも開閉状態が伝わるため、自作するよりも扱いやすい部品です。
04
応用例・注意点
主な属性
| 属性 | 説明 |
|---|---|
open | 開いた状態にする |
name | 同じ name の details は1つだけ開く（アコーディオン） |
1つだけ開くアコーディオン
同じ name を付けると、1つを開いたときにほかが自動で閉じます。
HTML
1<details name="faq">
2 <summary>質問1</summary>
3 <p>回答1</p>
4</details>
5<details name="faq">
6 <summary>質問2</summary>
7 <p>回答2</p>
8</details>
注意点
- 01details の最初の子要素は summary にします。summary がないと「詳細」などの既定の文字が表示されます。
- 02ページ内検索で中身がヒットすると、閉じていても自動で開くブラウザがあります。