概要

フォームを設計する際、ただ項目を並べていくだけでは、ユーザーにもコードにも文脈が伝わりにくい。
特に複数のグループ（たとえば「基本情報」「配送先」「支払い情報」など）を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つのタグは、最も誤解され、そして最も強力な味方となる。