概要

情報量の多い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だけでここまでできるということを、今こそ思い出してほしい。

軽やかで、セマンティックで、しかも美しい。
それがこのタグの力だ。