フローティングラベル（v2）

解説

フローティングラベル v2 は、入力欄が空のときはラベルが枠内のプレースホルダ位置に、フォーカスや入力があると上へ小さく浮き上がるフォームです。動きは JavaScript ではなく :focus と :not(:placeholder-shown) という CSS の状態セレクタで制御しています。プレースホルダを半角スペースにしておくことで、未入力かどうかを判定しているのが要点です。

使う場面

• 会員登録やログインのメールアドレス・パスワード欄
• 項目数を抑えたいランディングページの問い合わせフォーム
• マテリアルデザイン風の見た目に統一したい管理画面

ラベルが浮くときの色は :focus 時の border-color やラベルの color で、浮き上がる位置や大きさは transform や font-size で調整できます。ラベルが枠線に重なる部分は背景色で隠しているため、入力欄の背景色を変えたらラベルの background も合わせて変更します。label の for と input の id を必ず対応させ、ラベルをタップしても入力欄にフォーカスできる状態を保つと操作性が上がります。

使用例・適したシーン

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