<details>: DETAILS 要素
最終更新：2026-10-13
<details>DETAILS 要素
summary をクリックして開閉できる開示ウィジェット（ディスクロージャー）を表します。
| カテゴリ | セマンティック |
|---|---|
| コンテンツモデル | フローコンテンツ |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 必要 </details> タグ |
| ステータス | 標準 |
📝 構文
<details>折りたたみコンテンツ</details>▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <details> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： 既定では折りたたまれています。最初から開くには open 属性を追加します。JS なしで動作します。
❓ よくある質問
Qdetails に summary を書かないとどうなりますか？
Aブラウザはデフォルトの文言（Chrome なら「詳細」など）を開閉コントロールとして使います。ボタンの文言を変えたいなら、最初の子要素として
<summary> を提供する必要があります。アクセシビリティの面でもその方が良いのです。Qdetails を最初から開いた状態にするには？
A真偽属性の
open を <details> に付けて <details open> とします。ページ読み込み時から展開状態になり、ユーザーは引き続きクリックで閉じられます。JS で details.open（真偽値）を読み書きすれば、プログラムからも開閉を制御できます。Qdetails で排他的に開くアコーディオンは作れますか？
Aネイティブの
<details> は互いに独立しており、排他制御はできません。新しい仕様では name 属性が導入され、同じ名前の <details name='faq'> は排他グループになり、同時に1つしか開きません。旧ブラウザでは JS でのフォールバックが必要です。🏷️ 関連タグ
💡 関連ケース
今後さらにケーススタディを追加予定です。
📚 関連チュートリアル
