<summary>: 概要明示要素
HTML の概要明示要素 (<summary>
) は、 <details>
要素の内容の要約、キャプション、説明、凡例を表します。 <summary>
要素をクリックすると、親の <details>
要素の開閉状態を切り替えることができます。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
許可されている内容 | 記述コンテンツ。または 見出しコンテンツ のうちひとつの要素 |
---|---|
タグの省略 | 不可。開始タグと終了タグの両方が必要。 |
許可されている親要素 | <details> 要素 |
暗黙の ARIA ロール | button |
許可されている ARIA ロール | 許可されている role なし |
DOM インターフェイス | HTMLElement |
属性
この要素はグローバル属性のみを持ちます。
使用上の注意
<summary>
要素の中身には、見出しコンテンツ、プレーンテキスト、段落内で使用できる HTML が入れられます。
<summary>
要素は、 <details>
要素の最初の子としてのみ使用できます。ユーザーが概要をクリックすると、親の <details>
要素が開閉し、 <details>
要素に toggle
イベントが送信され、状態が変化したことを知るために使用することができます。
既定のラベルテキスト
<details>
要素の最初の子が <summary>
要素でない場合、ユーザーエージェントは既定の文字列 (ふつうは「詳細」) を折りたたみボックスのラベルとして使用します。
既定のスタイル
HTML 標準では、<summary>
の既定のスタイルに display:list-item
が含まれています。これで、ラベルの隣に既定で (多くは三角形で) 表示される折りたたみウィジェットのとして表示さえるアイコンを変更したり削除したりすることができます。
スタイルを display:block
に変更すると、展開用の三角印を削除することができます。
詳しくはブラウザーの互換性の節をご覧ください。すべてのブラウザーがこの要素の機能すべてに対応しているわけではありません。
例
以下に <summary>
を使用している例をいくつか示します。 <details>
要素のドキュメントにもいくつか例があります。
基本的な例
<details>
要素の中で <summary>
の使用を示す簡単な例です。
<details open>
<summary>Overview</summary>
<ol>
<li>Cash on hand: $500.00</li>
<li>Current invoice: $75.30</li>
<li>Due date: 5/6/19</li>
</ol>
</details>
見出しとしての概要
次のように、 <summary>
の中で見出し要素を使用することができます。
<details open>
<summary><h4>Overview</h4></summary>
<ol>
<li>Cash on hand: $500.00</li>
<li>Current invoice: $75.30</li>
<li>Due date: 5/6/19</li>
</ol>
</details>
これは現在のところ、間隔の問題をいくつか抱えており、 CSS を使用して修正することができます。
警告: <summary>
要素の既定のロールは button (子要素からはすべてのロールを外す) ですので、この例は読み上げソフトのような支援技術のユーザーには動作しません。 <h4>
のロールが削除されますので、これらのユーザーからは見出しとして扱われなくなります。
概要の中の HTML
この例は、 <summary>
要素にいくらか意味をを追加して、ラベルを重要であると示します。
<details open>
<summary><strong>Overview</strong></summary>
<ol>
<li>Cash on hand: $500.00</li>
<li>Current invoice: $75.30</li>
<li>Due date: 5/6/19</li>
</ol>
</details>
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
HTML Living Standard <summary> の定義 |
現行の標準 | |
HTML 5.1 <summary> の定義 |
勧告 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser