POINT !
<details> 要素のポイント！
- JavaScript不要。HTMLだけで開閉ロジックが完結する。
- summary 要素がクリック可能な見出し（ラベル）になる。
- Q&Aページや、補足説明を畳んでおきたい場合に非常に便利。
<details> 要素は、標準で「アコーディオン」の機能を持っています。開閉の状態は属性で管理され、CSSでのカスタマイズも容易です。
概要
具体的な役割
「よくある質問」の回答を隠しておいたり、設定画面の「詳細オプション」をすっきりさせたりするのに最適です。
利用例
モダンなアコーディオン
スタイルを適用して、使いやすいUIに仕上げます。
CSS Style
.modern-accordion { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
summary { padding: 15px; background: #f8f9fa; cursor: pointer; font-weight: bold; outline: none; }
summary:hover { background: #eef2f5; }
.details-body { padding: 15px; border-top: 1px solid #ddd; background: white; }
details[open] summary { border-bottom: 1px solid #ddd; background: #4facfe; color: white; }HTML Structure
<details class="modern-accordion">
<summary>Web辞書プロジェクトとは？</summary>
<div class="details-body">
<p>HTML/CSSの知識をインタラクティブに学べる、次世代のリファレンスサイト構築を目指すプロジェクトです。</p>
</div>
</details>