<summary>: 概要明示要素

<summary>HTML の要素で、 <details> 要素の折り畳みボックスの要約、キャプション、説明、凡例を表します。 <summary> 要素をクリックすると、親の <details> 要素の開閉状態を切り替えることができます。

試してみましょう

属性

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

使用上の注意

<summary> 要素の中身には、見出しコンテンツ、プレーンテキスト、段落内で使用できる HTML が入れられます。

<summary> 要素は、 <details> 要素の最初の子としてのみ使用できます。ユーザーが概要をクリックすると、親の <details> 要素が開閉し、 toggle イベントが <details> 要素に送信され、状態が変化したことを知るために使用することができます。

既定のラベルテキスト

<details> 要素の最初の子が <summary> 要素でない場合、ユーザーエージェントは既定の文字列(ふつうは「詳細」)を折りたたみボックスのラベルとして使用します。

既定のスタイル

HTML 仕様書では、<summary> の既定のスタイルに display: list-item が含まれています。これで、ラベルの隣に既定で(多くは三角形で)表示される折りたたみウィジェットとして表示されるアイコンを変更したり削除したりすることができます。

スタイルを display: block に変更すると、展開用の三角印を削除することができます。

詳しくはブラウザーの互換性の節をご覧ください。すべてのブラウザーがこの要素の機能すべてに対応しているわけではありません。

Safari などの Webkit ベースのブラウザーでは、標準外の CSS 擬似要素 ::-webkit-details-marker によって、アイコンの表示を制御することが可能です。三角形の表示を消すには、 summary::-webkit-details-marker { display: none } を使用してください。

以下に <summary> を使用している例をいくつか示します。 <details> 要素のドキュメントにもいくつか例があります。

基本的な例

<details> 要素の中で <summary> の使用を示す簡単な例です。

html
<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> の中で見出し要素を使用することができます。

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

html
<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> 要素
暗黙の ARIA ロール button
許可されている ARIA ロール 許可されている role なし
DOM インターフェイス HTMLElement

仕様書

Specification
HTML Standard
# the-summary-element

ブラウザーの互換性

BCD tables only load in the browser

関連情報