<details> - 略語

概要
説明
属性
使用例
関連項目
リンク

概要

形式: <details>～</details>
サポート: https://caniuse.com/details
カテゴリ: フローコンテンツ; ~~セクショニングルート~~; インタラクティブコンテンツ; パルパブルコンテンツ
親要素: フローコンテンツを子要素に持てるもの
子要素: 1つの summary 要素とそれに続くフローコンテンツ
タグの省略: 開始タグ：必須、終了タグ：必須
属性: グローバル属性; name; open

説明

details は、普段は非表示にされているが、ユーザが詳細表示したいときだけ表示される要素を記述します。通常は、サマリのみが表示され、ブラウザがサポートする何らかの詳細表示ボタンを押した際に詳細情報が表示されます。

HTML5 のワーキングドラフトで採用が検討されていましたが、HTML5 最終案では見送られ、HTML5.1 で採用されました。HTML Living Standard でもサポートされています。Internet Explorer ではサポートされていませんが大半のブラウザでサポート済です。

属性

グローバル属性: 詳細はグローバル属性を参照してください。
name: LS; details 要素グループの名前を指定します。同じ名前を持つ details 要素は、どれかひとつが開くと他の要素は閉じます。Chrome 120 でサポートされましたが、Firefox 131 ではまだサポートされていないようです。(→ サポート状況)
open: LS/H5.1; この属性を指定すると、ページを開いた際に、詳細情報がデフォルトで表示されるようになります。

使用例

基本的な使用例

HTML

<details name="questions">
  <summary>Q. details とは何ですか？</summary>
  <p>タイトルクリック時にアコーディオンのように開く仕組みを簡単に記述できる仕組みです。</p>
</details>
<details name="questions">
  <summary>Q. どのくらいのブラウザでサポートされていますか？</summary>
  <p>Internet Explorer を除く大半のブラウザでサポートされています。</p>
</details>
<details name="questions">
  <summary>Q. アニメーションは可能ですか？</summary>
  <p>interpolate-size または calc-size() をサポートしているブラウザであれば可能です。</p>
</details>

表示

Q. details とは何ですか？

タイトルクリック時にアコーディオンのように開く仕組みを簡単に記述できる仕組みです。

Q. どんなブラウザでサポートされていますか？

Internet Explorer を除く大半のブラウザでサポートされています。

Q. アニメーションは可能ですか？

interpolate-size または calc-size() をサポートしているブラウザであれば可能です。

アニメーションを適用する例

interpolate-size または calc-size() をサポートしているブラウザであれば開閉にアニメーションをつけることができます。

CSS

details {
  border: 1px solid #ccc;
  margin-bottom: .1rem;
  background: white;
  interpolate-size: allow-keywords;
  transition: all .3s ease;
}
summary {
  padding: .5em 1em;
  cursor: pointer;
}
.details-content {
  padding: .5em 1em;
}
::details-content {
  transition: all .3s ease, content-visibility .3s allow-discrete;
  overflow: clip;
  height: 0;
}
details[open]::details-content {
  height: auto;
}