こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
入力フォームのUIで最近よく見かけるのが、テキストフィールドにフォーカスするとラベルが上に移動する演出です。
GoogleのMaterial DesignやiOSのフォームUIでも採用され、入力状態がひと目でわかるためユーザビリティが高いデザインとして人気があります。
この記事では、CSSだけでラベルが浮き上がるアニメーションUIを作る方法を解説します。
JavaScript不要で実装できるため、軽量かつシンプルに導入可能です。
基本構造：ラベルと入力を重ねる
ラベルを入力欄の上に配置し、position: absolute; で重ねる構造を作ります。
フォーカス時や入力済み状態でラベルを上に移動させ、文字サイズを小さくする仕組みです。
チェックポイントは以下の2点です。
- :focus または :not(:placeholder-shown) でラベルを動かす
- transitionでスムーズにアニメーション
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
placeholderとrequiredを活用
このテクニックではplaceholderを空に設定することで、
:not(:placeholder-shown) が「入力あり」状態を判別するトリガーになります。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
アクセシビリティのポイント
- ラベルは常にHTMLのlabelタグを使う
- プレースホルダーをラベル代わりにしない（支援技術で問題が出やすい）
- 必須項目にはrequiredを付与し、バリデーションも考慮
まとめ
ラベルが動くUIのメリット
入力状態がひと目でわかり、フォームの視認性と操作性が向上します。
CSSのみで実装でき、軽量・高パフォーマンス。
ブランドカラーに合わせたアニメーションを付けると、UI全体の一体感も生まれます。
CSSのみで実装でき、軽量・高パフォーマンス。
ブランドカラーに合わせたアニメーションを付けると、UI全体の一体感も生まれます。