<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]

使用例

summary要素を使用した例

<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をクリックすると詳細情報が表示されます。
  • 未対応のブラウザでは、詳細情報がそのまま表示されてしまいます。
open属性を指定した例

<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日

説明

北アルプスの室堂にて