<details></details>
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | フロー・コンテンツ / インタラクティブ・コンテンツ / パルパブル・コンテンツ |
| 利用場所 | フロー・コンテンツが置ける場所 |
| 内容 | 1つのsummary要素、その後にフロー・コンテンツ |
details要素は、詳細情報を提供する開閉式のウィジェットを表します。
このウィジェットはデフォルトでは閉じられた状態になっていて、ユーザーのリクエストに応じて表示されることになります。
この要素内の先頭にsummary要素を配置すると、詳細情報のキャプション等を示すことができます。
<details>
<summary>詳細を見る</summary>
</details>
| 属性 | 値 | ||
|---|---|---|---|
| 任意属性 | |||
open |
ウィジェットが開いた状態にする | （open） |
値は省略可能 |
details要素に対応しているブラウザでは、詳細情報の表示・非表示を切り替えることができます。（キャプション部分をクリックして切り替えます）
- この要素は詳細情報の表示に使用するものなので、注釈等に使用するのは適切ではありません。
open属性について
open属性は、詳細情報が表示された状態を指定します。この属性が省略された場合は、非表示の状態がデフォルトになります。
<details open>
<summary>詳細を見る</summary>
<p>詳細な情報。</p>
</details>
summary要素の使用について
summary要素を使用することで、詳細情報のキャプション、要約、説明文などを示すことができます。
この要素を使用する場合は、次のようにdetails要素内の先頭に配置します。
<details>
<summary>詳細を見る</summary>
<p>詳細な情報。</p>
</details>
summary要素を省略した場合は、キャプション部分に詳細と表示されます。（Chrome、Edge、Firefoxで確認）
<details>
<p>詳細な情報。</p>
</details>
details要素の組み合わせ
詳細情報に階層を持たせたい場合は、次のようにdetails要素を入れ子にします。
<details>
<summary>詳細を見る</summary>
<p>詳細な情報</p>
<details>
<summary>より詳しく見る</summary>
<p>より詳細な情報</p>
</details>
</details>
また、details要素を並べることで、メニューのように表示することもできます。
<details>
<summary>詳細情報1</summary>
<p>詳細な情報</p>
</details>
<details>
<summary>詳細情報2</summary>
<p>詳細な情報</p>
</details>
<details>
<summary>詳細情報3</summary>
<p>詳細な情報</p>
</details>
- 旧HTMLからの変更点
-
- HTML5.1：details要素が定義されました。
- HTML LS：要素カテゴリーがセクショニング・ルートではなくなりました。［2022/07/05］
使用例
<details>
<summary>alps.jpg</summary>
<dl>
<dt>サイズ</dt><dd>260×160</dd>
<dt>撮影日</dt><dd>8月1日</dd>
<dt>場所</dt><dd>北アルプス</dd>
<dt>画像</dt><dd><img src="alps.jpg" alt="北アルプス" width="260" height="160"></dd>
</dl>
</details>
- 表示例
-
alps.jpg
- サイズ
- 260×160
- 撮影日
- 8月1日
- 場所
- 北アルプス
- 画像
- 対応しているブラウザでは、alps.jpをクリックすると詳細情報が表示されます。
- 未対応のブラウザでは、詳細情報がそのまま表示されてしまいます。
<details open>
<summary>alps.jpg</summary>
<dl>
<dt>サイズ</dt><dd>260×160</dd>
<dt>撮影日</dt><dd>8月1日</dd>
<dt>場所</dt><dd>北アルプス</dd>
<dt>画像</dt><dd><img src="alps.jpg" alt="北アルプス" width="260" height="160"></dd>
</dl>
</details>
- 表示例
-
alps.jpg
- サイズ
- 260×160
- 撮影日
- 8月1日
- 場所
- 北アルプス
- 画像
- 詳細情報が表示された状態になります。対応しているブラウザでは、alps.jpをクリックすると閉じることができます。
<!DOCTYPE html>
<html>
<head>
<title>文書のタイトル</title>
<style>
dl.photo {
width: 260px;
margin: 1em 0;
padding: 10px;
background-color: #ffffff;
}
dl.photo dt {
margin: 0 0 5px;
}
dl.photo dd {
margin: 0 0 5px;
}
dl.photo dd:last-child {
margin: 0;
}
dl.photo p {
margin: 5px;
}
dl.photo summary {
padding: 3px;
background-color: #f5f5f5;
}
dl.photo summary:hover {
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body>
<dl class="photo">
<dt><img src="alps.jpg" alt="北アルプス" width="260" height="160"></dt>
<dd>
<details>
<summary>サイズ</summary>
<p>260×160</p>
</details>
</dd>
<dd>
<details>
<summary>撮影日</summary>
<p>8月1日</p>
</details>
</dd>
<dd>
<details>
<summary>説明</summary>
<p>北アルプスの室堂にて</p>
</details>
</dd>
</dl>
</body>
</html>
- 表示例
-
-
サイズ
260×160
-
撮影日
8月1日
-
説明
北アルプスの室堂にて