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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 12Edge 未対応 なし
補足
未対応 なし
補足
補足 In development.
Firefox 完全対応 49IE 未対応 なしOpera 完全対応 15Safari 完全対応 6WebView Android 完全対応 4Chrome Android 完全対応 ありEdge Mobile 未対応 なし
補足
未対応 なし
補足
補足 In development.
Firefox Android 完全対応 49Opera Android 完全対応 14Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
display: list-itemChrome 未対応 なし
補足
未対応 なし
補足
補足 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.
Edge 未対応 なしFirefox 完全対応 49IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なし
補足
未対応 なし
補足
補足 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.
Edge Mobile 未対応 なしFirefox Android 完全対応 49Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

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

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