フィールドセットの横幅
枠の横幅は、デフォルトではウインドウの横幅一杯（※）に広がります。 これを制限するにはスタイルシートのwidthプロパティが使えます。
※もしくは、親要素の横幅一杯。
例えば、次のように記述できます。
<style type="text/css">
fieldset { width: 50%; }
</style>
このように、fieldset要素に対してスタイルを定義します。 上記の例の場合は、フィールドセットの横幅が50%になります。
※もちろん、単位に px を使えばピクセル単位で大きさを指定できますし、em や pt などの単位も使用可能です。
フィールドセットのラベル
また、ラベル(タイトル)の文字を装飾したい場合はlegend要素に対してデザインを定義します。 例えば、ラベルの文字サイズを倍にしたい場合は、次のように記述します。
<style type="text/css">
legend { font-size: 200%; }
</style>
これで、ラベルの文字サイズは2倍（※）になります。
※2倍にするためには、「200%」の他に「2em」という記述も可能です。また、pt や px などの単位を用いた指定も可能です。
フィールドセットの枠線
枠線を装飾したい場合は、fieldset要素に対してborderプロパティを使います。
<style type="text/css">
fieldset { border: 1px solid green; }
</style>
上記の例では、太さ1ピクセルで緑色の実線を引いただけですが、double(二重線)やdashed(破線)なども指定できます。
スタイルシートでの枠線の指定について詳しくは、記事「色も線種も線幅も自由な枠を作る」をご参照下さい。
※Windows XP上のIE6.0では、デフォルトでは角の丸い枠線が引かれています。 スタイルシートで枠線をデザインすると、角の丸みはなくなり、四角い枠線になるようです。
入力項目の分類以外でも
fieldset要素の中には、入力フォーム以外にも何でも含められます。 img要素を使って画像を含めたり、fieldset要素そのものを含めて入れ子構造にしたりも可能です。
以下に、フィールドセットを2つ入れ子にした例と、フィールドセット内に画像を含めた例をご紹介します。
おわりに
今回は、グループボックスのように入力フォームを整頓できる、fieldset（フィールドセット）要素の使い方をご紹介致しました。
ぜひ、みなさんのホームページでも活用してみて下さい。
【関連記事】
