HTML <details> タグ

定義と使用法

<details> タグは、ユーザーが必要に応じて開閉できる他の詳細情報を定義します。

<details> タグは、ユーザーが開閉できるインタラクティブな小部件を作成するために通常使用されます。デフォルトでは、小部件は閉じられています。開くと、内容が展開され表示されます。

どんなタイプのコンテンツも <details> タグ内で。

ヒント：<summary>タグ と <details> 組み合わせて使用すると、詳細情報に表示されるタイトルを指定できます。タイトルをクリックすると、 <details> 定義された内容。

も参照してください：

HTML DOM リファレンスマニュアル：Details オブジェクト

インスタンス

例1

ユーザーが必要に応じて開閉できる詳細情報を定義します：

<details>
  <summary>未来世界の中心（Epcot Center）</summary>
  <p>Epcot はウォルト・ディズニー・ワールド・リゾートのテーマパークで、興味深いアトラクション、国際的な展示、受賞歴のある花火と季節ごとのイベントがあります。</p>
</details>

実際に試してみる

例2

CSSを使って<details>と<summary>のスタイルを設定します：

<html>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}
details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
  <summary>未来世界の中心（Epcot Center）</summary>
  <p>Epcot はウォルト・ディズニー・ワールド・リゾートのテーマパークで、興味深いアトラクション、国際的な展示、受賞歴のある花火と季節ごとのイベントがあります。</p>
</details>
</body>
</html>

実際に試してみる

属性

属性 値 説明
open open ユーザーが詳細を表示できるように設定する（オープン）

グローバル属性

<details> タグは以下のイベント属性もサポートしています HTML でのグローバル属性。

イベント属性

<details> タグは以下のイベント属性もサポートしています HTML でのイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザは以下のデフォルト値を使用して表示します <details> 要素：

details {
  display: block;
}

ブラウザのサポート

表の数字は、その要素を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
12.0 79.0 49.0 6.0 15.0