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

座席マップ(固定・選択済み表示)

グリッド状の座席の選択・予約済み状態を固定表示するマップ。劇場や会議室の座席予約画面に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="seatmap">
          <div class="screen">SCREEN</div>
          <div class="seats">
            <i></i><i></i><i class="sel"></i><i class="sel"></i><i></i><i></i>
            <i></i><i class="booked"></i><i class="booked"></i><i></i><i></i><i></i>
            <i></i><i></i><i></i><i class="sel"></i><i></i><i></i>
          </div>
          <div class="legend"><span><i class="lg sel"></i>選択済</span><span><i class="lg booked"></i>予約済</span></div>
        </div>

CSS

.d10-09-08 .seatmap{ display:flex; flex-direction:column; align-items:center; gap:8px; }
        .d10-09-08 .screen{ font-size:8px; letter-spacing:2px; color:#9098a3; background:#eceef1; padding:2px 20px; border-radius:3px; }
        .d10-09-08 .seats{ display:grid; grid-template-columns:repeat(6,1fr); gap:4px; }
        .d10-09-08 .seats i{ width:16px; height:16px; border-radius:3px; background:#eceef1; display:block; }
        .d10-09-08 .seats i.sel{ background:#3f6fe0; }
        .d10-09-08 .seats i.booked{ background:#c8ccd2; }
        .d10-09-08 .legend{ display:flex; gap:10px; font-size:9px; color:#8a8f98; }
        .d10-09-08 .legend .lg{ width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:3px; vertical-align:middle; }
        .d10-09-08 .legend .lg.sel{ background:#3f6fe0; }
        .d10-09-08 .legend .lg.booked{ background:#c8ccd2; }

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