フォーム部品をグループ化してわかりやすくする

以下のようにフォーム部品を囲む枠をfiledset、枠につける表題をlegendといいます。

 label {
                background-color: white; 
                border: 1px solid dodgerblue;
                padding: 2px 6px 2px 2px; 
                margin-bottom: 4px; 
                display: inline-block; 
                cursor: pointer;
            }
            
            label:hover {
                background-color: dodgerblue;
                color: white;
            }
        </style>
    </head>
    <body>
        <fieldset>
            <legend>[ボディタイプ]</legend>
            <label><input type="radio" name="body" value="SUV">SUV</label>
            <label><input type="radio" name="body" value="minivan">ミニバン</label>
            <label><input type="radio" name="body" value="compact">コンパクト</label>
            <label><input type="radio" name="body" value="sedan">セダン</label>
            <label><input type="radio" name="body" value="suport">スポーツ</label>
            <label><input type="radio" name="body" value="wagon">ワゴン</label>
            <label><input type="radio" name="body" value="kei">軽自動車</label><br>
        </fieldset>
        <fieldset>
            <legend>[シート]</legend>
            <label><input type="radio" name="seat" value="2">2人</label>
            <label><input type="radio" name="seat" value="3">3人</label>
            <label><input type="radio" name="seat" value="4">4人</label>
            <label><input type="radio" name="seat" value="4">5人</label>
            <label><input type="radio" name="seat" value="4">6人</label>
            <label><input type="radio" name="seat" value="4">7人</label><br>
        </fieldset>
    </body>
</html>

今回は、フォーム部品をグループ化して見やすく整える方法について解説します。
特に注目してほしいのが、HTMLのタグである <fieldset> と <legend> の使い方です。

「入力欄がたくさんあるとゴチャゴチャして見づらい…」と感じたこと、ありませんか？
そんなときに活躍するのがこの2つなんです！

formを整理するためのタグ：`fieldset` と `legend`

`fieldset`とは？

<fieldset> は、フォーム内の関連する項目をまとめて囲むための要素です。

これを使うと、見た目としても枠がつき、ユーザーにも「ここはひとまとまりなんだな」と直感的に伝わります。

例えで言えば…
教科書の「章ごとに箱で囲んであるページ」と同じです。情報をまとめて表示するとき、とっても便利！

`legend`とは？

<legend> は、<fieldset>の中でその枠にタイトルをつける要素です。
まるで本の章タイトルのように、そのグループが何を意味しているのかを説明できます。

サンプルコードの説明

では、具体的に上記のコードを元に、一つひとつ見ていきましょう！

スタイル（CSS）の設定部分

label {
    background-color: white; 
    border: 1px solid dodgerblue;
    padding: 2px 6px 2px 2px; 
    margin-bottom: 4px; 
    display: inline-block; 
    cursor: pointer;
}

label:hover {
    background-color: dodgerblue;
    color: white;
}

ここでのポイント

label に枠線（border）と余白（padding）が設定されているので、選択肢のラベルがボタンのように見える。
cursor: pointer により、マウスを乗せるとカーソルが「指マーク」に変わる。
→ これはクリック可能な要素だとユーザーに伝える効果があります。
label:hover によって、マウスをラベルに当てたときに色が変化する。
→ インタラクションの視覚的フィードバックが得られる。

HTML部分の構造

<fieldset>
    <legend>[ボディタイプ]</legend>
    <label><input type="radio" name="body" value="SUV">SUV</label>
    ...
</fieldset>

<fieldset>
    <legend>[シート]</legend>
    <label><input type="radio" name="seat" value="2">2人</label>
    ...
</fieldset>

解説：

<fieldset> が「ボディタイプ」や「シート」ごとの選択肢を視覚的にグルーピングしています。
<legend> がそれぞれのグループの説明タイトルになっています。

これにより、ユーザーは「ここでは車のタイプを選ぶんだな」「ここでは座席数を選ぶんだな」と自然に理解できるようになります。

表でまとめてみよう

タグ名	役割
`<fieldset>`	複数の入力項目をひとまとまりにして囲む
`<legend>`	`<fieldset>` の中の項目にタイトル（見出し）をつける
`<label>`	入力項目（ここではラジオボタン）にラベル（説明）をつける

before / after で違いを確認しよう

ラベルやfieldsetがないとどうなる？

<input type="radio" name="body" value="SUV">SUV
<input type="radio" name="body" value="minivan">ミニバン

→ ラジオボタンが並ぶだけで、どのグループの選択肢かわからない！

ラベルやfieldsetを使うとどうなる？

<fieldset>
  <legend>ボディタイプ</legend>
  <label><input type="radio" name="body" value="SUV">SUV</label>
</fieldset>

→ ラジオボタンが枠で囲まれて、意味も明確に！

さらに応用するなら…

fieldset に CSS で余白（marginやpadding）や角丸（border-radius）を加えると、さらに見た目が整ったUIに。
legend にもフォントサイズや色などスタイルを追加して、より目立たせることもできます！

まとめと次のステップ

fieldset と legend を使うと、フォームの構造が明確になり、ユーザーにとって使いやすいUIになります。
label:hover のような疑似クラスを使えば、インタラクティブな視覚効果もつけられます。

次に学ぶと良いトピック

checkbox（複数選択）との使い分け
fieldsetの中でflexboxやgridを使ったレイアウト調整
disabledやrequired属性を使ってフォームの入力制御

気軽に手を動かして、自分なりにカスタマイズしてみましょう！フォーム作りは、見た目も動きも楽しくなる分野ですよ。

Webアプリケーション制作のための小ネタ集　目次に戻る