🚪
クリックで開閉、JSなし！`<details>`要素の本気を見よ
クリックで開閉、JSなし！<details>要素の本気を見よ
開閉UIといえば JavaScript？
いえいえ、今や HTMLだけで「開閉・トグルUI」が作れる時代です。
その秘密は…
<details> と <summary>
この記事では、そんな <details> 要素の魅力と実践テクニックを紹介します！
✅ <details> 要素とは？
<details> は、開閉できるコンテンツを表すセマンティックなHTMLタグです。
内部の <summary> をクリックすると、その中身が開いたり閉じたりします。
<details>
<summary>もっと見る</summary>
<p>ここに詳細情報が表示されます。</p>
</details>
これだけで開閉UIが完成！しかも…
- ✅ JavaScript不要
- ✅ セマンティックに意味づけ可能
- ✅ デフォルトで開閉が動作
- ✅ キーボード操作やスクリーンリーダーにも対応（アクセシビリティ◎）
🎨 よくあるカスタマイズ：矢印（▶︎）の制御
Safari（特にiOS）などでは、デフォルトの▶︎マークが表示されるため、
自前のアイコンに差し替えたい・非表示にしたいケースも多いです。
details summary {
list-style: none; /* Safariでの▶︎除去 */
}
details summary::-webkit-details-marker {
display: none; /* Chromeでも除去 */
}
これで▶︎マークを消し、代わりにCSSやSVGでアイコンを追加することも可能です。
💡 状態に応じたスタイルも可能！
開いているかどうかは [open] 属性で判定できます。
details[open] summary {
font-weight: bold;
color: gray;
}
🛠 実装パターン3選
① FAQアコーディオン
<details>
<summary>Q. 配送料はかかりますか？</summary>
<p>A. 全国一律500円です。5,000円以上のご注文で送料無料になります。</p>
</details>
② プロフィールの詳細表示
<details>
<summary>須藤 作良</summary>
<ul>
<li>職業：Webデザイナー</li>
<li>経験：10年以上</li>
<li>スキル：HTML, CSS, Figma, Git, etc.</li>
</ul>
</details>
③ スマホ向けナビゲーションメニュー
<details class="nav">
<summary>メニュー</summary>
<nav>
<a href="#">ホーム</a>
<a href="#">サービス</a>
<a href="#">お問い合わせ</a>
</nav>
</details>
⚠️ 注意点とTips
-
<summary>を省略すると開閉できなくなります -
<summary>を非表示（display: none）にすると操作不能に - 複数
<details>を開閉連動させる場合はJSが必要（今回の範囲外）
✅ まとめ
-
details+summaryを使えば HTMLだけで開閉UIが実現できる - FAQ・ナビ・プロフィールなど、よくあるUIに応用可能
- セマンティックかつアクセシブルで、保守性・拡張性も高い
「ちょっとしたUIだけどJS書くのは面倒…」というときこそ、
<details> 要素の本気を試してみてください！
Discussion