最終更新日 2021年4月7日

details要素

details要素は、追加情報を得られる手段を提供します。たとえば、ファイルのダウンロード中の「詳細表示」機能や、クリックすると下位のサブメニューが表示される折りたたみ式のメニューなどでの応用が可能です。details要素の子要素として、summary要素を最初に含めることで、追加情報の説明や概要を示すことができます。details要素は、Flowコンテンツの記述箇所で使用できます。

details要素のopen属性を指定すると、追加の詳細情報は最初からユーザーに表示されます。open属性が指定されていない場合、詳細情報は非表示となります。

details要素を脚注に使用することは推奨されていません。

HTML5での変更点

・details要素は、HTML5で追加された新しい要素です。

カテゴリ	タグの省略	親要素	子要素
Flowコンテンツ Interactiveコンテンツ Sectioningルート	省略不可	Flowコンテンツを子にできる要素	summary / Flowコンテンツ

属性	値	説明
open	open	論理属性。詳細情報を最初から表示します。
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<body>
  <h1>メニュー一覧</h1>
  <details>
    <summary>ハンバーガー</summary>
    <p>香ばしく焼き上げられたビーフパティが特徴です。</p>
  </details>
  <details>
    <summary>チーズバーガー</summary>
    <p>まろやかでクリーミーなチーズが特徴です。</p>
  </details>
  <details>
    <summary>フィレオフィッシュ</summary>
    <p>クリーミーで酸味がきいたタルタルソースが特徴です。</p>
  </details>
</body>

参考文献：W3C HTML5「4.11.1 The details element」

ザマワンにエントリーしました！

『ザマワン』は「座間ワンミニッツ」の略称であり、座間市の魅力を１分にギュッと詰め込む動画コンテストです。