<details> ユーザーのリクエストに応じて追加情報を提供するディスクロージャー・ウィジェットを設置する
取り扱い | 現行の標準 |
カテゴリ |
フロー・コンテンツ インタラクティブ・コンテンツ パルパブル・コンテンツ |
親にできる要素 | フロー・コンテンツを受け入れる要素 |
子にできる要素 | 一つの<summary> と、それに続くフロー・コンテンツ |
対応ブラウザ | caniuseで確認 |
<details>タグの説明
<details>
は、ユーザーのリクエストに応じて追加情報を提供するディスクロージャー・ウィジェットを設置するために使用します。ディスクロージャー・ウィジェットとは、表示/非表示を切り替えることが可能な折りたたみ式のインターフェイスのことです。
このタグの登場によって、折りたたみ式のインターフェイスが簡単に作れるようになりました。今までJavaScriptやCSSに頼っていた機能が、HTMLのみで完成します。
<details>
は要約した概要の詳細を表すものです。この内容を簡潔に表すラベルや概要は<summary>
で定義します。
<details>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- 視覚的な効果として、開閉を表す三角形のアイコンが
<summary>
の開始地点に表示されます。 - 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<details>に指定できる主な属性
- open
- ページ読み込み時に、あらかじめ詳細を開いておく場合に追加します。指定しない場合は初期状態で詳細が非表示となります。この属性は論理属性のため、詳細を非表示にする場合は完全に削除する必要があります。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<details>の使い方とサンプル
このタグを使ったマークアップのサンプルです。表示確認で<summary>
で囲われた行をクリック(タップ)してみましょう。
HTML
<details>
<summary>summaryタグで指定した要約</summary>
<div>details要素に含まれる詳細内容。</div>
</details>
表示確認
summaryタグで指定した要約
details要素に含まれる詳細内容。summary要素をクリックすると、details要素にopen属性が付与されて内容が表示されます。親要素の高さが制限されていない場合は、自動的に調整されます。
open
属性を与えて、初めから内容を開示しておくこともできます。
HTML
<details open>
<summary>open属性を与えたdetails</summary>
<div>予め詳細を開いておきたい場合は、open属性をマークアップに加えます。</div>
</details>
表示確認
open属性を与えたdetails
初めから詳細を開いておきたい場合は、open属性をマークアップに加えます。
アコーディオン形式のメニューを作成する
<details>
を活用して、アコーディオン形式のメニューを作ることもできます。以下の例では、CSSのアニメーションで内容を展開した時の見栄えを調整しています。
HTML
<details id="dnav">
<summary>ナビゲーション</summary>
<ul>
<li><a href="#">リスト項目</a></li>
<li><a href="#">リスト項目</a></li>
<li><a href="#">リスト項目</a></li>
<li><a href="#">リスト項目</a></li>
<li><a href="#">リスト項目</a></li>
</ul>
</details>
CSS
#dnav {
background: #eee;
}
#dnav summary {
cursor: pointer;
list-style: none;
padding: .5em;
background: #333;
color: #eee;
text-align: center;
}
#dnav ul {
list-style: none;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-wrap: nowrap;
gap: 1px 3px;
margin: 0;
padding: .3em;
}
#dnav li > a {
display: block;
padding: .5em;
background: #fff;
text-decoration: none;
}
#dnav li > a:hover {
color: #fff;
background: #0099ff;
}
#dnav[open] ul {
animation: fadein 0.5s ease;
}
@keyframes fadein {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: none;
}
}
表示確認
<details>に関連するHTMLタグ
文字列の表現を指定する要素 | |
---|---|
<div> | ブロックレベル要素としての範囲を指定 |
<span> | インライン要素としての範囲を指定する |
<br> | 改行を行う |
<wbr> | 文章の中で改行可能位置を指定する |
<b> | 文字を太字にする |
<mark> | 文章の中で目立たせたい箇所をマーキングする |
<pre> | ソースを整形済みテキストとして表示する |
<bdi> | ページの書字方向とは別の書字方向を指定する |
<bdo> | 書字方向を指定する |
<ruby> | ルビを振る文字列の範囲を指定する |
<rt> | ルビの内容を指定する |
<rp> | ルビが非対応な環境で読みがなを囲う記号を指定する |
<rtc> | ルビテキストの集まりを指定する |
<sub> | 下付き文字として表示する |
<sup> | 上付き文字として表示する |
<details> | 折りたたみ可能なディスクロージャー・ウィジェットを設置する |
<summary> | 折りたたみ可能なディスクロージャー・ウィジェットの概要を設定する |