VIDEO LESSON

HTMLのlegendタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:16動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04エイチティーエムエルタグ編の五十七本目は、レジェンドタグです。
0:08レジェンドは、フィールドセットでまとめた入力グループに題名を付けるタグです。
0:13たとえば連絡方法やお届け先住所のように、複数の入力欄が何を尋ねているのかを、
0:17グループ全体の見出しとして伝えます。
0:21レジェンド単独では使わず、必ずフィールドセットの最初の子として置くのが決まりです。
0:27今回は親であるフィールドセットとの関係、正しい置き場所、よくある間違いまでを順に学びましょう。
0:34フォームを分かりやすくする小さなタグですが、使い方が決まっている分、覚えれば迷わず書けるようになります。
0:41どんな場面で使うか、身近な例で考えてみましょう。
0:45会員登録のフォームで、メールか電話かといった連絡方法を選ぶ場面。
0:50お届け先の郵便番号、都道府県、市区町村を並べる場面。
0:53アンケートで満足度を五段階から選ぶ場面。
0:56これらはいずれも、バラバラの入力欄ではなく、ひとつの質問に対するまとまりです。
1:02このまとまりをフィールドセットで囲み、その質問文をレジェンドに書きます。
1:07利用者は題名を見るだけで、これから何を答えるのかが分かります。
1:11逆に、名前やメールアドレスのような単独の入力欄には、レジェンドではなく各欄ごとのラベルを使います。
1:19グループの質問かどうかが、使い分けの判断基準です。
1:22基本の書き方を確認します。
1:24画面の例では、フィールドセットの中に、まずレジェンドで連絡方法という題名を置き、
1:28その下に入力欄を並べています。
1:31ポイントは配置です。
1:33レジェンドは必ずフィールドセットの最初の子でなければなりません。
1:37入力欄の後ろや、フィールドセットの外側に置いても、グループの題名として正しく認識されません。
1:43また、ひとつのフィールドセットにレジェンドはひとつだけです。
1:47開始タグと終了タグをきちんと書き、題名は短く、質問の内容が一目で伝わる言葉にしましょう。
1:53ブラウザーでは題名が枠線の上に重なって表示されるのが標準的な見た目です。
1:58フィールドセットとの関係を整理します。
2:01フィールドセットは、関連する入力コントロールをひとつのグループとして囲む要素です。
2:06そしてレジェンドは、そのグループに名前を付ける要素です。
2:09ふたつは常にペアで考えてください。
2:11特に大切なのが支援技術への伝わり方です。
2:14キーボードや画面読み上げソフトでフォームを操作すると、入力欄に移動するたびに、
2:18レジェンドの題名と各欄のラベルが合わせて読み上げられます。
2:22つまりレジェンドは、目で見る見出しであると同時に、耳で聞く案内でもあるのです。
2:27題名を省いたり曖昧にしたりすると、どの質問への回答なのか分かりにくくなるため、
2:31具体的に書くことが大切です。
2:34活用例として、選択肢のグループを見てみましょう。
2:38画面の例は、希望の連絡時間という質問に対して、午前中と午後というラジオボタンを並べた形です。
2:46ここでレジェンドとラベルの役割の違いに注目してください。
2:51レジェンドはグループ全体への質問、ラベルは個々の選択肢の説明です。
2:56この二段構えにすることで、読み上げでも、希望の連絡時間、午前中、選択、のように文脈付きで伝わります。
3:05チェックボックスで複数選ぶ場合も構造は同じです。
3:09ひとつの質問に複数の選択肢がぶら下がる形を見たら、フィールドセットとレジェンドの出番だと考えてください。
3:18もうひとつの活用例は、住所のように複数のテキスト欄を束ねる場面です。
3:23画面の例では、お届け先住所というレジェンドの下に、郵便番号、都道府県、市区町村の入力欄を並べています。
3:31住所は項目が多いため、題名がないと、どこからどこまでが住所の入力なのかが曖昧になります。
3:38レジェンドが区切りと見出しを兼ねることで、長いフォームでも現在地を見失いにくくなります。
3:44なお、グループの題名がレジェンドの仕事でも、各入力欄ごとのラベルは省略できません。
3:51郵便番号の欄には郵便番号のラベルを、というように、個別の説明はラベルで必ず添えてください。
3:58レジェンドの属性を確認します。
4:00結論から言うと、レジェンドには専用の必須属性はありません。
4:04記事でも、この要素に必須となる専用属性はないと明記されています。
4:09使えるのは、ほかの要素と共通のグローバル属性です。
4:13アイディーは文書の中でひとつだけの目印、クラスはシーエスエスやジャバスクリプトでまとめて選ぶための名前、
4:18ラングは内容の言語を示します。
4:23画面の例のように題名へクラスを付けて見た目を整えることはできますが、属性でレジェンドの意味自体は変わりません。
4:31データ属性に個人情報などの秘密を置かない点も、ほかの要素と共通の注意です。
4:37見た目とシーエスエスのポイントです。
4:39レジェンドは標準では、フィールドセットの枠線の上に重なるように表示され、
4:43題名の部分だけ枠線が途切れて見えます。
4:47これはレジェンド特有の昔ながらの表示で、ほかの要素とは少し扱いが違います。
4:52文字の大きさや色、余白はシーエスエスで調整できますが、配置を大きく変えようとするとブラウザーごとに差が出やすいため、
4:57無理なレイアウト変更は避けるのが無難です。
5:03枠線自体が不要なデザインでは、フィールドセット側の枠線を消す指定をします。
5:08大切な原則はこれまでと同じで、グループの意味はエイチティーエムエルで表し、
5:12装飾はシーエスエスに任せることです。
5:15よくある間違いを三つ挙げます。
5:17一つ目は、フィールドセットなしでレジェンドを単独で使ってしまう間違いです。
5:22見出しのように見えても、親がいなければ意味を持ちません。
5:26二つ目は、フィールドセットの中でも、入力欄より後ろにレジェンドを置いてしまう間違いです。
5:32題名として扱われるのは最初の子だけなので、必ず先頭に置いてください。
5:37三つ目は、記事の見出しの代わりにレジェンドを使ってしまう間違いです。
5:41本文の見出しにはエイチタグを使い、レジェンドはフォームのグループ専用と覚えましょう。
5:47また題名を空にしたり、こちら、のような曖昧な言葉にしたりしないことも大切です。
5:52ブラウザー互換性を確認します。
5:54記事が参照するエムディーエヌの記録では、レジェンド要素はクロームが一以降、
5:59エッジが十二以降、ファイアフォックスが一以降、サファリが三以降で対応しており、
6:04現在の主要ブラウザーでは安心して使えます。
6:09歴史の長い基本要素なので、対応自体を心配する必要はほとんどありません。
6:14実装後の確認では、開発者ツールのエレメンツで、レジェンドがフィールドセットの最初の子になっているかを見てください。
6:22ソースと実際の構造が違う場合は、不正な入れ子をブラウザーが補正した可能性があります。
6:29あわせて三百二十ピクセル程度の細い画面や文字拡大でも、題名と入力欄が欠けずに読めるかを確認しましょう。
6:36最後にまとめです。
6:38レジェンドタグは、フィールドセットでまとめた入力グループに題名を付ける要素でした。
6:44ポイントは三つです。
6:46一つ目、レジェンドは単独では使わず、必ずフィールドセットの最初の子としてひとつだけ置くこと。
6:53二つ目、レジェンドがグループ全体の質問を表し、各入力欄の説明はラベルが担当するという役割分担。
7:01三つ目、専用の必須属性はなく、必要に応じて共通属性を使うことです。
7:06練習として、連絡方法の選択グループをフィールドセットで囲み、レジェンドで題名を付けて書いてみてください。
7:14お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

legendタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。fieldset の題名。グループ全体で何を尋ねているか伝えます。

解説記事・サンプルコードを読む：HTMLのlegendタグとは？属性・使い方・ブラウザー互換性と活用例 →