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

空き状況カレンダー(◎○△×固定表示)

日付ごとの空き状況を記号と色で示す一覧。宿泊・施設予約サイトの空室状況表示によく使われる形式。

staticcss

プレビュー

ソースコード

HTML

<div class="avail">
          <div class="cell"><span class="date">7/8</span><span class="mark ok">◎</span></div>
          <div class="cell"><span class="date">7/9</span><span class="mark mid">○</span></div>
          <div class="cell"><span class="date">7/10</span><span class="mark few">△</span></div>
          <div class="cell"><span class="date">7/11</span><span class="mark full">×</span></div>
          <div class="cell"><span class="date">7/12</span><span class="mark ok">◎</span></div>
          <div class="cell"><span class="date">7/13</span><span class="mark mid">○</span></div>
          <div class="cell"><span class="date">7/14</span><span class="mark few">△</span></div>
        </div>

CSS

.d10-09-02 .avail{ display:flex; gap:5px; }
        .d10-09-02 .cell{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 4px; border-radius:6px; background:#f7f8fa; min-width:30px; }
        .d10-09-02 .date{ font-size:9px; color:#9098a3; }
        .d10-09-02 .mark{ font-size:14px; font-weight:700; }
        .d10-09-02 .mark.ok{ color:#2f9e5c; }
        .d10-09-02 .mark.mid{ color:#3f6fe0; }
        .d10-09-02 .mark.few{ color:#e08a2c; }
        .d10-09-02 .mark.full{ color:#c1495a; }

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