基礎

HTML要素

ディテイルズ

details要素

最終更新日：2023-09-18
公開日：2016-05-26

開閉式のメニューを表示します。summary要素と組み合わせ、その他にリストを表示するための要素が必要です。対応していないブラウザでは開閉式にはならず、子孫要素がそのまま表示された状態となります。

HTML サンプルコード

<details>
  <summary>iPhone</summary>
  <ul>
    <li><a href="#">iPhone6s</a></li>
    <li><a href="#">iPhone 6s+</a></li>
    <li><a href="#">iPhone SE</a></li>
  </ul>
</details>

カテゴリー

フローコンテンツ、セクショニングルート、インタラクティブコンテンツ、パルパブルコンテンツ
コンテンツモデル

最初の子要素をsummary要素とし、それ以降にフローコンテンツ
使用ケース

フローコンテンツが期待される場所

属性

グローバル属性: 下記の属性に加え、グローバル属性を指定することもできます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。
open: この属性が指定されていると初期状態が開いた状態となります。論理属性です。