＜summary要素＞ - 要約

公開日: 2017/02/09

summary要素は、要約を表す要素です。details要素で作るディスクロージャーウィジェットのキャプションであると同時に、クリックすることで開閉するボタンの役割を果たします。

概要

名前

summary

カテゴリー

なし。

配置できる場所

summary要素の最初の子要素として配置すること。

コンテンツモデル

Phrasing content。

または、Heading contentのうち、1つの要素。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLElement

デフォルトのスタイル

summary {
	display: block;
}

仕様書

https://html.spec.whatwg.org/multipage/forms.html#the-summary-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜summary要素＞ - 要約</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/summary/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>summary要素は、details要素で作るディスクロージャーウィジェットのキャプションの役割を果たします。summary要素のコンテンツをクリックすると、ディスクロージャーウィジェットが開閉されます。</p>

<details>
	<summary>ここをクリック</summary>
	<p>summaryに後続する内容が表示/非表示になります。</p>
	<p>summaryに後続する内容が表示/非表示になります。</p>
	<p>summaryに後続する内容が表示/非表示になります。</p>
	<p>summaryに後続する内容が表示/非表示になります。</p>
	<p>summaryに後続する内容が表示/非表示になります。</p>
</details>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/666/"> <meta charset="utf-8"> <title>【デモ】＜summary要素＞ - 要約</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/summary/"> </head> <body>

<p>summary要素は、details要素で作るディスクロージャーウィジェットのキャプションの役割を果たします。summary要素のコンテンツをクリックすると、ディスクロージャーウィジェットが開閉されます。</p> <details> <summary>ここをクリック</summary> <p>summaryに後続する内容が表示/非表示になります。</p> <p>summaryに後続する内容が表示/非表示になります。</p> <p>summaryに後続する内容が表示/非表示になります。</p> <p>summaryに後続する内容が表示/非表示になります。</p> <p>summaryに後続する内容が表示/非表示になります。</p> </details>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>