目次に戻る

details要素：HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
  1. 1個だけのsummary要素。必須。
  2. 上記に続いて、Flow content
  • name属性が指定されているdetails要素の子孫として、それと同一のname属性値をもつdetails要素を配置してならない。
属性
  • グローバル属性
  • name→相互に関連するdetails要素のグループの名前文字列。同一グループ内（同一のname属性値を有する）において、あるdetails要素が開かれると、他のdetails要素は閉じられる。
  • open→ブーリアン属性。指定されていれば初期状態は「表示」、そうでなければ「非表示」。name属性値に基づく同一グループ内においては、この属性が指定されたdetails要素が複数あってはならない。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、group。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外のroleは、指定不可。
視覚系ブラウザにおいて期待されるレンダリング
  • 2個のスロットを有するblockボックスとして表示。
  • 1個目のスロットにはsummary要素を配置し、閲覧者が2個目のスロットの表示・非表示を要求できるようにする。
  • 2個目のスロットにはその他の子孫を配置し、open属性がない場合はその（疑似的な）style属性にdisplay: block; content-visibility: hidden;を設定し、open属性がある場合はこの（疑似的な）style属性を削除する。
  • 必須であるはずのsummary要素がない場合（非準拠）は、それに相当するデフォルトの凡例を表示する。一般的には、当該言語における「details」を意味する単語をデフォルトの凡例とする場合が多い。
意味・用法

ユーザーが追加の情報やコントロールを得ることができる開閉式ウィジェットを表す。

私見・補足

ユーザーの操作によって表示・非表示が切り替えられる追加情報・追加コントロールの部分を表す。

クリック操作によるものが一般的になるかと推測される。

意味合い的にいって、この要素の内容に、最初から見えていてしかるべき重要な情報を含めるのは間違いだろう。

表示確認

ソース１

  <p>お問い合わせは、著者宛てに電子メール(example@example.com)を送信してください。</p>
  <details>
    <summary>著者の詳細</summary>
    <p>名前：○○××</p>
    <p>年齢：３０歳</p>
    <p>ホームページアドレス：example.com</p>
  </details>
表示結果１

お問い合わせは、著者宛てに電子メール(example@example.com)を送信してください。

著者の詳細

名前：○○××

年齢：３０歳

ホームページアドレス：example.com

ソース２

  <div>
    <details name="accordion" open="open">
      <summary>その１</summary>
      <p>内容１</p>
    </details>
    <details name="accordion">
      <summary>その２</summary>
      <p>内容２</p>
    </details>
    <details name="accordion">
      <summary>その３</summary>
      <p>内容３</p>
    </details>
  </div>
表示結果２
その１

内容１

その２

内容２

その３

内容３