legendタグ -fieldset内の見出しを定義する｜HTML辞典

<legend>タグとは？

<legend> タグは、<fieldset> 内のタイトル（見出し）を定義するためのタグ です。
<fieldset> の内容が何に関するものかを説明し、フォームの視認性やアクセシビリティを向上させます。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）、パルパブルコンテンツ（Palpable Content）。

閉じタグの有無

<legend> は開始タグ（<legend>）と閉じタグ（</legend>）の両方が必要です。

基本的な記述方法

<form>
    <fieldset>
        <legend>ユーザー情報</legend>
        <label for="name">名前:</label>
        <input type="text" id="name" name="name">
        <label for="email">メール:</label>
        <input type="email" id="email" name="email">
    </fieldset>
</form>

使用できる主な属性

<legend>タグには特別な属性はありませんが、CSS でデザインを調整できます。

CSSを使ったデザイン変更

<legend>タグのデザインを変更したい場合は、CSS を活用できます。

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

適切な使用例

✅ legend を使用して <fieldset> にタイトルをつける

<form>
    <fieldset>
        <legend>配送情報</legend>
        <label for="address">住所:</label>
        <input type="text" id="address" name="address">
    </fieldset>
</form>

✅ 複数の <fieldset> を使用してフォームを整理

<form>
    <fieldset>
        <legend>個人情報</legend>
        <label for="name">名前:</label>
        <input type="text" id="name" name="name">
    </fieldset>
    
    <fieldset>
        <legend>支払い情報</legend>
        <label for="card">クレジットカード番号:</label>
        <input type="text" id="card" name="card">
    </fieldset>
</form>

適切でない使用例（誤った使い方）

❌ <legend> を <fieldset> の外で使用すると無効になる

<!-- NG: <legend> を <fieldset> の外に記述 -->
<legend>ログイン情報</legend>
<fieldset>
    <label for="user">ユーザー名:</label>
    <input type="text" id="user" name="user">
</fieldset>

✅ 正しい書き方（<legend> は <fieldset> の中に配置）

<fieldset>
    <legend>ログイン情報</legend>
    <label for="user">ユーザー名:</label>
    <input type="text" id="user" name="user">
</fieldset>

<legend>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<legend>	<fieldset> の見出しを定義	fieldset のタイトルとして機能	フォームの各セクションの説明
<fieldset>	フォームの入力項目をグループ化	<legend> とセットで使用	フォームの整理
<label>	フォーム要素のラベル	for 属性で <input> と関連付け可能	入力欄の説明
<h2> ～ <h6>	見出しを定義	フォーム以外でも使用可能	ページの見出し

使用上の注意点

✅ <legend> は必ず <fieldset> の中に配置する

• <fieldset> の外に記述すると、正しく機能しない。

✅ <legend> を適切に設定してフォームの視認性を向上させる

• <legend> を使うことで、フォームの各セクションの意味が明確になる。

関連タグ

• <fieldset> – フォームの入力項目をグループ化
• <label> – 入力要素のラベルを設定
• <input> – ユーザー入力を受け付ける
• <form> – フォーム全体を作成

まとめ

<legend>タグは、HTML文書内で<fieldset>内のタイトル（見出し）を定義するためのタグです。適切に使用することで、フォームの視認性とアクセシビリティを向上させることができます。