<summary>: 概要明示要素

ジャンプ先:
  1. 属性
  2. 使用上の注意
  3. 例
  4. 仕様書
  5. ブラウザーの対応
  6. 関連情報

HTML の概要明示要素 (<summary>) は、 <details> 要素の内容の要約、キャプション、説明、凡例を表します。 <summary> 要素をクリックすると、親の <details> 要素の開閉状態を切り替えることができます。

許可されている内容 記述コンテンツ。または 見出しコンテンツ のうちひとつの要素
タグの省略 不可。開始タグと終了タグの両方が必要。
許可されている親要素 <details> 要素
許可されている ARIA ロール button
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 を使用して修正することができます。

概要の中の 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> の定義		 勧告 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応12 なし149 なし156
display: list-item なし2 なし49 なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応4 あり なし14914 なし あり
display: list-item なし なし2 なし49 なし なし なし

1. In development.

2. Chrome currently doesn't use display: list-item on the <summary> element, so display: block will not automatically hide the disclosure widget. Instead, use the non-standard pseudo-element ::-webit-details-marker to change the disclosure widget in Chrome. See Chrome bug 590014 for details.

関連情報

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: mfuji09, yyss, ethertank
最終更新者: mfuji09,