最終更新日

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」外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。