<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;
}
}
表示確認