fieldset要素の応用 fieldsetとは、form要素用に用意された物である。 だからといって、formのみに限定して使うだけじゃもったいない。 使用用途を広げ、賢くレイアウト用に転用してみよう！ ★可愛いレンタルサーバLOLIPOP!

fieldsetは、あらゆる本、あらゆるサイトではフォーム用として解説されている。
「フォームの部品やラベルをグループ化する要素。」と定義されているわけだ。
しかし、実際は「部品やラベルをグループ化する要素。」であり、フォームでなくても大丈夫なのだ。
言葉ではチンプンカンプンだと思うので、使用例とあわせて解説していく。

まず、どこでも解説されている本来の使用方法。

ソース

<form>
  <fieldset>
  <legend>入力テーブル</legend>
  項目１：<input type="text" name="abc" size="16"><br>
  項目２：<input type="text" name="def" size="20">
  項目３：<input type="text" name="gih" size="18"><br>
  </fieldset>
  <input type="submit" value="送信">
</form>

このようにフォーム要素内に書くために用意された物である。
しかし、フォームが無くても正常に機能するので、それを行うとこうなる。

ソース

<fieldset>
<legend>見出し</legend>
このように、見出しの部分を枠と重ねたい場合に使用するとよい。<br>
テーブルでこれを行うには、CSSで複雑な処理が必要となるが、これならお手軽である。<br>
あとはCSSを使って色をつけるなり、幅を調整するなりすれば良い。<br>
枠で囲みたい文字をfieldset要素とし、枠と重ねたい文字をlegend要素とるだけである。
</fieldset>