フローティングラベル入力
フローティングラベル入力は、入力欄の プレースホルダ位置にあるラベル が、入力やフォーカスに合わせて枠の上端へすっと移動するフォーム部品です。このサンプルは JavaScript を使わず、 placeholder=" " （半角スペース1つ）と :not(:placeholder-shown) 、それに :foc…
解説
フローティングラベル入力は、入力欄のプレースホルダ位置にあるラベルが、入力やフォーカスに合わせて枠の上端へすっと移動するフォーム部品です。このサンプルは JavaScript を使わず、placeholder=" "（半角スペース1つ）と :not(:placeholder-shown)、それに :focus 擬似クラスだけでラベルの位置とサイズを切り替えています。ラベルの動きは transition:all .2s でなめらかにつなぎ、input と label は隣接セレクタ（~）で連動させています。
使う場面
- 会員登録やお問い合わせなど、入力欄を縦に並べるフォーム
- ラベルとプレースホルダを兼ねて高さを節約したいモバイル画面
- テキストエリアを含む本文入力欄（このサンプルは
textareaにも同じ仕組みを適用）
カスタマイズでは、フォーカス時の枠色とラベル色（#1a1a2e）をブランドカラーに変えるのが第一歩です。ラベルが浮いた時に背景へ重なるため、label の background は入力欄の背景色と必ず揃えてください。アクセシビリティ面では for と id をひも付け、入力中はラベルが残るので、見出し代わりにラベルを省略しない設計が安全です。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
ラベルが動かないのですが、なぜですか
プレースホルダに半角スペース1つを入れているか確認してください。このサンプルは placeholder-shown 擬似クラスで判定しているため、placeholder属性が空だとラベルが浮いたままになります。半角スペース1つを入れることで「未入力＝placeholderが表示されている」状態を正しく検出できます。
JavaScriptは必要ですか
不要です。フォーカスと入力有無の判定はすべてCSSの擬似クラスで行っています。色やフォントサイズを変えたいときも、CSSのfocus時とラベルが浮いた時のスタイルを書き換えるだけで対応できます。