パーツ番号 11-08-12 ・ CSSのみ

システム稼働状況ウィジェット(固定値)

稼働率の数値と日別バーを固定表示するステータスウィジェットです。管理画面のサーバー監視パネルの見本に利用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-08-12-card">
          <div class="d11-08-12-head"><span class="d11-08-12-dot"></span>システム稼働状況</div>
          <div class="d11-08-12-pct">99.9<i>%</i></div>
          <div class="d11-08-12-bars">
            <span class="on"></span><span class="on"></span><span class="on"></span><span class="on"></span><span class="warn"></span><span class="on"></span><span class="on"></span>
          </div>
          <p class="d11-08-12-cap">過去7日間の稼働率</p>
        </div>

CSS

.d11-08-12{background:#f1f5f9}
        .d11-08-12-card{width:250px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px 20px;box-shadow:0 6px 18px rgba(15,23,42,.06)}
        .d11-08-12-head{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#475569;margin-bottom:10px}
        .d11-08-12-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;display:inline-block}
        .d11-08-12-pct{font-size:30px;font-weight:800;color:#0f172a;line-height:1;margin-bottom:10px}
        .d11-08-12-pct i{font-size:15px;font-style:normal;color:#22c55e;margin-left:1px}
        .d11-08-12-bars{display:flex;gap:4px;margin-bottom:8px}
        .d11-08-12-bars span{flex:1;height:22px;border-radius:4px;background:#22c55e;display:block}
        .d11-08-12-bars span.warn{background:#f59e0b}
        .d11-08-12-cap{margin:0;font-size:10.5px;color:#94a3b8}

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