こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
フォームを作るとき、意外と見過ごされがちなのがfieldsetとlegendです。
この2つは、入力項目を意味的にグルーピングし、見出しを付けられる便利なHTMLタグ。
しかし、ブラウザのデフォルトスタイルはちょっと古風で、枠線や余白のバランスが微妙…。
そのまま使うと、せっかくの洗練されたデザインの中で浮いてしまうことがあります。
そこで今回は、fieldsetとlegendを現代的に整えるCSSデザインパターンを3つご紹介します。
さらに、ブラウザ差異や実務での注意点も解説しますので、そのままコピペして使えるレベルに仕上げられます。
1. シンプルなボックススタイル
まずは最もベーシックな、余計な装飾を省き、スッキリ見せるパターンです。
初めてカスタマイズする場合や、企業サイト・行政サイトなど落ち着いたデザインにおすすめ。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このように、legendに少しだけ余白を加えると、枠線の上に自然に乗るようになります。
フォーム全体の可読性も上がり、ユーザーが「ここは何の項目なのか」を直感的に理解できます。
2. タイトルが枠に食い込むデザイン
こちらは、カードUIのように見せるおしゃれなパターン。
タイトル部分を枠線に食い込ませることで、視覚的なアクセントになります。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
ポイントはlegendの背景色をフォームの背景色と合わせること。
これにより、まるでタイトル部分がカードの上に浮いているような演出ができます。
Eコマースサイトや予約フォームなど、デザイン性を重視する場面でよく使われます。
3. アクセントライン型
最後は、見出しとセクションを強調するスタイルです。
枠線をあえて上側だけにし、カラフルなラインを見出しと合わせます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
シンプルでモダンな印象になり、LPやブランドサイトなどでも使いやすいデザインです。
色をブランドカラーに合わせれば、統一感のあるフォームが作れます。
ブラウザ差異に注意
fieldsetとlegendは、ブラウザごとに挙動が少し異なります。
- Safari：legendの幅計算が特殊（インライン要素のような挙動）
- Firefox：fieldsetにdisplay: flexを適用するとlegendがずれる場合あり
- モバイルSafari：角丸が大きく見えることがある
これらの差異は、必要に応じてdisplay: block;やmin-widthの設定で調整しましょう。
特に多ブラウザ対応が必要な案件では、実機検証が重要です。
まとめ
- fieldsetとlegendはフォームの意味付けと可読性向上に役立つ
- デフォルトスタイルは古めかしいため、CSSでのカスタマイズが効果的
- 実務で使いやすい3パターン（シンプル／枠食い込み／アクセントライン）を覚えておくと便利
- ブラウザ差異は必ずテストし、全環境で整った見た目を保証する
フォームはユーザーが必ず目にする部分です！
細部までデザインを整えることで、信頼感や使いやすさが向上します。
ぜひ今回のサンプルを参考に、あなたのサイトにも取り入れてみてください。
satokotadesignキャンペーン実施中！
