← エラー辞典に戻る

HTML

details/summaryが開閉しない

summary要素が正しく配置されていない

こんな症状

<details>タグを書いたのにクリックしても開閉しない。アコーディオンUIを作ろうとしたときに起きやすいよ。

まず試す

<details><summary>タイトル</summary>…</details> のように、summary を details の最初の直接の子にする。

html
<details>
  <summary>詳細</summary>
  <p>内容</p>
</details>

これで直らなければ、下の「自分のケース」を確認。

🔍 自分のケースはどれ？

  • ✓summary が無い/別要素で囲んでいる
    → summary を details の直接の最初の子に置く。
  • ✓クリックが効かない
    → CSSで pointer-events:none / user-select:none が当たっていないか確認する。
  • ✓JSで止めている
    → click で preventDefault() していないか確認する。

なぜ起きる？

details要素が正しく動作するには、直接の子要素としてsummary要素が必要だよ。summaryがdetailsの直接の子になっていない（別の要素で囲まれている等）場合や、CSSでpointer-events: noneが指定されている場合、クリックイベントが無効になって開閉しないんだ。

✕ エラーが起きるコード
<details><p>内容</p></details>
<!-- summary がない -->
✓ 直したコード
<details><summary>詳細</summary><p>内容</p></details>

✅ 直ったか確認

summary をクリックして内容が開閉すればOK。

🆘 まだ直らないときは

最初から開いた状態にしたいだけなら <details open> で初期表示を開にできる。

Q&Aで質問する →

この解決法は役立ちましたか？

🔗 関連するエラー

🔗 別カテゴリの関連エラー

📖 この問題を学べるレッスン

HTMLコース（基礎から）で根本から理解する →

✏️ 手を動かして練習

練習ドリル一覧で実際に書いて確認する →

📝 関連ブログ記事

📖 関連する用語

🚀 HTMLコースで基礎を学ぼう！

エラーの原因を根本から理解するには、基礎を体系的に学ぶのが近道です。完全無料・登録不要。

HTMLコースを始める →

❓ 関連するQ&A