HTMLのdetails・summary要素とは？アコーディオンの作り方を解説

PR HTML

HTMLのdetails・summary要素とは？アコーディオンの作り方を解説

💡 この記事でわかること

  • details要素・summary要素とは何か
  • 基本的な書き方とopen属性
  • FAQページやアコーディオンUIでの使い道
  • 矢印マークをCSSでカスタマイズする方法
  • 初心者がつまずきやすいポイント

1. details要素・summary要素とは？

details要素とは、
👉 クリックすると中身が開いたり閉じたりする「折りたたみ」表示を作るタグです。

summary要素は、そのdetailsの「見出し」部分にあたるタグで、detailsとセットで使います。クリックできるのはsummaryの部分で、その下にdetailsの残りの中身が開閉して表示されます。

「よくある質問(FAQ)」のように、質問だけを一覧で見せておき、気になった項目だけクリックして回答を読んでもらいたい、というときによく使われます。

💡 これまでこうした開閉UIはJavaScriptで作るのが一般的でしたが、details・summary要素を使えばHTMLとCSSだけで(JavaScriptなしで)実現できます。

2. 基本的な書き方

details要素の中に、まずsummary要素で見出しを書き、そのあとに開閉させたい中身を続けます。

<details>
  <summary>質問1: HTMLとは何ですか？</summary>
  <p>Webページの構造を作るためのマークアップ言語です。</p>
</details>

👉 ブラウザの標準スタイルでは、summaryの左側に▶(閉じているとき)・▼(開いているとき)のような三角マークが自動的に表示され、何もCSSを書かなくても開閉できるUIになります。

3. open属性で最初から開いた状態にする

detailsタグにopen属性を付けると、ページを開いた時点ですでに中身が表示された状態になります。

<details open>
  <summary>最初から開いた状態</summary>
  <p>open属性を付けると、ページ読み込み時から中身が表示された状態になります。</p>
</details>

💡 特に重要な項目だけ最初から開いておきたい、という場合にopen属性が使えます。

4. よくある使い道

FAQ(よくある質問)ページ

質問と回答をひと組ずつdetails・summaryで囲めば、質問一覧をすっきり見せつつ、気になる回答だけ読んでもらえるFAQページが作れます。

長い補足情報を隠しておく

「詳しく見る」のような形で、本文の流れを崩したくない補足情報や、ネタバレを含む内容を折りたたんでおく用途にも向いています。

🔍 summary要素は見た目や役割がボタンに近いですが、button要素とは異なるタグです。ボタン自体の使い方について詳しくは、以下の記事も参考にしてください。

👉 buttonタグについての記事はこちら

5. 矢印マークをCSSでカスタマイズする

ブラウザ標準の三角マークをそのまま使わず、自分でデザインした矢印やアイコンに差し替えたい場合は、CSSで以下のように書き換えます。

summary {
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "▼";
  margin-left: 8px;
}

details[open] summary::after {
  content: "▲";
}

💡 list-styleでの非表示指定はブラウザによって効かない場合があるため、Safari(WebKit系ブラウザ)向けに::-webkit-details-markerも合わせて非表示にしておくと安定します。そのうえで、自作した矢印を::afterで追加し、details[open]状態のときだけ向きを変える、という形が定番です。

6. JavaScriptと組み合わせる

detailsが開閉したタイミングを検知したい場合は、toggleイベントを使います。

const details = document.querySelector("details");

details.addEventListener("toggle", () => {
  console.log(details.open ? "開きました" : "閉じました");
});

open属性はJavaScriptからdetails.openの真偽値としても操作できるため、「他のボタンを押したら特定のdetailsを開く」といった制御も可能です。

7. 初心者がつまずきやすいポイント

summary要素はdetailsの最初の子要素にする

summary要素は、details要素の一番最初の子要素として置く必要があります。順番を変えたり、summaryを省略したりすると、ブラウザが自動で用意する簡易的な見出しが使われるなど、意図しない見た目になることがあります。

複数のdetailsを1つだけ開くようにする(name属性)

ラジオボタンのように、複数のdetailsのうち1つを開くと他が自動的に閉じる、という挙動にしたい場合、同じ名前のname属性を各detailsに指定することで実現できる仕様が追加されています。

<details name="faq">
  <summary>質問1</summary>
  <p>回答1</p>
</details>

<details name="faq">
  <summary>質問2</summary>
  <p>回答2</p>
</details>

⚠️ 比較的新しく追加された機能のため、古いブラウザでは対応していない可能性があります。実際に使う際は、対象ブラウザの対応状況を確認してから採用すると安心です。

まとめ

details要素・summary要素を使うと、JavaScriptを書かなくてもクリックで開閉できるアコーディオンUIやFAQページが作れます。

  • summary要素はdetailsの見出し・クリック対象になる
  • open属性で最初から開いた状態にできる
  • 矢印マークはCSSの::afterや::-webkit-details-markerで自由にカスタマイズできる
  • toggleイベントでJavaScriptから開閉状態を検知・操作できる

まずは1組のdetails・summaryを実際に書いて、クリックで開閉する動きを確かめてみましょう。

-HTML
-, , ,