Houn

営業時間表のHTML/CSSテーブルテンプレート
2019.07.20

Web制作メモ

営業時間表のHTML/CSSテーブルテンプレート

整体院、整骨院や歯科、クリニックなどのホームページによくある診療時間の表。これのHTMLとCSSのテンプレートを作ってみました(探しても意外と無かったので)。「午前の部 / 午後の部」って分かれてるやつです。

まずHTMLから。コピペして、貴店のスケジュールに書き換えてください。

HTML

CSS

これにCSSでデザインを当てていきます。ひとまず3パターン用意しました。色とか、好みで変えやすい箇所にはコメント添えてあります。

テンプレート1

まず、いちばんよく見るベーシックなもの

営業時間テンプレート1

テンプレート2

テンプレート1の5行目、padding: 10px;padding: 10px 25px;に書き換えただけです。横にちょっと長くなってゆとりのあるデザインになります。

ちなみにこの指定は、10pxが縦の余白、25pxが横の余白という意味です。テンプレート1のように10pxとだけ指定すると縦横4方向全部が10pxだよ。となります。

営業時間テンプレート2

テンプレート3

上下にだけ線を引いたデザイン。シュッとした印象になりますね。

営業時間テンプレート3

Share on SNSシェア

Related 関連記事