概要
情報量の多いUIでは、「詳細を見せたいけど、最初から全部表示するのはうるさい」──そんな場面がある。
そこで便利なのが、HTML標準タグ <details> と <summary>。
これらを使えば、JavaScriptを一切使わずにクリック展開UIを実装できる。
アクセシビリティ的にも優秀で、ネイティブでサポートされているのが魅力。
対象環境
ブラウザ: Chrome / Firefox / Edge / Safari（主要ブラウザすべて対応）
HTML5以降（標準仕様）
基本構文
<details>
<summary>詳細を表示</summary>
<p>ここに詳細な説明や補足テキストを記述。</p>
</details>
表示例（実際のブラウザではこうなる）
▼ 詳細を表示
→ クリックすると中のテキストが展開される。
応用：リストや画像も入れられる
<details>
<summary>ショートカット一覧</summary>
<ul>
<li>Ctrl + S: 保存</li>
<li>Ctrl + Z: 戻る</li>
<li>Alt + Shift + ↑: カーソル追加</li>
</ul>
</details>
テキストだけでなく、リスト・画像・テーブルなどあらゆるHTML要素をネストできる。
スタイリング例（見た目を整えたいとき）
<style>
details {
margin: 1em 0;
padding: 0.5em;
border: 1px solid #ccc;
border-radius: 5px;
}
summary {
font-weight: bold;
cursor: pointer;
}
</style>
アクセシビリティ面でも優秀
-
<summary>は自動的にボタン扱いされ、キーボード操作もOK。 - スクリーンリーダーにも意図が正しく伝わるセマンティクス。
結語
UIを軽くしたい、JSなしで完結したい──そんな願いをHTMLだけで叶えてくれる <details> / <summary>。
ちょっとした設定やオプション表示、補足説明、FAQパネルなど、用途は無限。
HTMLだけでここまでできるということを、今こそ思い出してほしい。
軽やかで、セマンティックで、しかも美しい。
それがこのタグの力だ。