【HTML Living Standard】summary要素の使い方

summary要素の使い方について、初心者にもわかりやすく解説します。

作成日: 2025年09月29日更新日: 2026年03月27日

基本的な使い方

summaryオブジェクトは、HTMLの<details>要素と組み合わせて使用され、そのコンテンツの要約や見出しを表すオブジェクトです。この要素は、ユーザーがクリックすることで、親である<details>要素内の詳細なコンテンツの表示と非表示を切り替える機能を提供します。これにより、ウェブページ上での情報過多を防ぎ、必要な情報だけを整理して表示することが可能になります。

システムエンジニアを目指す初心者の方にとって、ウェブページの使いやすさ（ユーザビリティ）と、誰もがアクセスできること（アクセシビリティ）を考慮したUI設計の基礎を理解する上で重要な要素の一つです。例えば、ウェブサイトのよくある質問（FAQ）セクションで質問文を表示し、クリックすると回答が表示されるようなインタラクティブなUIを実装する際に活用されます。必ず<details>要素の最初の子要素として配置し、その内容が親要素の全体を簡潔に説明するように記述することが推奨されます。

公式リファレンス: <summary>: The Disclosure Summary element

構文(syntax)


1<details>
2  <summary>表示する概要テキスト</summary>
3  <!-- 詳細コンテンツはここに記述されます -->
4</details>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

HTMLのsummary/detailsで開閉表示する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>HTML summary/details サンプル</title>
7</head>
8<body>
9
10  <!-- details要素は開閉可能なウィジェットを作成します -->
11  <details>
12    <!-- summary要素はdetails要素の見出し（常に表示される部分）です -->
13    <summary>詳細情報を表示する</summary>
14
15    <!-- ここに詳細コンテンツを記述します。summaryをクリックすると表示/非表示が切り替わります -->
16    <p>これは、<code>summary</code>要素をクリックしたときに表示される詳細情報です。</p>
17    <ul>
18      <li>項目1</li>
19      <li>項目2</li>
20      <li>項目3</li>
21    </ul>
22    <p>もう一度クリックすると閉じます。</p>
23  </details>
24
25</body>
26</html>

このHTMLコードは、summary要素とdetails要素を利用して、ウェブページ上で開閉可能なコンテンツブロックを作成する例を示しています。システムエンジニアを目指す初心者の方にとって、ユーザーインターフェースの使いやすさを向上させる基本的なテクニックの一つです。

summary要素は、必ずdetails要素の最初の子要素として配置され、そのdetails要素全体の見出しとして機能します。このsummary要素に書かれた内容が常に表示される部分となり、ユーザーがこれをクリックすることで、details要素内に記述された隠された詳細コンテンツ（この場合は段落やリスト）が表示されたり、非表示になったりします。

summary要素自体は、動作を制御するための引数（属性のようなもの）を持っていません。また、JavaScriptのように値を返す戻り値もありません。純粋にdetails要素の表示制御を担う見出しとしての役割に特化しています。

サンプルコードでは、「詳細情報を表示する」というテキストがsummary要素として表示され、これをクリックすると、その下に続く「これは、summary要素をクリックしたときに表示される詳細情報です。」という段落や、複数のリスト項目が表示されます。もう一度クリックすると、これらの詳細コンテンツは元の非表示状態に戻ります。これにより、情報の整理や、ユーザーが関心のある部分だけを展開して見せる効果的な方法を提供します。

summary要素は、必ずdetails要素の最初の子要素として配置してください。この要素はdetails要素の常に表示される見出しとなり、単体で利用しても機能しません。details要素の内部にはsummary要素を一つだけ配置するのが適切です。これにより、ユーザーがクリックするとdetails要素内のコンテンツが表示・非表示される、開閉可能なウィジェットが構築されます。特別なJavaScriptを書かなくても、ブラウザがこの機能を提供するため、簡単に情報を整理して表示できます。主に、FAQや補足説明など、必要な時だけ詳細を見せたい場合に有効です。デフォルトのアイコンやスタイルはCSSで調整可能です。

HTML summary 要素で情報開示の矢印を制御する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>HTML summary 要素のサンプル</title>
7</head>
8<body>
9    <!--
10        details要素は、開閉可能な情報開示ウィジェットを作成します。
11        デフォルトでは閉じられた状態（内容が非表示）で表示されます。
12    -->
13    <details>
14        <!--
15            summary要素は、details要素の要約またはキャプションを提供します。
16            この要素のテキストが、開閉可能なウィジェットのタイトルとして表示され、
17            クリックすることで内容の表示/非表示が切り替わります。
18            ブラウザによっては、このsummaryの左側に開閉を示す矢印（または同様のアイコン）が自動的に表示されます。
19        -->
20        <summary>ここをクリックして詳細情報を表示/非表示にします</summary>
21        <!-- summary要素の後に続く内容は、開閉される詳細情報です -->
22        <p>
23            これは折りたたまれている詳細情報です。<br>
24            上記「ここをクリックして詳細情報を表示/非表示にします」の部分をクリックすると、
25            この内容が表示されたり隠されたりします。
26        </p>
27        <ul>
28            <li>詳細リスト1</li>
29            <li>詳細リスト2</li>
30        </ul>
31    </details>
32
33    <details open>
34        <summary>最初から開いた状態の詳細情報</summary>
35        <p>
36            details要素に 'open' 属性を追加すると、初期状態で内容が表示されます。<br>
37            この状態でも、summaryをクリックすることで閉じることができます。
38        </p>
39    </details>
40</body>
41</html>

HTMLのsummary要素は、details要素と組み合わせて使用する特別な要素です。details要素は、クリックすることで内容を開閉できる情報開示ウィジェットを作成する際に使われますが、summaryはその開閉ウィジェットのタイトルや要約を表示する役割を担います。

具体的には、details要素の直下にsummary要素を配置し、その中に表示したいタイトルとなるテキストを記述します。ウェブページでは、このsummaryに書かれたテキストがタイトルとして表示され、ユーザーがそのタイトル部分をクリックすると、details要素内に記述された詳細情報が、表示されたり非表示になったりします。多くのブラウザでは、このsummaryの左側に、情報が開いているか閉じているかを示す矢印アイコンが自動的に表示され、視覚的に分かりやすくなっています。

summary要素自体には、引数や戻り値といった特別な設定はありません。これは、HTMLの要素が主に文書の構造や表示方法を定義するために使われるためです。もしdetails要素にopenという属性を追加すると、初期状態で詳細情報が開いた状態で表示され、クリックすることで閉じることができます。このようにsummary要素は、ウェブページに情報を分かりやすく整理し、インタラクティブな要素を追加するための便利な機能を提供します。

summary要素は、必ずdetails要素の最初の子要素として配置してください。この要素は単独では機能せず、details要素が提供する開閉可能なコンテンツのタイトルとなります。

ユーザーがsummaryのテキストをクリックすると、details要素内に続く詳細情報が表示されたり隠されたりします。多くのブラウザでは、summaryの左側に開閉状態を示す矢印（アイコン）が自動的に表示され、視覚的に操作できる目印となります。この矢印の表示形式はブラウザや環境によって異なる場合があります。

また、details要素にopen属性を追加すると、初期状態で詳細情報が開いた状態で表示されます。これを理解することで、用途に応じた情報の表示状態を制御できます。