下線フォーカス入力欄

解説

枠線で囲わず、下線だけで入力欄を表すミニマルなフォームです。border を消して下辺だけ border-bottom を残し、背景も透明にすることで、紙のノートのような軽い印象を作っています。フォーカスすると :focus で下線の色が青に変わり、transition によってその色がなめらかに切り替わります。標準の青い枠（アウトライン）は outline:none で消し、下線の色変化で代わりに状態を伝えています。CSSのみで動きます。

こんな画面に合う

• 余白を活かしたシンプルな問い合わせフォーム
• ログインやニュースレター登録など項目が少ない入力
• 白背景のランディングページで主張を抑えたい場面

下線の色や太さは border-bottom の値で調整でき、フォーカス色はブランドカラーに差し替えられます。outline:none だけにするとキーボード操作の人が今どこにいるか分からなくなるため、フォーカス時の色変化を明確に 残すことが大切です。プレースホルダーは薄い灰色になりがちで、項目名の代わりに使うと入力後に何の欄か分からなくなります。可能なら見えるラベルを併用し、プレースホルダーは補助の例示に留めると親切です。

使用例・適したシーン

• お問い合わせフォーム
• ニュースレター登録
• 資料請求フォーム
• ログイン・新規登録