パーツ番号 10-09-04 ・ CSSのみ

時間スロット一覧(固定・空き/満席)

予約可能な時間帯を縦に並べ空き状況バッジを添えた一覧。時間枠制の予約フォーム上部などに使える。

staticcss

プレビュー

ソースコード

HTML

<ul class="slots">
          <li><span class="time">10:00-10:30</span><span class="badge ok">空き</span></li>
          <li><span class="time">10:30-11:00</span><span class="badge full">満席</span></li>
          <li><span class="time">11:00-11:30</span><span class="badge ok">空き</span></li>
          <li><span class="time">13:00-13:30</span><span class="badge full">満席</span></li>
          <li><span class="time">13:30-14:00</span><span class="badge ok">空き</span></li>
        </ul>

CSS

.d10-09-04 .slots{ list-style:none; margin:0; padding:0; width:100%; max-width:220px; display:flex; flex-direction:column; gap:6px; }
        .d10-09-04 .slots li{ display:flex; align-items:center; justify-content:space-between; padding:6px 10px; border-radius:6px; background:#f7f8fa; }
        .d10-09-04 .time{ font-size:12px; color:#3a3f47; }
        .d10-09-04 .badge{ font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; }
        .d10-09-04 .badge.ok{ background:#eaf7ef; color:#2f9e5c; }
        .d10-09-04 .badge.full{ background:#faeaec; color:#c1495a; }

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