Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

トップページ
HTMLタグ辞典
<details> / <summary>

<details> / <summary>

『<details>』はクリックで開閉できるウィジェットを作成する要素で、『<summary>』はその開閉部分に表示される見出しラベルを指定します。

構文

<details>
  <summary>クリックして開く見出し</summary>
  <p>開いたときに表示されるコンテンツ</p>
</details>

属性一覧

属性	概要
open	『<details>』に付与すると、ページ読み込み時から内容を開いた状態で表示します。

サンプルコード

<!-- 閉じた状態で始まるアコーディオン -->
<details>
  <summary>HTMLとは何ですか？</summary>
  <p>HTMLはHyperText Markup Languageの略で、Webページの構造を記述する言語です。</p>
</details>

<!-- 最初から開いた状態 -->
<details open>
  <summary>CSSとは何ですか？</summary>
  <p>CSSはCascading Style Sheetsの略で、HTMLで作った構造に見た目を付けるための言語です。</p>
</details>

<!-- 複数のリストを入れることもできる -->
<details>
  <summary>主なプログラミング言語</summary>
  <ul>
    <li>JavaScript</li>
    <li>Python</li>
    <li>PHP</li>
    <li>Swift</li>
  </ul>
</details>

実行結果

1つ目の項目は閉じた状態（▶ HTMLとは何ですか？）、2つ目は最初から開いた状態（▼ CSSとは何ですか？ + 内容）で表示されます。見出し部分をクリックするたびに開閉します。

概要

『<details>』と『<summary>』を使うと、JavaScriptを一切使わずにアコーディオン（開閉式）UIを実装できます。FAQ（よくある質問）・用語集・長い補足説明を折りたたむ場合などによく活用されます。

『<summary>』は必ず『<details>』の最初の子要素として記述します。『<summary>』を省略した場合、ブラウザが自動的に「詳細」などのデフォルトラベルを表示しますが、必ず明示的に書くようにしましょう。『<summary>』の中には見出し（『<h2>』〜『<h6>』）や『<span>』などのインライン要素を入れることもできます。

開閉の状態はJavaScriptの『toggle』イベントで検知することもでき、開いたときにコンテンツを動的に読み込む遅延ロードにも応用できます。CSSの『details[open]』セレクタを使えば、開いた状態だけにスタイルを適用することも可能です。