We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

HTML <summary> 要素<details> 要素の内容の要約、キャプション、説明を表します。

許可された内容 フレージングコンテンツ。または 見出しコンテンツ のうちひとつの要素
タグの省略 不可。開始タグと終了タグの両方が必要。
許可された親要素 <details> 要素
許可された ARIA ロール button
DOM インターフェイス HTMLElement

属性

他のすべての要素と同様に、この要素は グローバル属性 を持ちます。

使用上の注意

<summary> 要素が省略された場合、「詳細」を意味する見出しが自動的に表示されます。

HTML 標準 では、<summary> のデフォルトスタイルは display:list-item です。スタイルを display:block に変更すると、展開用の三角印がなくなります。これは予期された動作です。詳しくは Bug 1283989 をご覧ください。

In summation, get details from the link on the next line

<summary> の使用例は、<details> のページの例を参照して下さい。

仕様

仕様書 策定状況 コメント
HTML Living Standard
<summary> の定義
現行の標準  
HTML 5.1
<summary> の定義
勧告  

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応12 なし149 なし なし6
display: list-item なし2 なし49 なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応4 あり なし149 なし なし あり
display: list-item なし なし2 なし49 なし なし なし

1. In development.

2. Chrome currently doesn't use display: list-item on the <summary> element, so display: block will not automatically hide the disclosure widget. Instead, use the non-standard pseudo-element ::-webit-details-marker to change the disclosure widget in Chrome. See Chrome bug 590014 for details.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: yyss, ethertank
最終更新者: yyss,