html summaryラベル

HTML summary タグについて

summaryタグの定義と使用方法

<summary> タグは、HTML5で提供される新しい要素で、<details> タグと一緒に使用されます。<details> タグは折りたたみ可能な内容を定義し、その概要やタイトルを定義するのが<summary> タグです。ユーザーが<summary> タグをクリックすると、関連する内容が表示または非表示になります。

ブラウザのサポート状況

<summary> タグと <details> タグは比較的新しい要素であり、次のブラウザでサポートされています。以下の表は、主要なブラウザでのサポート状況を示しています。

ブラウザ	サポート状況
Google Chrome	50以上
Mozilla Firefox	61以上
Microsoft Edge	79以上
Safari	10.1以上
Opera	47以上

対応する属性とイベント

<summary> タグ自体には重要な属性はありませんが、<details> タグに影響を与えます。<details> タグにはopenという属性があり、デフォルトで内容を表示するかどうかを制御します。また、<details> タグには以下のようなイベントがあります。

toggle: <details> 要素の開閉状態が変更されたときに発生します。

コードの例

以下は、<summary> と <details> タグを使用した基本的な例です。

<details>
    <summary>詳細情報</summary>
    ここに折りたたまれた内容が表示されます。
</details>

このコードを実行すると、「詳細情報」部分がクリック可能なタイトルとして表示され、クリックするとその下に表示される内容が展開されます。

QAセクション

Q1: `<summary>` タグの主な用途は何ですか？

A1: <summary> タグは、<details> タグの内容を簡潔に示すタイトルとして使用されます。クリックすると、そのタイトルに関連する詳細情報が表示されます。

Q2: `<summary>` タグは単独で使用できますか？

A2: いいえ、<summary> タグは通常 <details> タグと一緒に使用されます。<details> タグなしでは機能しません。

Q3: `<summary>` タグの内容をデフォルトで表示するにはどうすればいいですか？

A3: <details> タグに open 属性を追加すると、デフォルトで内容が展開された状態で表示されます。例: <details open><summary>...</summary>...</details>