<details>タグの解説
<details>は、ユーザーのリクエストに応じて追加情報を提供するディスクロージャー・ウィジェットを作成します。ディスクロージャー・ウィジェットとは、ユーザーが任意のタイミングで表示・非表示を切り替えられる折りたたみ式のインターフェイスのことです。
この要素を使用すると、JavaScriptやCSSを使わずに簡単に折りたたみ式の項目を作成できます。例えば、目次やチュートリアルが長くなってしまう場合に、ユーザーが必要な時だけ詳細を確認できる仕組みを提供できます。
<details>はウィジェットを開いた時に表示される内容を定義するものです。開始タグの直後に<summary>を配置し、ウィジェットを折りたたんだ時に表示する要約を指定できます。
<details>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- 視覚的な効果として、開閉を表す三角形のアイコンが
<summary>の開始地点に表示されます。 - 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<details>要素に指定できる属性
open- ページ読み込み時に、あらかじめ詳細を開いておく場合に追加します。指定しない場合は初期状態で詳細が非表示となります。この属性は論理属性であるため、詳細を非表示にする場合は完全に削除する必要があります。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<details>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。ウィジェットを閉じた状態では<summary>の内容だけが表示されます。この範囲をクリックすると、ウィジェットが開いて詳細が表示されます。
<details>
<summary>Summary：見出しや要約を表示します</summary>
<p>ウィジェットを開いた時に表示される内容。</p>
</details>
open属性で最初から開いた状態で表示させる
ウィジェットを最初から開いた状態で表示したい場合は、<details>にopen属性を指定します。この属性は閉じているウィジェットを開いた時にも付与されるので、CSSのセレクターやフラグ管理に利用できます。
<details open>
<summary>Summary：見出しや要約を表示します</summary>
<p>ウィジェットを開いた時に表示される内容。</p>
</details>
アコーディオン形式のメニューを作成する
<details>を活用して、アコーディオン形式のメニューを作ることもできます。以下の例では、CSSのアニメーションで内容を展開した時の見栄えを調整しています。
<details class="sample-block">
<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>
.sample-block {
background: #666;
}
.sample-block summary {
list-style-type: "";
padding: 0.5rem;
background: #333;
color: #eee;
text-align: center;
cursor: pointer;
}
.sample-block ul {
list-style-type: "";
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 1px;
padding: 0.5rem;
margin: 0;
}
.sample-block li > a {
display: block;
padding: 0.5rem;
background-color: #fff;
color: currentColor;
text-decoration: none;
}
.sample-block li > a:hover {
background-color: #09f;
color: #fff;
}
.sample-block[open] ul {
animation: fadein 0.5s ease;
}
@keyframes fadein {
0% {
opacity: 0;
translate: -10px;
}
100% {
opacity: 1;
translate: none;
}
}