<summary> 詳細内容(<details>)の要約や概要を設定する
取り扱い | 現行の標準 |
カテゴリ |
なし |
親にできる要素 | <details> |
子にできる要素 | フレージング・コンテンツ。または一つのヘッディング・コンテンツ |
対応ブラウザ | caniuseで確認 |
<summary>タグの説明
<summary>
は、<details>
によって設置された「ディスクロージャー・ウィジェット」の詳細内容に対して、その要約や概要、キャプションといった、いわゆるサマリーを指定するために使用するタグです。
ディスクロージャー・ウィジェットとは、ユーザーのリクエストに応じて表示/非表示を切り替えることができるインターフェイスのことです。
<summary>
は、<details>
の最初の子要素として記述する必要があります。
<summary>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- 視覚的な効果として、開閉可能なことを表すマーカーが文字の先頭に配置されます。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<summary>に指定できる主な属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<summary>の使い方とサンプル
このタグを使ったマークアップのサンプルです。<summary>
で指定された内容を操作すると、<details>
の内容が表示されます。
HTML
<details>
<summary>summaryタグで指定した要約</summary>
<div>details要素に含まれる詳細内容。</div>
</details>
表示確認
summaryタグで指定した要約
details要素に含まれる詳細内容。summary要素をクリックすると、details要素にopen属性が付与されて内容が表示されます。親要素の高さが制限されていない場合は、自動的に調整されます。
<details>
にopen
属性を与えて、初めから内容を開示しておくこともできます。
HTML
<details open>
<summary>open属性で開閉を操作</summary>
<div>予め詳細を開いておきたい場合は、open属性をマークアップに加えます。</div>
</details>
表示確認
open属性で開閉を操作
予め詳細を開いておきたい場合は、open属性をマークアップに加えます。
その他、CSSを組み合わせて色々なインターフェイスを作ることができます。アコーディオン形式のメニューを作成する方法は<details>
のページで解説しています。