htmlタグ｜fieldset・legend 入力項目の整理｜keygen（廃止）

ホームページ（ウェブサイト）制作において、ユーザーからの問い合わせや商品の注文を受け付ける「入力フォーム」は、事業の売上や成果に直結する非常に重要な役割を持っています。この入力フォームをより使いやすく、整理された状態にするために活躍するHTMLタグが、「fieldset」と「legend」です。

「fieldset」タグは、フォーム内にある複数の入力項目（inputタグやラジオボタンなど）を、意味のあるひとつのグループとしてまとめる役割を持ちます。例えば、「お客様情報」というグループで名前や住所を囲んだり、「アンケート」というグループで複数の質問を囲んだりする場面で使用します。そして、この「fieldset」タグの直下に配置して、そのグループの見出し（タイトル）をつけるのが「legend」タグです。ブラウザの標準設定では、「fieldset」で囲んだ部分に枠線が引かれ、「legend」のテキストがその枠線の一部に重なるように表示されるため、視覚的にも情報のまとまりが非常に分かりやすくなります。

一方で、かつてのHTMLには「keygen」というタグも存在していました。これはフォーム送信時に暗号化のための鍵ペアを生成し、セキュリティを高める目的で作られたタグでした。しかし、ブラウザごとの実装にばらつきがあり、現代のセキュリティ要件に合致しなくなったため、HTML規格では完全に廃止されています。現在、情報の安全性を確保するためには、ホームページ（ウェブサイト）全体をSSL化（HTTPS化）するなどの標準的な通信手法を用いることが求められます。

「fieldset」と「legend」を適切に使用することは、Webアクセシビリティの向上に大きく貢献します。音声読み上げソフト（スクリーンリーダー）を利用しているユーザーに対して、現在入力している項目がどのグループに属しているのかを正確に伝達できます。入力フォームでユーザーが迷ったり、入力の手間を感じて離脱したりするのを防ぐことは、コンバージョン率（CVR）の改善において大きな意味を持ちます。本ページでは、入力項目を論理的に整理し、すべてのユーザーにとって使いやすいフォームを構築するための記述方法について詳しく解説します。

fieldset（フィールドセット）

<fieldset></fieldset>

ホームページ制作（ウェブサイト制作）の際に使用する<fieldset>タグについてのご説明です。

ホームページ制作において<fieldset>（フィールドセット）タグは、フォーム部品のグループをつくり、フォーム入力項目をグループ化します。

<fieldset> フォーム部品のグループ、フォーム入力項目をグループ化

<fieldset>タグは、フォームの入力項目をグループ化します。フィールドセット。

一般的に<fieldset>タグでグループ化した部分が枠線で囲まれます。

グループ化により、ページのブラウザ表示中Tabキーでグループ間を移動可能になります。

グループの先頭には、<legend>でタイトルつけます。

<fieldset></fieldset>

ホームページ制作・SEOの1ポイント

<fieldset>のように親要素の中の必須の子要素がないと機能しないHTMLもあるため、ホームページ制作時に該当箇所がうまく機能していない場合は、必須の子要素の漏れがないかチェックする必要があります。

legend （レジェンド）

<legend></legend>

ホームページ制作（ウェブサイト制作）の際に使用する<legend>タグについてのご説明です。

<legend>（レジェンド）タグは、グループ化したフォーム部品の説明を付加するために、フォームの入力項目グループにタイトルを付ける際に使用します。

<legend> グループ化したフォーム部品の説明、
フォームの入力項目グループにタイトルを付ける

<legend>タグは、<fieldset>（フィールドセット）でグループ化されたフォームの入力項目にタイトルをつけます。レジェンド。

<fieldset>内の先頭に1つのみ記述します。

グループ化された部分が枠線で囲まれ、<legend>で指定した説明文は、上枠線部分に表示されます。

<legend></legend>

ホームページ制作・SEOの1ポイント

ホームページ制作において、よく該当部分をグループ化するという概念が登場します。特にHTML5からはそういった属性のものが増えました。例えば複数のパラグラフのカタマリを1つのセクションとして囲うといった方法です。こうして該当要素内の子要素の結びつきを明確にすることもSEOの一つです。

フォームのユーザビリティを高めるグループ化

事業用のホームページ（ウェブサイト）において、入力項目の多いフォームはユーザーに心理的な負担を与え、離脱の原因になります。ここでは、「fieldset」と「legend」を活用して入力画面を整理し、ユーザーをスムーズに送信完了まで導くための実践的な設計手法について解説します。

関連する項目を視覚的・意味的にまとめる効果

個人情報の入力欄や商品のお届け先、お支払い方法など、フォーム内の項目はいくつかの意味的な塊に分かれています。これらをただ単に上から下へ並べるのではなく、「fieldset」タグで適切に囲むことで、ユーザーは「今はどの情報を入力しているのか」を直感的に把握できるようになります。

項目が多い場合でも整理された印象を与え、入力中のストレスを軽減する効果があります。

選択肢の論理的な構造化とアクセシビリティ

複数の選択肢から一つを選ぶラジオボタンや複数選択が可能なチェックボックスを配置する際にも、「fieldset」タグは非常に役立ちます。

個別の選択肢全体を「fieldset」で囲み、「legend」でその設問のタイトルをつけることで、デザイン面だけでなくHTMLの構造としても正しいまとまりを作ることができます。検索エンジンやブラウザに対してもフォームの意図が正確に伝わり、質の高いホームページ（ウェブサイト）としての評価につながります。

keygen（キージェネレーター）（廃止）

<keygen>

ホームページ制作（ウェブサイト制作）の際に使用する<keygen>タグについてのご説明です。

ホームページ制作において<keygen>（キージェネレーター）タグは、フォーム送信時にキーを発行する場合に使用します。

<keygen> フォーム送信時にキーを発行

key generator（キージェネレーター）。<keygen>タグは、フォーム送信時にキーを発行して暗号化します。

キーが発行される場合には、秘密キーと公開キーがペアで発行され、秘密キーはローカル環境に保存、公開キーはサーバーに送信されます。

autofocus

autofocus=””

オートフォーカス

challenge

challenge=””

送信されるキーと一緒にパッケージする値を指定

disabled

disabled=””

キーを操作不能にします

form

form=””

<form>要素と関連付けます

keytype

keytype=””

暗号化の種類を指定します（rsaなど、指定できる値はブラウザによる）

name

name-“”

キーに名前を付けます

<keygen>

この<keygen>タグはhtml5から新規追加された要素ですが廃止されました。

ホームページ制作・SEOの1ポイント

ホームページ制作で使用するHTMLには、英単語のままのものもありますが、頭文字だけだったり、長いものは省略されてタグの名前になっているものもあります。このタグも「keygen」という単語があるわけではなく、key generator、つまり鍵の生成というような意味があります。フォームを設置するときには、こうした仕組みを利用することがありますが、場合によってはうまく機能しない場合もありますので、正常にフォームが動作しているかどうかの確認を各ブラウザで行うことが望ましいでしょう。フォームの動作自体はSEOに影響を与えないと考えられますが、Webマーケティングのコンバージョンには大きく影響を与えますので注意が必要です。

ホームページ（ウェブサイト）制作・作成に役立つHTMLタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ

老朽化したHTMLの修正と最新標準への移行について

これまで解説してきたような非推奨の古いHTMLの記述は、現在のブラウザ環境で正しく表示されないリスクがあるだけでなく、検索エンジンに対する情報の伝達を阻害し、SEO評価にも悪影響を及ぼす可能性があります。

ホームページ（ウェブサイト）を安定して運用していくためには、HTML Living Standardなどの最新規格に沿ったセマンティックなマークアップへ書き換えることが重要です。長年運用されてきた静的サイトの魅力やコンテンツの印象はそのまま残しつつ、保守の負担を軽減する次世代のマークアップへ一括で変換することで、中長期的なサイト運用が安定します。

古く老朽化したHTMLホームページの修正方法

ホームページ（ウェブサイト）のHTML編集方法

ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。

ホームページのHTML編集方法