パーツ番号 09-09-12 ・ CSSのみ

配信ステータスバッジ

ライブ配信の状態を色分けドット付きで示すバッジです。動画配信サイトやセミナー一覧の表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-09-12-wrap">
          <span class="d09-09-12-badge d09-09-12-live"><i class="d09-09-12-dot"></i>ライブ配信中</span>
          <span class="d09-09-12-badge d09-09-12-sched"><i class="d09-09-12-dot"></i>配信予定</span>
          <span class="d09-09-12-badge d09-09-12-ended"><i class="d09-09-12-dot"></i>配信終了</span>
        </div>

CSS

.d09-09-12-wrap{display:flex;flex-direction:column;gap:10px;align-items:flex-start;font-family:sans-serif}
        .d09-09-12-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700}
        .d09-09-12-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
        .d09-09-12-live{background:#fee2e2;color:#b91c1c}
        .d09-09-12-live .d09-09-12-dot{background:#ef4444}
        .d09-09-12-sched{background:#dbeafe;color:#1d4ed8}
        .d09-09-12-sched .d09-09-12-dot{background:#3b82f6}
        .d09-09-12-ended{background:#f3f4f6;color:#9ca3af}
        .d09-09-12-ended .d09-09-12-dot{background:#9ca3af}

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