English 中文 العربية 日本語 Português

<summary>: SUMMARY 要素

最終更新：2026-10-13

<summary>SUMMARY 要素

details の最初の子要素として、ユーザーがクリックして開閉する可視の見出しを提供します。

カテゴリセマンティック
コンテンツモデルdetails の最初の子要素のみ
許可される親要素フローコンテンツを受け入れる要素
閉じタグ必要 </summary> タグ
ステータス標準

📝 構文

<summary>概要の見出し</summary>
すべてのグローバル属性を見る → すべてのイベント属性を見る →

▶ サンプル

下のコードを編集して、playground でリアルタイム結果を確認：

▶ 試してみる

🌐 ブラウザサポート

ブラウザ ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
<summary> ✓ v1 ✓ v12 ✓ v1 ✓ v1 ✓ v1
すべての主要ブラウザでサポート
ヒント： summary は details 内の最初の子要素でなければなりません。ない場合はブラウザーが汎用ラベルを表示します。

❓ よくある質問

Qsummary は details の中でしか使えないのですか？
Aはい。<summary> は <details> の最初の子要素としてのみ使え、単独では意味を持ちません。折りたたみパネルの「タイトルバー」の役割で、クリックして開閉する動作はブラウザがネイティブで提供するため、JS は不要です。
Qsummary の中に見出しやアイコンを置けますか？
A置けます。<summary> には見出しとフレージングコンテンツを許可します。たとえば <summary><h3>条項その1</h3></summary> のように書けるほか、<span> でアイコンを置くこともできます。なお、summary を置くとブラウザのデフォルトの三角マーカーは上書きされるため、矢印は自分で補う必要があります。
Qsummary のデフォルトの三角矢印を消すには？
ACSS で summary { list-style: none; } とし、WebKit 系はさらに summary::-webkit-details-marker { display: none; } を加えます。その後は ::before/::after で独自のインジケーターを作り、details[open] と組み合わせて矢印の向きを切り替えられます。
<details>
今後さらにケーススタディを追加予定です。

📚 関連チュートリアル

HTML タグリファレンス
すべての HTML タグの構文・属性・例を確認できます。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%