テーブル・一覧コード生成用
診療時間・営業時間の表
曜日と時間帯ごとに、開いているかを●で示す。
用途・説明
曜日を横、時間帯を縦に並べ、開いているかどうかを記号で示す表を作成します。クリニックの診療時間、サロンやお店の営業時間、教室の開講日などに向いています。今日の列を目立たせ、スマホでも1画面に収まるようにします。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[時間帯と曜日ごとの状況]- 例：9:00〜12:00 は月〜土、14:00〜18:00 は月火金（土は17時まで）
[注記]- 例：▲ 土曜の午後は17時まで。祝日は休診
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「診療時間・営業時間の表」を実装してください。 ## 表示内容 - 時間帯と曜日ごとの状況：[時間帯と曜日ごとの状況] - 注記：[注記] ## レイアウト - 左端に時間帯の列、その右に月〜日の7列。曜日の列は同じ幅で、中央揃え - スマホでも横スクロールなしで収まるよう、曜日の列の padding を小さくし、時間帯は2行に折り返す - 注記は表の下に左揃え ## デザイン - 表：外枠 1px solid #E2E8F0、角丸 10px - 見出しの行（曜日）：背景 #F7F9FC、文字 14px・font-weight 700・色 #5F6D84 - 時間帯：14px、font-weight 700、色 #1B2A44、折り返さない単位で改行する - ●（開いている）：16px、色 #1463F0 - ▲（一部）：16px、色 #1463F0 - 休み：「休」または「／」、14px、色 #8A96AA - セルの padding：14px 4px、下に 1px solid #EDF1F7 - 土曜の見出しを青系、日曜の見出しを赤系の文字色にする場合は、控えめな色にする - 注記：13px、line-height 1.7、色 #5F6D84 ## 動作 - 今日の曜日の列を、淡い背景色（#1463F0 の9%）で強調し、見出しに「今日」と添える - 表の上に、「ただいま診療中」「本日は終了しました」などの現在の状況を、時刻から判定して表示できるようにする（タイムゾーンは日本時間で固定する） ## アクセシビリティ - 曜日のセルは th（scope="col"）、時間帯のセルは th（scope="row"） - 記号には、読み上げ用の文字を添える（●＝「診療あり」、▲＝「時間変更あり」、休＝「休診」） - 色だけでなく、記号の形で区別できるようにする - 記号の意味を、注記のなかで説明する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。