legendタグの使い方とフォームグループの説明をわかりやすく解説

2024.09.12
スポンサーリンク
スポンサーリンク

legendの概要

フォームグループに説明を付ける HTMLタグ

<legend>説明テキスト</legend>

概要 legendタグは、fieldsetタグ内でフォーム要素のグループにタイトルや説明を付与するために使用されます。ユーザーがフォームの目的を理解しやすくなり、アクセシビリティ向上にも寄与します。
  • fieldsetタグと組み合わせて使用する。
  • フォーム内の複数の入力フィールドをグループ化し、説明を提供する。
  • アクセシビリティ向上のために使用が推奨される。

legendタグの基本的な使い方

以下の例では、legendタグを使用して、住所入力フォームにタイトルを付けています。

<fieldset>
    <legend>住所情報</legend>
    <label for="postal">郵便番号:</label>
    <input type="text" id="postal" name="postal">
    <br>
    <label for="address">住所:</label>
    <input type="text" id="address" name="address">
</fieldset>

実行例：

住所情報


legendタグの応用：複数のフィールドセットをグループ化

複数の関連する入力グループを明確にするために、legendタグを使うと便利です。

<fieldset>
    <legend>個人情報</legend>
    <label for="name">名前:</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="email">メール:</label>
    <input type="email" id="email" name="email">
</fieldset>

<fieldset>
    <legend>ログイン情報</legend>
    <label for="username">ユーザー名:</label>
    <input type="text" id="username" name="username">
    <br>
    <label for="password">パスワード:</label>
    <input type="password" id="password" name="password">
</fieldset>

実行例：

個人情報


ログイン情報


legendタグの応用：CSSでスタイルを変更

legendタグのデフォルトのスタイルを変更して、より見やすいデザインにすることも可能です。

legend {
    font-weight: bold;
    color: #0073e6;
    padding: 5px 10px;
    border: 1px solid #0073e6;
    background-color: #f0f8ff;
    border-radius: 5px;
}

適用後の実行例：

カスタムデザインのlegend

注意事項

  • legendタグはfieldsetタグの子要素として使用する必要がある。
  • legendタグは、フォーム内のグループの説明として適切に利用する。
  • 適切な見出しを付けることで、フォームの可読性やアクセシビリティを向上させる。
  • CSSを適用するとデザインを向上させることができるが、意味的な役割を忘れないようにする。

よくある質問

Q: legendタグはfieldsetタグなしで使用できますか？
A: いいえ、legendタグはfieldsetタグ内でのみ使用可能です。
Q: legendタグのデフォルトのスタイルは？
A: 通常、太字で表示されますが、ブラウザによって異なる場合があります。
Q: legendタグを使わずに見出しを作るには？
A: h2やpタグを使用してグループの説明を作成することも可能です。
Q: legendタグはSEOに影響しますか？
A: 直接的な影響は少ないですが、適切な構造を作ることでユーザビリティが向上します。
Q: legendタグをスタイル変更できますか？
A: はい、CSSを使用してフォント、背景色、ボーダーなどを変更できます。

まとめ

  • legendタグは、fieldset内のフォームグループに説明を付けるために使用する。
  • フォームの可読性やアクセシビリティ向上に貢献する。
  • legendタグのデフォルトのスタイルは太字だが、CSSで変更可能。
  • 適切な見出しを付けることで、ユーザーにとって分かりやすいフォームを作成できる。
スポンサーリンク