HTML <summary> タグ

定義と使用方法

<summary> タグとして <details>要素 見えるタイトルを定義しました。タイトルをクリックすると、詳細を表示/非表示できます。

注意：<summary> 要素は <details>要素 の最初の子要素。

参照もしくは

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

インスタンス

例1

を使用 <summary> 要素：

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

自分で試してみる

グローバル属性

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

イベント属性

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

デフォルトの CSS 設定

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

summary {
  display: block;
}

ブラウザのサポート

このテーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

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