パーツ番号 10-11-05 ・ CSSのみ

営業中/準備中ステータス付き店舗情報(固定)

各店舗の営業状態をドットとラベルで固定表示する一覧。複数店舗の稼働状況をまとめて見せたい場合に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="list">
          <div class="row">
            <span class="dot on"></span>
            <span class="name">サンプル本店</span>
            <span class="stat on">営業中</span>
          </div>
          <div class="row">
            <span class="dot off"></span>
            <span class="name">架空支店C</span>
            <span class="stat off">準備中</span>
          </div>
        </div>

CSS

.d10-11-05 .list{width:100%;background:#fff;border:1px solid #e5e9ee;border-radius:10px;padding:8px;}
        .d10-11-05 .row{display:flex;align-items:center;gap:8px;padding:10px 8px;border-radius:8px;}
        .d10-11-05 .row + .row{border-top:1px solid #f1f4f7;}
        .d10-11-05 .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
        .d10-11-05 .dot.on{background:#2f9e64;}
        .d10-11-05 .dot.off{background:#c3cad3;}
        .d10-11-05 .name{flex:1;font-size:12.5px;color:#334155;}
        .d10-11-05 .stat{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;}
        .d10-11-05 .stat.on{color:#2f9e64;background:#e7f6ed;}
        .d10-11-05 .stat.off{color:#8792a2;background:#f1f3f5;}

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