HTML

HTML’s <fieldset> element is used to group related input fields within a form and label them with a <legend> element, making the content more organized and easier to understand.

fieldset 要素

<fieldset>要素とは？

<fieldset>は、フォーム内の関連する入力項目をグループ化するためのHTML要素です。同じ性質の入力フィールド（チェックボックス群、住所入力欄など）をまとめることで、見た目だけでなく意味論的にも分かりやすく整理することができます。

なぜ<fieldset>が重要なのか？

可読性の向上
フォームが複数のセクションに分割されるため、どの入力欄がどのカテゴリに属しているか一目で分かります。
アクセシビリティの向上
スクリーンリーダーなど支援技術を利用するユーザーにとって、フィールドセットごとに“ここからこの内容についての入力が始まる”という明確な区切りがあると理解しやすくなります。
可維持性の向上
大きなフォームをメンテナンスするとき、グループ化されたフィールドごとに確認・変更ができるので、開発者が管理しやすくなります。

基本的な使い方

<fieldset>要素の中には、通常、関連するフォーム要素（例：<input>, <label>, <select>, <textarea>など）を記述します。また、<fieldset>の概要を示すラベルとして<legend>要素が設置されます。

最小構成の例

HTML

<form>
	<fieldset>
		<legend>ユーザー情報</legend>
		<label for="username">ユーザー名：</label>
		<input type="text" id="username" name="username"><br><br>

		<label for="email">メールアドレス：</label>
		<input type="email" id="email" name="email">
	</fieldset>
</form>
ユーザー情報

親要素の制限

<fieldset>は主にフォーム関連の文脈で用いられます。HTML標準では、<fieldset>要素は<form>要素の直接の子孫要素に置かれることが想定されています。しかし、厳密には他の要素内でも使用できますが、ブラウザによっては正しく解釈されない場合や期待通りの挙動をしない場合があります。

<legend>要素について

<legend>要素は、<fieldset>のラベル（キャプション）の役割を担います。正しい使い方を理解しておくと、フォームの可読性やアクセシビリティの点で大いに役立ちます。

<legend>の配置と表示

<legend>は**<fieldset>の最初の子要素**として配置されるのが望ましいです。そうすることで、デフォルトのブラウザ表示では、枠線の上部や左上に<legend>のテキストが表示されることが多いです。

表示の実例

HTML

<form>
	<fieldset>
		<legend>お届け先住所</legend>
		<!-- 住所に関連するフォーム入力項目 -->
	</fieldset>
</form>

<legend>のデフォルトスタイル

アクセシビリティと支援技術

<fieldset>と<legend>の組み合わせは、スクリーンリーダーがフォームを読み上げる際に、以下のようなアナウンスをするため非常に重要です。

また、WCAG（Web Content Accessibility Guidelines）などのアクセシビリティガイドラインにおいても、フォームのフィールドをまとまりでグループ化する場合は<fieldset>を使うことが推奨されており、そのグループのラベルとして<legend>を設定することが望ましいとされています。

<fieldset>の入れ子（ネスト）構造

<fieldset>は、内部にさらに<fieldset>を入れ子にすることも可能です。例えば、住所情報の中でも「郵便番号」「都道府県」「市区町村」「番地」と分けて細かくグループ化する、といった場合に使えます。ただし、ネストが深くなりすぎると逆に分かりにくくなることもあるので、適度な単位でグルーピングすることを心がけてください。

HTML

<form>
	<fieldset>
		<legend>ユーザー情報</legend>

		<fieldset>
			<legend>名前</legend>
			<label for="firstname">名：</label>
			<input type="text" id="firstname" name="firstname">
			<br>
			<label for="lastname">姓：</label>
			<input type="text" id="lastname" name="lastname">
		</fieldset>

		<fieldset>
			<legend>連絡先</legend>
			<label for="phone">電話番号：</label>
			<input type="tel" id="phone" name="phone">
			<br>
			<label for="email">メールアドレス：</label>
			<input type="email" id="email" name="email">
		</fieldset>

	</fieldset>
</form>
ユーザー情報
名前
連絡先

中級者向け：CSSによるデザインカスタマイズ

デフォルトスタイルの変更

<fieldset>や<legend>はブラウザごとに独自のデフォルトスタイルが適用されます。中には、枠線や文字サイズ・太字といったスタイルが設定されています。これらを独自のデザインに合わせたい場合は、次のようにCSSを追加します。

CSS

fieldset {
	border: 2px solid #ccc; /* 枠線を2pxの灰色に */
	padding: 1em;
	margin: 1em 0;
}

legend {
	font-weight: bold;      /* 太字に */
	padding: 0 0.5em;       /* 文字周りに余白を */
	/* デフォルトの表示を大きく崩す場合は別途対応要 */
}

注意点

レイアウトの調整

CSSフレームワークを使用している場合（BootstrapやTailwind CSSなど）、<fieldset>や<legend>に対してクラスを付与するなどで、より高度なレイアウトやデザインを施すことができます。

中級者向け：JavaScriptとの連携

入力の有効化・無効化

フォームの一部だけ入力を有効/無効にしたい場合、<fieldset>要素のdisabled属性を使うことで、その中のフォームコントロールを一括で無効化できます。

HTML

<form>
	<fieldset id="additional-info" disabled>
		<legend>追加情報</legend>
		<label for="nickname">ニックネーム：</label>
		<input type="text" id="nickname" name="nickname">
	</fieldset>
</form>

<script>
	// ボタンをクリックしたらenableにする例
	const fieldset = document.getElementById('additional-info');
	document.getElementById('enable-button').addEventListener('click', () => {
		fieldset.disabled = false;
	});
</script>

動的な表示・非表示

アコーディオンUIやタブUIなどでフォームを切り替えるとき、<fieldset>を単位としてdisplay: none;を切り替えることで、フォーム全体の塊を動的に見せ隠しできます。支援技術やアクセシビリティ面でもまとまりとして認識されるため、合理的な実装が可能です。

ベストプラクティスと注意点

<legend>は必ず設定する
<legend>がないと、視覚的に区切りはついても、スクリーンリーダーなどで利用者が目的の入力を素早く見つけるのが難しくなります。
グルーピングの単位は適切に
入力項目のまとまりが大きすぎると、<fieldset>のメリットが薄れます。一方で細分化しすぎると煩雑になるため、使いやすいグループを検討しましょう。
ネストの深さに気をつける
<fieldset>の入れ子を繰り返しすぎると、画面に枠線が何重にもなるなど、かえって混乱を招きます。デザインと可読性のバランスを考慮してください。
CSSで独自にスタイルを変えすぎない
<legend>の配置や表示を大きく改変すると、ブラウザや支援技術での表示が乱れる可能性があります。最低限の変更にとどめるか、影響範囲を充分にテストしましょう。
ラベルの紐付けを明確にする
<label for="xxx">と<input id="xxx">の対を正しく設定し、スクリーンリーダーへの正確なアナウンスをサポートしましょう。
<fieldset disabled>の利用には注意
ユーザーが入力に値する部分を誤って無効化しないように。無効化するとフォーム送信時に値が送信されない仕様も把握しておく必要があります。

よくある質問（FAQ）

Q1. <fieldset>を使わずにCSSで枠線を描くだけでもいいですか？

A. 視覚的には枠線だけでも区切りが付くかもしれませんが、意味論的なマークアップとしては<fieldset>+<legend>を使うのが望ましいです。ブラウザや支援技術での読み上げ順や文脈が正しく伝わるため、アクセシビリティ面で大きなメリットがあります。

Q2. <legend>のテキストを表示したくない場合はどうすればよいでしょうか？

A. 何も文字を入れないと意味論が損なわれます。どうしても表示したくない場合は、スクリーンリーダー向けにテキストを残しつつ、CSSで視覚的に非表示にする手もあります。

例：

legend.sr-only {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px; 
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

ただし、このように表示を消す場合、ユーザビリティの観点から代替の導線が必要になるので注意が必要です。

Q3. <legend>の位置を自由に変えられないのはなぜですか？

A. HTMLとブラウザの実装上の仕組みで、<legend>は<fieldset>の視覚的枠線の一部として描画されます。CSSで<legend>をブロック要素にして他の場所へ動かすと、本来の機能が損なわれたり、ブラウザ互換性の問題が発生したりすることがあります。

まとめ

<fieldset>要素は、フォーム内の要素を論理的・視覚的にグループ化し、ユーザーに分かりやすい構造を提供するために欠かせないHTML要素の一つです。特に、<legend>要素と組み合わせることで、アクセシビリティやユーザビリティの向上に大きく寄与します。

初心者の方は、まずはフォームを分割する際に<fieldset>と<legend>を使い、入力項目をグルーピングしてみましょう。中級者以上の方は、ネストやCSSカスタマイズ、JavaScriptとの連携などに挑戦しつつ、保守性とアクセシビリティを考慮した最適な実装を目指してみてください。

最後に

<fieldset>は単純な要素ではありますが、正しいマークアップ、適切なグルーピング、そして<legend>の活用によって、フォームの使いやすさや保守性が飛躍的に向上します。フォームの構造設計をする際は、ぜひ積極的に利用してみてください。