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

サーバー・システムステータス表示

複数サーバーの稼働状況を一覧で示す静止表示です。管理ダッシュボードのシステム監視パネルに使えます。

staticcss

プレビュー

ソースコード

HTML

<ul class="d09-09-04-list">
          <li class="d09-09-04-row"><span class="d09-09-04-dot d09-09-04-up"></span>Web サーバー A<span class="d09-09-04-state d09-09-04-up-t">稼働中</span></li>
          <li class="d09-09-04-row"><span class="d09-09-04-dot d09-09-04-up"></span>DB サーバー<span class="d09-09-04-state d09-09-04-up-t">稼働中</span></li>
          <li class="d09-09-04-row"><span class="d09-09-04-dot d09-09-04-down"></span>バッチサーバー<span class="d09-09-04-state d09-09-04-down-t">停止中</span></li>
        </ul>

CSS

.d09-09-04-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;width:100%;max-width:220px;font-family:sans-serif}
        .d09-09-04-row{display:flex;align-items:center;gap:8px;font-size:13px;color:#374151}
        .d09-09-04-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
        .d09-09-04-up{background:#22c55e}
        .d09-09-04-down{background:#ef4444}
        .d09-09-04-state{margin-left:auto;font-size:11px;font-weight:700}
        .d09-09-04-up-t{color:#15803d}
        .d09-09-04-down-t{color:#b91c1c}

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