フォーム・お問い合わせコード生成用
カレンダーで選ぶ日付入力
空いている日がひと目で分かる、月表示のカレンダー。
用途・説明
月ごとのカレンダーから日付を選ぶ入力パーツを作ります。選べない日（過去の日、定休日、満席の日）を薄く表示するので、予約できる日がすぐに分かります。来店予約、相談会の申し込み、宿泊の日程選びなどに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[選べない日]- 例：過去の日、毎週火曜、満席の日
[選べる期間]- 例：今日から2か月先まで
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはフォームのUIに詳しいフロントエンドエンジニアです。 以下の条件で「カレンダーで選ぶ日付入力」を実装してください。 ## 表示内容 - 上部：「2026年5月」のような年月と、前の月・次の月へのボタン - 曜日の行（日〜土）と、日付のマス（6週ぶん） - 選べない日：[選べない日] - 選べる期間：[選べる期間] ## デザイン - 全体：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 16px、最大幅 360px - 日付のマス：44×44px、文字 14px、角丸 50% - 選択中の日：背景 #1463F0、文字 #FFFFFF、font-weight 700 - 今日：#1463F0 の枠線 1px - 選べない日：文字 #CBD5E1、カーソル not-allowed。満席の日は下に小さく「×」を付ける - 日曜・祝日の色分けはしない（色に意味を持たせすぎない） - hover：背景 #F1F5FC ## 動作 - 日付を押すと選択され、「5月24日（日）」のように下に表示する - 選べる期間の外へは、月の移動ボタンを押せないようにする - 選んだ値は YYYY-MM-DD の形で隠し入力欄に入れる ## アクセシビリティ - カレンダーは role="grid"、日付は button 要素。aria-label は「2026年5月24日 日曜日」のように読み上げられる形にする - 矢印キーで日付を移動、PageUp / PageDown で月を移動できる - 選べない日は aria-disabled="true" にし、理由（定休日・満席）を読み上げに含める - 選択中の日は aria-pressed="true" ## 出力形式 - [使用技術]のコードを1つ出力 - 日付の計算に外部ライブラリを使わない場合と、使う場合の注意をコメントで補足する
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。