フローティングラベル入力欄

解説

フローティングラベル入力欄は、未入力時はプレースホルダの位置にあったラベルが、入力やフォーカスで枠の上端へすっと浮き上がる入力欄です。要となるのは CSS だけのトリックで、input に空白のプレースホルダ placeholder=" " を置き、:focus と :not(:placeholder-shown) の二条件で「フォーカス中」か「何か入力済み」かを判定します。条件が満たされると隣接セレクタ +label でラベルの top と font-size を変え、上に小さく移動させます。ラベルの背景を白にしているため、枠線の上に乗っても線が透けず自然に見えます。JavaScript は不要です。

役立つ場面

• お問い合わせフォーム・申込フォームの入力欄
• 会員登録やログインなど、項目名と入力欄を省スペースで両立したいとき
• ラベルとプレースホルダの二重表示を避けたい整然としたフォーム

アクセント色はフォーカス時の border-color とラベル色（既定 #667eea）で揃えて変更できます。注意点として、この実装は placeholder=" "（空白1個）が必須です。空文字にすると :placeholder-shown の判定が崩れます。また、ラベルは入力欄のすぐ後ろに置く HTML 順序が前提なので、構造を入れ替えないようにしてください。

使用例・適したシーン

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