【HTML Living Standard】legend要素の使い方
legend要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
legendオブジェクトは、HTMLのfieldset要素でグループ化されたフォームコントロールや関連コンテンツの説明文（キャプション）を表すオブジェクトです。この要素は、fieldset要素がどのような種類の情報をまとめて提供しているのかを、ウェブページのユーザーに対して明確に伝えるために使用されます。
具体的には、ラジオボタンのグループやチェックボックスの集合、あるいは関連する入力フィールド群など、意味的に関連付けられた複数のフォーム要素をfieldsetで囲んだ際に、そのグループ全体が何を意味するのかをlegend要素で記述します。例えば、氏名、住所、電話番号といった個人情報を入力する複数のフィールドをfieldsetでまとめる場合、legendには「お客様情報」といった見出しを提供できます。
legend要素は、必ずfieldset要素の最初の子要素として配置しなければなりません。また、一つのfieldset要素内に記述できるlegend要素は一つだけです。これにより、各fieldsetが持つ目的や内容を簡潔かつ正確に示し、ユーザーがフォームの構造を直感的に理解できるよう支援します。
さらに、スクリーンリーダーなどの支援技術を利用するユーザーにとっても、legend要素は重要な役割を果たします。グループ化されたフォーム要素の文脈を音声で伝えることで、視覚に頼らないユーザーもフォームの内容を正確に把握し、操作できるようになるため、ウェブサイトのアクセシビリティを大きく向上させます。ユーザーフレンドリーで、誰もが使いやすいウェブフォームを設計する上で、legend要素の適切な利用は不可欠です。
構文(syntax)
1<fieldset> 2 <legend>セクションのタイトル</legend> 3 <!-- ここにフォーム要素などのコンテンツを配置します --> 4</fieldset>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML legendタグでフォームを分かりやすくする
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML legendタグのサンプル</title> 7 <style> 8 /* 見た目を分かりやすくするための簡単なスタイル */ 9 body { font-family: sans-serif; margin: 20px; } 10 fieldset { border: 1px solid #ccc; padding: 15px; margin-bottom: 20px; } 11 legend { font-weight: bold; color: #333; padding: 0 5px; } 12 p { margin-bottom: 10px; } 13 label { display: inline-block; width: 120px; } 14 input[type="text"], input[type="email"] { width: 200px; padding: 5px; } 15 input[type="checkbox"] { margin-right: 5px; } 16 </style> 17</head> 18<body> 19 20 <h1>ユーザー登録フォーム</h1> 21 22 <form action="#" method="post"> 23 <!-- fieldset要素は、関連するフォームコントロールをグループ化するために使用されます。 --> 24 <fieldset> 25 <!-- legend要素は、fieldsetでグループ化された内容のタイトル（キャプション）を提供します。 26 これにより、フォームのどの部分が何に関するものかを明確に示し、ユーザーの理解を助けます。 --> 27 <legend>アカウント情報</legend> 28 29 <p> 30 <label for="username">ユーザー名:</label> 31 <input type="text" id="username" name="username" required> 32 </p> 33 <p> 34 <label for="email">メールアドレス:</label> 35 <input type="email" id="email" name="email" required> 36 </p> 37 <p> 38 <label for="password">パスワード:</label> 39 <input type="password" id="password" name="password" required> 40 </p> 41 </fieldset> 42 43 <fieldset> 44 <legend>通知設定</legend> 45 46 <p> 47 <input type="checkbox" id="newsletter" name="newsletter" value="yes"> 48 <label for="newsletter">ニュースレターを受け取る</label> 49 </p> 50 <p> 51 <input type="checkbox" id="updates" name="updates" value="yes"> 52 <label for="updates">サービス更新情報を受け取る</label> 53 </p> 54 </fieldset> 55 56 <p> 57 <button type="submit">登録</button> 58 </p> 59 </form> 60 61</body> 62</html>
HTMLのlegendタグは、フォーム内で関連する要素をグループ化するfieldsetタグに「タイトル（キャプション）」を付けるための要素です。このタグは必ずfieldsetタグの直下に配置され、そのfieldsetが示す内容を簡潔に表現します。
提供されたサンプルコードでは、ユーザー登録フォームを例にlegendタグの使われ方を示しています。例えば、最初のfieldset要素には「アカウント情報」というlegendが設定されており、そのグループにはユーザー名、メールアドレス、パスワードの入力欄が含まれていることが一目でわかります。同様に、次のfieldset要素では「通知設定」というlegendがあり、ニュースレターやサービス更新情報の受け取りに関するチェックボックスがグループ化されています。
このようにlegendタグを使用することで、長いフォームや複雑なフォームでも、各セセクションが何に関するものかをユーザーが直感的に理解できるようになり、フォーム全体の使いやすさ（ユーザビリティ）が向上します。また、スクリーンリーダーなどの支援技術を利用するユーザーにとっても、フォームの構造を正確に伝える上で非常に重要な役割を果たし、アクセシビリティの向上に貢献します。
legendタグ自体には、動作を制御するための特定の引数（属性）や、何らかの値を返す戻り値は存在しません。純粋にfieldset要素の内容を説明するための表示要素として機能します。シンプルながらも、フォームの構造を明確にし、ユーザーフレンドリーなWebページを作成するために不可欠な要素と言えます。
legendタグは、必ずfieldset要素の直下、かつ最初の要素として配置してください。これ以外の場所に置くと、期待通りの表示や機能が得られない場合があります。このタグは、単に関連要素を視覚的にグループ化するだけでなく、そのグループが何に関するものかを意味的に示す「キャプション」の役割を担います。特にスクリーンリーダーを利用するユーザーに対し、フォーム構造を明確に伝え、アクセシビリティを大きく向上させます。fieldsetなしにlegendタグを単独で使用することはできません。また、legend内部には基本的にテキストのみを記述し、複雑なHTML要素は含めないように心がけてください。
HTML fieldsetとlegendでフォームをグループ化する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML legend要素のサンプル</title> 7</head> 8<body> 9 <!-- fieldset要素は、関連するフォームコントロールを意味的にグループ化するために使用します。 --> 10 <fieldset> 11 <!-- legend要素は、fieldset要素でグループ化された内容のキャプション（見出し）を提供します。 --> 12 <legend>お問い合わせ情報</legend> 13 14 <label for="name">お名前:</label><br> 15 <input type="text" id="name" name="name" required><br><br> 16 17 <label for="email">メールアドレス:</label><br> 18 <input type="email" id="email" name="email" required><br><br> 19 20 <label for="message">お問い合わせ内容:</label><br> 21 <textarea id="message" name="message" rows="5" required></textarea><br><br> 22 23 <button type="submit">送信する</button> 24 </fieldset> 25</body> 26</html>
HTMLのlegend要素は、フォーム内の関連する要素を意味的にグループ化するfieldset要素に対し、そのグループのキャプション（見出し）を定義するために使用されます。これにより、ユーザーやスクリーンリーダーに対して、グループ化された内容が何であるかを明確に伝えることができ、ウェブページのアクセシビリティを向上させます。
サンプルコードでは、<fieldset>タグが「お名前」「メールアドレス」「お問い合わせ内容」などのフォームコントロールを一つにまとめています。この<fieldset>の直下に<legend>お問い合わせ情報</legend>と記述することで、このグループ全体が「お問い合わせ情報」に関するものであることを示しています。ブラウザでは通常、fieldset要素によって作られる枠線の内部、上部にlegendの内容が表示されます。
legend要素自体には、特別な引数や戻り値はありません。これは、HTML要素が主にドキュメントの構造と意味を定義する役割を持つためです。この要素を適切に使用することは、フォームの構造を分かりやすくし、ユーザー体験を高める上で非常に重要です。システムエンジニアを目指す方にとって、このようにセマンティック（意味的）なHTMLを記述することは、ウェブサイトの保守性や検索エンジン最適化（SEO）の観点からも重要となります。
legend要素は、必ずfieldset要素の直下、かつ最初の要素として配置してください。他の要素の後に置くと、意味的な関連付けが正しく伝わりません。fieldset要素は、関連するフォームコントロールを視覚的にも意味的にもグループ化するために使用されます。legend要素はそのグループのタイトルを提供します。これらをセットで使うことで、フォームの構造が明確になり、ユーザーにとって理解しやすくなります。特にスクリーンリーダーなどの支援技術を利用する方々にとって、フォーム内容の把握が容易になるため、アクセシビリティ向上の観点からも重要です。legendの内容は、グループを簡潔に説明するものにしてください。