HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<legend>
凡例（Legend）要素。<fieldset>要素でグループ化された要素のキャプション（凡例）を提供します。
info
概要
<legend> 要素は、<fieldset> 要素の最初の子として配置され、その <fieldset> 内でグループ化されたフォームコントロール（またはその他のコンテンツ）に対するキャプションやタイトルを提供します。
この要素により、グループ化されたフォーム部品の目的が明確になり、**アクセシビリティが向上**します。
play_circle
デモ (静的表示)
HTML (Source)
<fieldset>
<legend>連絡方法を選択してください</legend>
<label>
<input type="radio" name="contact" value="email"> メール
</label>
<label>
<input type="radio" name="contact" value="phone"> 電話
</label>
</fieldset>
Preview (Result)
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| **グローバル属性** | <legend>要素は、**グローバル属性**（class、id、styleなど）のみをサポートします。固有の属性はありません。 |
code
実用例
1. ラジオボタンのグループ化
<fieldset>
<legend>ご希望のサービスプラン</legend>
<input type="radio" id="basic" name="plan">
<label for="basic">ベーシック</label>
<input type="radio" id="premium" name="plan">
<label for="premium">プレミアム</label>
</fieldset>
2. 必須フィールドのグループに凡例を追加
<fieldset>
<legend>必須の個人情報<span style="color: red;">*</span></legend>
<label for="name">氏名:</label>
<input type="text" id="name" required>
<!-- ... 他の必須フィールド ... -->
</fieldset>
lightbulb
知っておくべき重要事項
warning
配置の厳格なルール
<legend> 要素は、必ず **<fieldset> 要素の直下かつ最初の子要素**として配置しなければなりません。これはHTMLの構文ルールで厳格に定められています。
accessibility_new
アクセシビリティへの影響
<legend> 要素を使用することで、スクリーンリーダーなどの支援技術が <fieldset> でグループ化されたフォーム部品群を一つのまとまりとして認識し、**グループ全体に対する説明（凡例）**をユーザーに適切に伝えることができます。特にラジオボタンやチェックボックスのグループ化に非常に重要です。