HTML
📋 details/summaryが開閉しない
summary要素が正しく配置されていない
😰 こんな症状
<details>タグを書いたのにクリックしても開閉しない。アコーディオンUIを作ろうとしたときに起きやすいよ。
🔍 原因
details要素が正しく動作するには、直接の子要素としてsummary要素が必要だよ。summaryがdetailsの直接の子になっていない（別の要素で囲まれている等）場合や、CSSでpointer-events: noneが指定されている場合、クリックイベントが無効になって開閉しないんだ。
❌ エラーが起きるコード
<details><p>内容</p></details>
<!-- summary がない -->✅ 直し方
1. <details><summary>タイトル</summary><p>内容</p></details>の構造になっているか確認する。 2. summaryがdetailsの最初の直接の子要素であることを確認する。 3. CSSでpointer-events: noneやuser-select: noneが指定されていないか確認する。 4. JavaScriptでclickイベントがpreventDefault()されていないか確認する。
✅ 修正後のコード
<details><summary>詳細</summary><p>内容</p></details>この解決法は役立ちましたか？
🔗 関連するエラー
- 画像が表示されない — 画像パスが間違っている
- ページのレイアウトが崩れる — タグの閉じ忘れ
- リンクをクリックしても何も起きない — href 属性の書き忘れ
- 文字化けする — charset の指定がない
- フォームの送信ボタンが動かない — type="submit" の書き忘れ
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説