パーツ番号 05-14-05 ・ CSSのみ

予約可能時間帯グリッド表

日付×時間帯を空き・予約済み・受付終了で色分けしたグリッド表。予約フォーム前の空き状況案内やサロン・施設ページに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-14-05-wrap">
          <div class="d05-14-05-grid">
            <div class="d05-14-05-cell d05-14-05-head"></div>
            <div class="d05-14-05-cell d05-14-05-head">月</div>
            <div class="d05-14-05-cell d05-14-05-head">火</div>
            <div class="d05-14-05-cell d05-14-05-head">水</div>
            <div class="d05-14-05-cell d05-14-05-head">木</div>

            <div class="d05-14-05-cell d05-14-05-time">10:00</div>
            <div class="d05-14-05-cell d05-14-05-ok"></div>
            <div class="d05-14-05-cell d05-14-05-ng"></div>
            <div class="d05-14-05-cell d05-14-05-ok"></div>
            <div class="d05-14-05-cell d05-14-05-ok"></div>

            <div class="d05-14-05-cell d05-14-05-time">11:00</div>
            <div class="d05-14-05-cell d05-14-05-ng"></div>
            <div class="d05-14-05-cell d05-14-05-ok"></div>
            <div class="d05-14-05-cell d05-14-05-ok"></div>
            <div class="d05-14-05-cell d05-14-05-close"></div>

            <div class="d05-14-05-cell d05-14-05-time">12:00</div>
            <div class="d05-14-05-cell d05-14-05-ok"></div>
            <div class="d05-14-05-cell d05-14-05-ok"></div>
            <div class="d05-14-05-cell d05-14-05-ng"></div>
            <div class="d05-14-05-cell d05-14-05-ok"></div>
          </div>
          <div class="d05-14-05-legend">
            <span><i class="d05-14-05-dot d05-14-05-ok"></i>空き</span>
            <span><i class="d05-14-05-dot d05-14-05-ng"></i>予約済</span>
            <span><i class="d05-14-05-dot d05-14-05-close"></i>受付終了</span>
          </div>
        </div>

CSS

.d05-14-05-wrap{width:100%}
        .d05-14-05-grid{display:grid;grid-template-columns:44px repeat(4,1fr);gap:3px}
        .d05-14-05-cell{height:22px;display:flex;align-items:center;justify-content:center;font-size:9px;border-radius:3px}
        .d05-14-05-head{background:transparent;color:#374151;font-weight:700}
        .d05-14-05-time{background:transparent;color:#374151;font-weight:600;justify-content:flex-start}
        .d05-14-05-ok{background:#d1fae5}
        .d05-14-05-ng{background:#fee2e2}
        .d05-14-05-close{background:#e5e7eb}
        .d05-14-05-legend{display:flex;gap:14px;margin-top:10px;font-size:9px;color:#4b5563}
        .d05-14-05-dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;vertical-align:middle}

クラス名 .d05-14-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。