概要
フォームを設計する際、ただ項目を並べていくだけでは、ユーザーにもコードにも文脈が伝わりにくい。
特に複数のグループ（たとえば「基本情報」「配送先」「支払い情報」など）を1ページに詰め込む場合、視認性と意味構造の分離は重要になる。
そこで登場するのが、<fieldset> と <legend>。
これらのタグを正しく使うことで、フォームに意味のグルーピングを与え、見た目と構造の両面で整った設計が実現できる。
本記事では、<fieldset> / <legend> の仕様、ユースケース、アクセシビリティ効果、スタイリング方法までを詳しく解説する。
対象環境
HTML5対応のすべてのブラウザ
スクリーンリーダー・支援技術にも対応
基本構文
<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>
<fieldset> の役割
- フォーム項目を論理的なグループにまとめる
- 視覚的な区切り（ブラウザによりボックス風のスタイルがつく）
- アクセシビリティ的に、構造が明示される
-
<form>の中でのみ使用される（フォーム外での使用は非推奨）
<legend> の役割
-
<fieldset>に対して**そのグループの「見出し」**を与える - 画面上では
<fieldset>の枠内の左上に配置される - スクリーンリーダーではそのグループの説明として読み上げられる
-
<fieldset>の直下に配置する必要がある（順序が重要）
使用例：ラジオボタンのグループ化
<fieldset>
<legend>性別</legend>
<label><input type="radio" name="gender" value="male"> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>
<label><input type="radio" name="gender" value="other"> その他</label>
</fieldset>
ラジオボタンは排他選択肢としてまとめておくことで、スクリーンリーダーでも「性別」という文脈のもとで読み上げられる。
使用例：住所ブロックの分割
<fieldset>
<legend>配送先情報</legend>
<label for="zip">郵便番号</label>
<input type="text" id="zip" name="zip">
<label for="address">住所</label>
<input type="text" id="address" name="address">
</fieldset>
スタイリング：見た目をカスタマイズする
標準の <fieldset> / <legend> スタイルはブラウザ依存でやや古臭い印象がある。
以下のようにスタイルを調整することで、モダンなUIにも自然に統合できる。
<style>
fieldset {
border: 1px solid #ccc;
padding: 1.2em;
margin-bottom: 1.5em;
border-radius: 8px;
}
legend {
font-weight: bold;
padding: 0 0.5em;
font-size: 1.1em;
}
</style>
アクセシビリティの観点
-
<fieldset>/<legend>を使用することで、スクリーンリーダーがグループ化された意味を理解できる -
role="group"やaria-labelledbyをわざわざ書かなくても、HTMLネイティブで意味が伝わる - 特に複雑なフォームや選択肢が多い画面では、セマンティックな構造がUXに直結する
よくある間違い
❌ <div> + <h2> で代替してしまう
<div class="section">
<h2>支払い情報</h2>
<!-- フォーム項目 -->
</div>
→ 見た目は似ていても、構造的な意味が失われる
→ スクリーンリーダーで「これはフォームのグループです」と認識されない
結語
<fieldset> / <legend> は、視覚的な装飾ではなく、意味を持つ構造タグである。
それは「フォームを正しく分ける」「ユーザーに文脈を示す」「支援技術に意味を伝える」──すべてを叶える存在だ。
美しいコードは、見た目だけではなく、構造の純度にも宿る。
フォームを設計するすべての人にとって、この2つのタグは、最も誤解され、そして最も強力な味方となる。