HTML <details>

<details>は概要に対する詳細を記述するHTMLタグです。details要素の使い方をサンプルを交えてご紹介します。

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。details 要素の終了タグは省略できない。

<details>
  <!-- one summary element followed by flow content -->
</details>

<DETAILS>
  <!-- one summary element followed by flow content -->
</DETAILS>

コンテンツモデル

details 要素の開始タグと終了タグの間には、ひとつの summary 要素と、それに続くフロー・コンテンツを含めることができる。具体的には、以下に示す要素である。

• テキスト
• <a>
• <abbr>
• <address>
• <article>
• <aside>
• <audio>
• <b>
• <bdi>
• <bdo>
• <blockquote>
• <br>
• <button>
• <canvas>
• <cite>
• <code>
• <data>
• <datalist>
• <del>
• <details>
• <dfn>
• <div>
• <dl>
• <em>
• <embed>
• <fieldset>
• <figure>
• <footer>
• <form>
• <h1>
• <h2>
• <h3>
• <h4>
• <h5>
• <h6>
• <header>
• <hgroup>
• <hr>
• <i>
• <iframe>
• <img>
• <input>
• <ins>
• <kbd>
• <label>
• <main>
• <map>
• <mark>
• <math>
• <menu>
• <meter>
• <nav>
• <noscript>
• <object>
• <ol>
• <output>
• <p>
• <picture>
• <pre>
• <progress>
• <q>
• <ruby>
• <s>
• <samp>
• <script>
• <section>
• <select>
• <small>
• <span>
• <strong>
• <sub>
• <sup>
• <svg>
• <table>
• <template>
• <textarea>
• <time>
• <ul>
• <var>
• <video>
• <wbr>

属性

次に示す属性をdetails要素に指定できる。

class

CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。

id

データリストの識別子

open

初期状態で詳細を表示するかどうかを指定する。

open 属性

値	説明
true	初期状態で詳細を表示する
false	初期状態で詳細を表示しない（デフォルト値）

属性名だけ指定して、属性値を指定しない場合は、true を指定したことになる。

概要（summary）の部分をクリックすると、詳細（details）を表示したり、隠したりできる。

<details open>
  <summary>HTML</summary>
  <ol>
    <li>要素</li>
    <li>属性</li>
  </ol>
</details>

HTML

1. 要素
2. 属性

style

CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

JavaScript

JavaScriptからは HTMLDetailsElement インタフェースを通じて details 要素へアクセスできる。

参考文献

Web Hypertext Application Technology Working Group (2022) Interactive elements HTML Living Standard

HTML <summary>

<summary>は詳細に対する概要を記述するHTMLタグです。summary 要素の使い方をサンプルを交えてご紹介します。

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。details 要素の終了タグは省略できない。

<summary>
  <!-- phrasing content -->
</summary>

<SUMMARY>
  <!-- phrasing content -->
</SUMMARY>

コンテンツモデル

summary 要素の開始タグと終了タグの間には、フレージング・コンテンツを含めることができる。具体的には、以下に示す要素である。

• テキスト
• <a>
• <abbr>
• <area>（マップ要素の子孫である場合）
• <audio>
• <b>
• <bdi>
• <bdo>
• <br>
• <button>
• <canvas>
• <cite>
• <code>
• <data>
• <datalist>
• <del>
• <dfn>
• <em>
• <embed>
• <i>
• <iframe>
• <img>
• <input>
• <ins>
• <kbd>
• <label>
• <link>（本文中で許可されている場合）
• <map>
• <mark>
• <math>
• <meta>（itemprop 属性が存在する場合）
• <meter>
• <noscript>
• <object>
• <output>
• <picture>
• <progress>
• <q>
• <ruby>
• <s>
• <samp>
• <script>
• <select>
• <slot>
• <small>
• <span>
• <strong>
• <sub>
• <sup>
• <svg>
• <template>
• <textarea>
• <time>
• <u>
• <var>
• <video>
• <wbr>
• 自律型カスタム要素

属性

以下に示す属性を summary 要素に指定できる。

class

CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。

id

要素を一意に識別できる識別子を指定する。

style

CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

JavaScript

JavaScriptからは HTMLDetailsElement インタフェースを通じて summary 要素へアクセスできる。

参考文献

Web Hypertext Application Technology Working Group (2022) Interactive elements HTML Living Standard