ウェブランサー

<details> ユーザーのリクエストに応じて追加情報を提供するディスクロージャー・ウィジェットを設置する

取り扱い HTML5から追加された要素
カテゴリ フロー・コンテント
パルパブル・コンテント
親にできる要素 フロー・コンテンツが期待される場所
子にできる要素 最初の子要素として1つの<summary>>要素と、それに続くフロー・コンテンツ
対応ブラウザ <details>の対応状況を確認する

<details>タグの説明

<details>は、ユーザーのリクエストに応じて追加情報を提供するディスクロージャー・ウィジェットを設置するために使用します。ディスクロージャー・ウィジェットとは、表示/非表示を切り替えることができる折りたたみ式のインターフェイスのことです。

<details>の最初の子要素に<summary>>要素を設置することで、追加情報の要約を提供することができます。

<details>タグの特徴

<details>は、ページ内に複数使うことができます。この要素自体を入れ子構造にするこはできません。

<details>タグに指定できる属性

open属性
ページ読み込み時に詳細を開いておく。指定しない場合はfalseとなり、詳細は非表示となります。
グローバル属性
基本的に全てのHTML要素に共通で指定できる属性です。

<details>タグの使い方とサンプル

<details>を使ったマークアップのサンプルです。

HTML
<details>
	<summary>summaryタグで指定した要約</summary>
	<p>details要素に含まれる詳細内容。</p>
</details>
<details>
	<summary>summaryタグで指定した要約</summary>
	<p>details要素に含まれる詳細内容。</p>
</details>
<details>
	<summary>summaryタグで指定した要約</summary>
	<p>details要素に含まれる詳細内容。</p>
</details>
表示確認
summaryタグで指定した要約

details要素に含まれる詳細内容。

summaryタグで指定した要約

details要素に含まれる詳細内容。

summaryタグで指定した要約

details要素に含まれる詳細内容。

<details>に関連するHTMLタグ

コンテンツグループ要素
<blockquote> 引用文であることを表す(長文用)
<dd> 定義した用語の説明を記述する
<details> ユーザーのリクエストに応じて追加情報を提供するディスクロージャー・ウィジェットを設置する
<div> ブロックレベル要素としての範囲を指定
<dl> 定義リストであることを表す
<dt> 定義する用語を表す
<figcaption> 参照される写真や図表にキャプションを追加する
<figure> 写真や図表などの自己完結した要素を表す
<hr> 区切り線(罫線)を引く
<li> リストの項目を表示する
<menu> リストをメニューとして扱う
<ol> 順序のあるリストを定義する
<p> 段落を指定する
<pre> ソースを整形済みテキストとして表示する
<summary> 詳細内容(<details>)の要約や概要を設定する
<template> ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する
<ul> 順序のないリストを定義する