営業時間テーブル（休業日付き）
曜日ごとの営業時間を一目で把握できる、店舗サイト向けのテーブルです。横軸に月〜日、縦軸に時間帯を取り、各セルに営業を示す丸と、休業を示すハイフンを並べます。休業セルには .hr-off クラスを当て、 color:#dc5050 の赤で定休日をはっきり示すのが特徴。
解説
曜日ごとの営業時間を一目で把握できる、店舗サイト向けのテーブルです。横軸に月〜日、縦軸に時間帯を取り、各セルに営業を示す丸と、休業を示すハイフンを並べます。休業セルには .hr-off クラスを当て、color:#dc5050 の赤で定休日をはっきり示すのが特徴。border-collapse:collapse で枠線をすっきりまとめ、角丸＋overflow:hidden でカード状に整えています。曜日見出しと時間帯見出しは th で構造化し、CSS のみで成立します。
使う場面
- クリニックや歯科の診療時間案内
- カフェ・飲食店の営業日カレンダー
- サロンやジムなど定休日のある店舗の基本情報
営業時間帯は tbody の行を増減し、各曜日のセルに丸かハイフンを入れて埋めます。休業を示したいセルに hr-off を付けると赤で強調されます。営業色（#34c759）や休業色は CSS で一括変更可能。曜日が多く横長になるため、スマホでは横スクロールにするか、午前・午後の 2 行構成のまま文字を小さくして収める工夫が有効です。記号だけでは伝わりにくい場合、見出しに「営業／休み」の凡例を添えると親切です。
よくある質問
定休日の色は変えられますか?
変えられます。休業セルに付く .hr-off の color を編集すれば、赤以外の好みの色に変更できます。営業セルの色も td の color で一括変更できます。
祝日や不定休はどう表せますか?
セルの記号を丸やハイフン以外（例えば三角など）に置き換えたり、表の下に凡例の一行を添えると伝わります。祝日列を追加するより注記で補うほうが表が崩れにくいです。