目次に戻る

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は、指定不可。
視覚系ブラウザのデフォルトとして期待されるCSS

  details {display: block;}
視覚系ブラウザにおいて期待されるレンダリング
  • 3個の子要素を伴う内部シャドウ ツリーを持つことが期待される。
  • 最初の子要素は、最初の子たるsummary要素を受け入れる枠である。この枠が表すsummary要素は、ユーザーが詳細の表示・非表示を要求できるようにすることが期待される。
  • 2番目の子要素は、残りの子孫を受け入れる枠である。この部分は、open属性がない場合は{display: block; content-visibility: hidden;}となり、open属性がある場合は{display: block}となることが期待される。
  • 3番目の子要素は、summary要素の::marker疑似要素である。
  • 必須であるはずの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>
表示結果２
その１

内容１

その２

内容２

その３

内容３