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

混雑状況インジケーター付きアクセスカード

施設の混雑レベルを3段階のバーで固定表示するカード。観光施設や店舗の来場前混雑案内に使える表示形式です。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <p class="shop">サンプル温泉施設</p>
          <div class="level">
            <span class="lb">混雑状況</span>
            <div class="bar"><i class="seg on"></i><i class="seg on"></i><i class="seg"></i></div>
            <span class="txt">やや混雑</span>
          </div>
        </div>

CSS

.d10-11-11 .card{width:100%;background:#fff;border:1px solid #e5e9ee;border-radius:10px;padding:16px 18px;}
        .d10-11-11 .shop{margin:0 0 10px;font-size:13.5px;font-weight:700;color:#1f2937;}
        .d10-11-11 .level{display:flex;align-items:center;gap:8px;}
        .d10-11-11 .lb{font-size:11px;color:#94a3b8;flex:0 0 auto;}
        .d10-11-11 .bar{flex:1;display:flex;gap:3px;}
        .d10-11-11 .seg{flex:1;height:8px;border-radius:3px;background:#eef1f4;display:block;}
        .d10-11-11 .seg.on{background:#e08a2c;}
        .d10-11-11 .txt{font-size:11px;font-weight:700;color:#e08a2c;flex:0 0 auto;}

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