HTMLのフィールドセット（fieldset）にタイトルを付ける方法をわかりやすく解説
HTMLでフォームの入力項目をグループ化する際に便利なのが <fieldset> タグですが、このグループに見出し（タイトル）を付けたい場合は、<legend> タグを使用します。
<legend> タグは、<fieldset> タグの直後に配置することで、そのフィールドセット全体のタイトルとして表示されます。ブラウザ上では、枠線の左上に見出しが埋め込まれたような形で描画されるため、フォームの項目が何を意味しているのかをユーザーに分かりやすく伝えられます。
legendタグで使用できる属性
<legend> タグは、以前は以下の属性をサポートしていました。
| 属性 | 値 | 説明 |
|---|---|---|
| align | top bottom left right |
非推奨（Deprecated） － コンテンツの配置位置を指定します。現在のHTML5では廃止されているため、配置の調整はCSSで行うことをおすすめします。 |
fieldsetとlegendの実装例
次のコードは、<fieldset> 内に <legend> を使って「学生情報」というタイトルを付けた実際の例です。ぜひご自身の環境でも動かしてみてください。
<!DOCTYPE html>
<html>
<head>
<title>HTML legendタグの例</title>
</head>
<body>
<form>
<fieldset>
<legend>学生情報</legend>
氏名：<input type="text"><br />
専攻科目：<input type="text"><br />
</fieldset>
</form>
</body>
</html>
ポイントまとめ
<legend>は必ず<fieldset>の最初の子要素として記述します。- フォームの関連する入力項目を視覚的にも意味的にもグループ化でき、アクセシビリティの向上にもつながります。
- 見出しの位置やスタイルを変更したい場合は、CSSの
floatやtext-alignなどを活用しましょう。
このように、<fieldset> と <legend> を組み合わせることで、整理された読みやすいフォームを簡単に作成できます。
-
HTMLのciteタグで作品タイトルをマークアップする方法を解説
作品のタイトルとは、書籍、楽曲、絵画、映画など、さまざまな創作物の名称を指します。HTMLで作品タイトルをマークアップするには、<cite>…</cite>タグを使用します。<cite>タグは「引用（citation）」を意味するタグで、このタグで囲まれたテキストは作品のタイトルとして意味づけされます。 コード例 以下のコードを実行すると、HTMLの<cite>タグを使用して作品タイトルをマークする方法を実際に確認できます。 <!DOCTYPE html> <html> <head>
-
HTMLの<legend>タグとは？fieldset要素にキャプションを設定する方法
HTMLの<legend>タグは、<fieldset>要素に対してキャプション（表題）を設定するために使用されるタグです。<fieldset>は、buttonやinput、radioなどのフォーム部品をひとつのグループとしてまとめる役割を持ちます。<legend>を組み合わせることで、グループ化されたフォームの内容をユーザーにわかりやすく伝えることができます。構文<legend>タグの基本構文は以下のとおりです。<fieldset> <legend>キャプションを設定</legend> </f