フォーム・お問い合わせコード生成用
営業日カレンダー
今月と来月の休業日を、ひと目で分かる色分けで。
用途・説明
営業日と休業日を、月ごとのカレンダーで表示するパーツを作成します。定休日、臨時休業、短縮営業を色分けして示すので、問い合わせや来店の前に確認できます。店舗、クリニック、ショールーム、ネットショップの発送日の案内に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[定休日]- 例：毎週火曜、第3水曜
[臨時休業日]- 例：5月3日〜5日
[営業時間]- 例：10:00〜19:00
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「営業日カレンダー」を実装してください。 ## 表示内容 - 今月と来月のカレンダーを横に並べる（スマホは縦） - 定休日：[定休日] - 臨時休業日：[臨時休業日] - 営業時間：[営業時間]（カレンダーの下に表示） - 凡例：「休業日」「今日」 ## デザイン - 各カレンダー：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 16px - 月の見出し：16px、font-weight 700、中央揃え - 曜日の行：12px、色 #5F6D84 - 日付のマス：正方形、文字 14px、中央揃え - 休業日：背景は #1463F0 の15%の淡い色、文字 #1463F0、角丸 50% - 今日：枠線 2px solid #1B2A44、角丸 50% - 前後の月の日付は表示しない（空のマスにする） - 凡例：12px、色の丸と文字を横に並べる ## 動作 - 今日の日付をもとに、今月と来月を自動で表示する - 定休日は「毎週〇曜日」「第n〇曜日」のルールで自動で判定する - 臨時休業日と臨時営業日は、日付の配列で指定できるようにする（臨時営業日は、定休日の判定より優先する） - 設定は1か所にまとめる ## アクセシビリティ - 各月を table 要素でマークアップし、caption に「2026年5月」と入れる。曜日は th（scope="col"） - 休業日のマスには、読み上げ用に「休業日」の文言を付ける（色だけで伝えない） - 今日のマスには aria-current="date" - カレンダーの下に、文字でも「定休日：毎週火曜」と書く ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。