＜details要素＞ - ディスクロージャーウィジェット

公開日: 2017/02/09

details要素は、ディスクロージャーウィジェット(disclosure widget)を表す要素です。ユーザーが表示、非表示を切り替えられるコンテンツを設置できます。常には表示される必要がない内容を畳んでおくことで、スペースの節約にもなるでしょう。

概要

名前

details

カテゴリー

Flow content

Sectioning content

Interactive content

Palpable content

配置できる場所

Flow contentが期待される場所。

コンテンツモデル

1個のsummary要素と、それに続くFlow content。

タグの省略

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

DOM Interface

HTMLDetailsElement

デフォルトのスタイル

details {
	display: block;
}

仕様書

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

属性

open

この属性を付けると、ディスクロージャーウィジェットが開いた状態になる。論理属性。

デモを見る

グローバル属性

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

説明

基本的な使い方

details要素の使い方は単純です。まずは、summary要素を先頭に配置して下さい。この要素がボタンになります。

HTML

<details>
	<summary>ここをクリック</summary>
</details>

そして、その後に見え隠れするコンテンツを配置して下さい。リストやテーブル、フォームなど自由に配置できます。

HTML

<details>
	<summary>ここをクリック</summary>
	<!-- 見え隠れするコンテンツ -->
	<p>見え隠れするコンテンツです。</p>
	<p>見え隠れするコンテンツです。</p>
	<p>見え隠れするコンテンツです。</p>
	<p>見え隠れするコンテンツです。</p>
	<p>見え隠れするコンテンツです。</p>
</details>

デモを開く

デフォルトで開いておく

open属性を付けると、最初から開いた状態にできます。

HTML

<details open>
	<summary>ここをクリック</summary>
	<!-- 見え隠れするコンテンツ -->
	<p>見え隠れするコンテンツです。</p>
	<p>見え隠れするコンテンツです。</p>
	<p>見え隠れするコンテンツです。</p>
	<p>見え隠れするコンテンツです。</p>
	<p>見え隠れするコンテンツです。</p>
</details>

デモを開く

スタイリング

details要素は、開いている状態の時はopen属性が付き、閉じている状態の時はopen属性が外れます。その性質を利用することで、スタイルシートを振り分けて適用することができます。

CSS

/* 開いている状態 */
details[open] {
}

/* 閉じている状態 */
details:not([open]) {
}

例えば、開いている状態と閉じている状態でボタンのテキストを変えるには次の通りです。

HTML

<details>
	<summary>
		<span class="do-open">開く</span>
		<span class="do-close">閉じる</span>
	</summary>
	<!-- 見え隠れするコンテンツ -->
	<p>見え隠れするコンテンツです。</p>
</details>

デモを開く

CSS

/* 開いている状態 */
details[open] .do-open {
	display: none ;
}

/* 閉じている状態 */
details:not([open]) .do-close {
	display: none ;
}

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜details要素＞ - ディスクロージャーウィジェット</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/details/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>details要素は、ディスクロージャーウィジェットを設置するための要素です。ユーザーが表示、非表示を切り替えられるコンテンツを提供できます。</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="/665/"> <meta charset="utf-8"> <title>【デモ】＜details要素＞ - ディスクロージャーウィジェット</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/details/"> </head> <body>

<p>details要素は、ディスクロージャーウィジェットを設置するための要素です。ユーザーが表示、非表示を切り替えられるコンテンツを提供できます。</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>