<summary>: 概要明示要素

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

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

属性

この要素はグローバル属性のみを持ちます。

使用上の注意

<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>

仕様書

ブラウザーの対応

関連情報

• <details>