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>