<details></details>

ブラウザ
  • Cr
  • Sf
  • Fx
分類 フロー・コンテンツ / インタラクティブ・コンテンツ / セクショニング・ルート / パルパブル・コンテンツ
利用場所 フロー・コンテンツが置ける場所
内容 1つのsummary要素、その後にフロー・コンテンツ

details要素は、ユーザーのリクエストに応じて提供される詳細情報（追加情報）を表します。

この要素内の先頭にsummary要素を配置すると、その情報のキャプション等を示すことができます。

  • この要素はHTML 5.1で追加されました。

<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、Safari、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>

使用例

summary要素を使用した例

<details>
<summary>kobe.jpg</summary>

<dl>
<dt>大きさ</dt><dd>200×113</dd>
<dt>サイズ</dt><dd>8.81KB</dd>
<dt>撮影日</dt><dd>1月2日</dd>
<dt>場所</dt><dd>神戸</dd>
<dt>内容</dt><dd><img src="kobe.jpg" alt="" width="200" height="113" title="北野から見下ろす神戸の街並み"></dd>
<dt>登録</dt><dd><label><input type="checkbox" name="add" value="1">アルバムに登録する</label></dd>
</dl>

</details>
表示例
kobe.jpg
大きさ
200×113
サイズ
8.81KB
撮影日
1月2日
場所
神戸
内容
登録
  • 対応しているブラウザでは、kobe.jpをクリックすると詳細情報が表示されます。
  • 未対応のブラウザでは、詳細情報がそのまま表示されてしまいます。
open属性を指定した例

<details open>
<summary>kobe.jpg</summary>

<dl>
<dt>大きさ</dt><dd>200×113</dd>
<dt>サイズ</dt><dd>8.81KB</dd>
<dt>撮影日</dt><dd>1月2日</dd>
<dt>場所</dt><dd>神戸</dd>
<dt>内容</dt><dd><img src="kobe.jpg" alt="" width="200" height="113" title="北野から見下ろす神戸の街並み"></dd>
<dt>登録</dt><dd><label><input type="checkbox" name="add" value="1">アルバムに登録する</label></dd>
</dl>

</details>
表示例
kobe.jpg
大きさ
200×113
サイズ
8.81KB
撮影日
1月2日
場所
神戸
内容
登録
  • 詳細情報が表示された状態になります。対応しているブラウザでは、kobe.jpをクリックすると閉じることができます。
メニュー風に作成した例

<!DOCTYPE html>
<html>
<head>

<title>文書のタイトル</title>

<style>

dl.photo {
width: 200px;
margin: 1em 0;
padding: 10px;
background-color: #ffffff;
}
dl.photo dd  {
margin: 0;
}
dl.photo ul {
margin: 10px 0;
padding: 0;
list-style-type: none;
}
dl.photo li {
margin: 0 0 2px;
}
dl.photo p {
margin: 3px 0 0 1em;
}
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="kobe.jpg" alt="kobe.jpg" width="200" height="113"></dt>
<dd>

<ul>
<li><details>
<summary>大きさ</summary>
<p>200×113</p>
</details></li>

<li><details>
<summary>サイズ</summary>
<p>8.81KB</p>
</details></li>

<li><details>
<summary>撮影日</summary>
<p>1月2日</p>
</details></li>

<li><details>
<summary>説明</summary>
<p>北野から見下ろす神戸の街並み</p>
</details></li>
</ul>

</dd>
</dl>

</body>
</html>
表示例
kobe.jpg
  • 大きさ

    200×113

  • サイズ

    8.81KB

  • 撮影日

    1月2日

  • 説明

    北野から見下ろす神戸の街並み