最終更新日
details要素は、追加情報を得られる手段を提供します。たとえば、ファイルのダウンロード中の「詳細表示」機能や、クリックすると下位のサブメニューが表示される折りたたみ式のメニューなどでの応用が可能です。details要素の子要素として、summary要素を最初に含めることで、追加情報の説明や概要を示すことができます。details要素は、Flowコンテンツの記述箇所で使用できます。
details要素のopen属性を指定すると、追加の詳細情報は最初からユーザーに表示されます。open属性が指定されていない場合、詳細情報は非表示となります。
details要素を脚注に使用することは推奨されていません。
カテゴリ | タグの省略 | 親要素 | 子要素 |
---|---|---|---|
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>