最終更新日:
公開日:
リファレンス
HTML
ディテイルズ
details要素
開閉式のメニューを表示します。summary要素と組み合わせ、その他にリストを表示するための要素が必要です。対応していないブラウザでは開閉式にはならず、子孫要素がそのまま表示された状態となります。
サンプルコード
<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
-
この属性が指定されていると初期状態が開いた状態となります。論理属性です。
こちらの記事は役に立ちましたか?
コメントありがとうございます!
運営の参考にさせていただきます。
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。