summaryタグとは?|詳細情報の要約・キャプション・説明を表す

summaryタグとは?|詳細情報の要約・キャプション・説明を表す
博士
<details>タグで詳細情報を表示する方法が分かったら、その詳細情報の要約を表示する方法も覚えておこう。
 
 
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<summary>タグとは

 

<summary>

対応ブラウザFirefox / Google Chrome / Safari
分類
利用場所details要素の最初の子要素として
内容フレージング・コンテンツ


 
 
<summary>タグは、details要素で表される詳細情報の要約・キャプション・説明として表示される内容を表すタグです。

<summary>タグに対応しているブラウザでは、<summary>〜</summary>内のテキストをクリックすることで、詳細情報の表示・非表示を切り替えることができます。

summary要素は、details要素内の先頭に1つだけ入れることができます。
 
 

使用例

 
 

表示例

音楽ファイルのダウンロード

『sample.mp3』のダウンロード中…
ファイル名:
sample.mp3
ファイル形式:
MPEG Audio Layer-3
ファイル容量:
6.5MB
再生時間:
4分50秒

 
 

まとめ

<details>タグで表示した詳細情報の要約を表す際は、<summary>タグを使用します。
 
 

博士
<details>タグとセットで覚えておこう。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








summaryタグとは?|詳細情報の要約・キャプション・説明を表す