JavaScriptなしで開閉できる！HTMLの details と summary

• 2026.10.11

FAQや補足説明を、必要なときだけ開いて読めるようにしたい。そんな場面では、JavaScriptを用意する前にHTMLの <details> と <summary> が使えないか考えてみると便利です。

details と summary は何をするもの？

<details> は、内容を開閉できる折りたたみ領域を作る要素です。見出し役になる <summary> をクリックすると、中身の表示・非表示が切り替わります。

ブラウザ標準の機能なので、基本的な開閉だけならJavaScriptは不要。キーボードでも操作できるため、独自に開閉処理を一から組むより手軽です。

まずは最小の書き方

<details>
  <summary>返品について</summary>
  <p>商品到着後7日以内にご連絡ください。</p>
</details>

<summary> に表示したいラベルを書き、その後ろに開いたときの内容を置きます。FAQ、注釈、設定項目の補足など、「全員に常時見せなくてもよい情報」と相性が良い書き方です。

最初から開いておきたいとき

open 属性を付けると、初期状態を開いたままにできます。

<details open>
  <summary>今日のお知らせ</summary>
  <p>メンテナンスは18時から予定しています。</p>
</details>

open は真偽属性です。閉じた状態にしたい場合は open="false" と書くのではなく、属性そのものを外します。

どんな場面で役立つ？

• よくある質問（FAQ）の回答
• 長い注意事項や補足説明
• コード例や変更履歴の一時的な収納

情報量が多いページで、まず要点だけを見せたいときに重宝します。ただし、購入条件やエラー内容など必ず読んでほしい重要情報は、初期状態で隠さないほうが安全です。

使うときの注意点

<summary> は <details> の最初の子要素に置きます。また、「詳細はこちら」だけではなく、「返品について」のように開く内容が分かるラベルにしておくと親切です。

ブラウザ標準の三角マーカーや余白は環境によって見え方が少し異なります。サイトのデザインに合わせる場合も、フォーカス表示を消しっぱなしにしないなど、操作中であることが分かる見た目を残しましょう。

参照：MDN「<details>: 詳細折りたたみ要素」