
2019.07.20
コーディング
営業時間表のHTML/CSSテーブルテンプレート
整体院、整骨院や歯科、クリニックなどのホームページによくある診療時間の表。これのHTMLとCSSのテンプレートを作ってみました(探しても意外と無かったので)。「午前の部 / 午後の部」って分かれてるやつです。
まずHTMLから。コピペして、貴店のスケジュールに書き換えてください。
HTML
CSS
これにCSSでデザインを当てていきます。ひとまず3パターン用意しました。色とか、好みで変えやすい箇所にはコメント添えてあります。
テンプレート1
まず、いちばんよく見るベーシックなもの
テンプレート2
テンプレート1の5行目、padding: 10px;
をpadding: 10px 25px;
に書き換えただけです。横にちょっと長くなってゆとりのあるデザインになります。
ちなみにこの指定は、10pxが縦の余白、25pxが横の余白という意味です。テンプレート1のように10pxとだけ指定すると縦横4方向全部が10pxだよ。となります。
テンプレート3
上下にだけ線を引いたデザイン。シュッとした印象になりますね。