<summary>: 概要明示要素

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

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

<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> 要素にいくらか意味を追加して、ラベルを重要であると示します。

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