--- title: '

: 概要明示要素' slug: Web/HTML/Element/summary tags: - Disclosure Box - Disclosure Control - Disclosure Summary - Element - HTML - HTML interactive elements - Reference - Summary - Web translation_of: Web/HTML/Element/summary ---

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

{{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}}

許可されている内容	記述コンテンツ。または見出しコンテンツのうちひとつの要素
タグの省略	不可。開始タグと終了タグの両方が必要。
許可されている親要素	{{HTMLElement("details")}} 要素
暗黙の ARIA ロール	`button`
許可されている ARIA ロール	許可されている `role` なし
DOM インターフェイス	{{domxref("HTMLElement")}}

属性

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

使用上の注意

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

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

既定のラベルテキスト

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

既定のスタイル

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

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

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

例

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

基本的な例

{{HTMLElement("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> 要素の既定のロールは button (子要素からはすべてのロールを外す) ですので、この例は読み上げソフトのような支援技術のユーザーには動作しません。 <h4> のロールが削除されますので、これらのユーザーからは見出しとして扱われなくなります。

概要の中の 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>

仕様書

仕様書	状態	備考
{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '<summary>')}}	{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '<summary>')}}	{{Spec2('HTML5.1')}}	初回定義

属性