フォーム・お問い合わせコード生成用
文字数カウント付きの入力欄
残りの文字数が分かる、複数行の入力欄。
用途・説明
お問い合わせ内容、自己紹介、レビューなど、長めの文章を入力する欄を作成します。右下に「68 / 400」のように文字数を表示し、上限に近づくと色で知らせます。入力に合わせて高さが伸びる指定も含みます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ラベル]- 例：お問い合わせ内容
[上限文字数]- 例：400
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはフォームのUXとアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「文字数カウント付きの入力欄（テキストエリア）」を実装してください。 ## 表示内容 - ラベル：[ラベル] - 複数行の入力欄 - 入力欄の右下に「現在の文字数 / [上限文字数]」 ## レイアウト・デザイン - ラベルは入力欄の上に常に表示（14px、font-weight 700、色 #1B2A44） - 入力欄：最小の高さ 120px、padding 12px 14px、角丸 8px、1px solid #CBD5E1、文字 16px、line-height 1.7、色 #1B2A44 - フォーカス時：枠線 #1463F0 と 3px の薄いリング - 文字数：12px、色 #5F6D84。入力欄の下 6px、右揃え - 上限の90%を超えたら文字数を太字に、上限を超えたら赤系の色にして「〇文字オーバー」と表示 ## 動作 - 入力に合わせて高さが自動で伸びる（最大 320px、それ以上は中でスクロール） - 上限を超えても入力は止めない（貼り付けた文章を自分で削れるようにする）。送信時にエラーにする - 手動のリサイズは縦方向だけ許可する ## アクセシビリティ - 文字数の表示は aria-describedby で入力欄と関連付ける - 文字数の読み上げは、入力のたびではなく、残り少なくなったときと超えたときだけ aria-live="polite" で伝える - 上限超過は色だけでなく文字でも伝える ## 出力形式 - [使用技術]のコードを1つ出力 - 色・上限文字数・高さをCSS変数や定数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。