フォーム・お問い合わせコード生成用
ラベルが浮き上がる入力欄
入力を始めると、ラベルが小さくなって枠の上へ。
用途・説明
入力欄のなかに置いたラベルが、フォーカスまたは入力すると小さくなって上に移動する「フローティングラベル」の入力欄を作ります。ラベルが消えないので、何を入力する欄かが最後まで分かります。項目の少ないログインや会員登録のフォームをすっきり見せたいときに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[項目]- 例：メールアドレス、パスワード
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはフォームのUIに詳しいフロントエンドエンジニアです。 以下の条件で「ラベルが浮き上がる入力欄」を実装してください。 ## 表示内容 - 入力する項目：[項目] ## デザイン - 入力欄：高さ 56px、左右padding 16px、枠線 1px solid #CBD5E1、角丸 8px、背景 #FFFFFF、文字 16px - ラベル（入力前）：入力欄の上下中央、16px、色 #8A96AA - ラベル（フォーカス中・入力済み）：12px に縮小し、枠線の上に移動。枠線に重なる部分は背景 #FFFFFF で切り欠く（左右padding 4px） - フォーカス中：枠線 2px solid #1463F0、ラベルの色 #1463F0 - 入力済みでフォーカスが外れたとき：ラベルは上のまま、色 #5F6D84 - ラベルの移動は 0.15秒 ## 実装方法 - JavaScript を使わず、:focus と :placeholder-shown でラベルの位置を切り替える（placeholder は半角スペース1つにする） - 入力欄のテキストは、ラベルと重ならないよう上下中央に置く - ブラウザの自動入力（autofill）でも、ラベルが上に移動するようにする ## アクセシビリティ - label 要素を使い、for / id で関連付ける（placeholder をラベル代わりにしない） - 入力例を見せたい場合は、入力欄の下に補足文として表示する - 入力前のラベルの色は、背景とのコントラスト比 4.5:1 以上になるよう調整する - ラベルの動きは prefers-reduced-motion で無効化 - エラー時は枠線とラベルを #C9343A にし、下にエラー文を表示する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。