フローティングラベル コンタクトフォーム
このパーツは、入力欄に値が入るとラベルが上へ浮かび上がる Material Design 風のコンタクトフォームです。仕組みの肝は、入力欄に placeholder=" " （空白 1 文字）を置き、CSS の :not(:placeholder-shown) と :focus で「フォーカス中、または入力済み」を…
このパーツの使いどころと実装ポイント
このパーツは、入力欄に値が入るとラベルが上へ浮かび上がる Material Design 風のコンタクトフォームです。仕組みの肝は、入力欄に placeholder=" "（空白 1 文字）を置き、CSS の :not(:placeholder-shown) と :focus で「フォーカス中、または入力済み」を判定している点です。条件に合うと隣接する label が transform:translateY(-22px) scale(.85) で縮みながら上に移動します。JavaScript を一切使わず、CSS だけでフローティングラベルを実現しているのが特徴です。下線だけのミニマルな見た目で、フォーカス時に下線とラベルが青く変わります。
向いている場面
余白を生かしたシンプルなサイトの問い合わせ欄、スタートアップやデザイン系サイトの申し込みフォーム、入力項目を少なく見せたいランディングページなどに向きます。ラベルが常に表示されるためプレースホルダ消失の問題が起きにくいのも利点です。
カスタマイズの勘所
- 項目を増やすときは
cfl__fのブロックを複製し、inputのidとlabelのforを一致させ、placeholder=" "の空白は必ず残します。テキストエリアにも同じ仕組みが効きます。
アクセシビリティ面では label と input が for と id で正しく結ばれているため、スクリーンリーダーが項目名を読み上げ、ラベルのタップでも入力欄にフォーカスできます。required を活用し、送信時の検証も忘れず実装してください。
よくある質問
なぜプレースホルダに空白を入れているのですか。
ラベルを浮かせる判定に :placeholder-shown を使っているためです。プレースホルダを空にすると常に未表示扱いになり判定が効きません。空白 1 文字を入れておくと、何も入力されていないときだけラベルが定位置に戻り、入力するとラベルが浮く動きになります。
JavaScript なしで本当に動きますか。
動きます。フォーカス中かどうかは :focus、入力済みかどうかは :not(:placeholder-shown) という CSS の擬似クラスで判定しているため、スクリプトは不要です。ただし送信処理や入力内容の検証は別途サーバー側や JavaScript で実装する必要があります。