パーツ番号 05-13-05 ・ CSSのみ

進捗率バー付きKPIカード

数値の下に達成率バーを添えた構成。WordPressの目標管理ページやキャンペーン進捗の可視化に向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-13-05-card">
          <p class="d05-13-05-label">月間目標達成率</p>
          <p class="d05-13-05-value">72<span class="d05-13-05-unit">%</span></p>
          <div class="d05-13-05-bar"><div class="d05-13-05-fill"></div></div>
          <p class="d05-13-05-sub">目標 &yen;3,000,000 中 &yen;2,160,000</p>
        </div>

CSS

.d05-13-05-card{
          width:100%;max-width:260px;background:#fff;border:1px solid #e5e7eb;
          border-radius:14px;padding:20px 22px;box-sizing:border-box;
        }
        .d05-13-05-label{margin:0 0 8px;font-size:12.5px;font-weight:700;color:#6b7280}
        .d05-13-05-value{margin:0 0 12px;font-size:26px;font-weight:800;color:#1f2937}
        .d05-13-05-unit{font-size:14px;font-weight:700;color:#6b7280;margin-left:2px}
        .d05-13-05-bar{width:100%;height:8px;background:#eef0f3;border-radius:99px;overflow:hidden;margin-bottom:10px}
        .d05-13-05-fill{width:72%;height:100%;background:linear-gradient(90deg,#6366f1,#8b5cf6);border-radius:99px}
        .d05-13-05-sub{margin:0;font-size:11px;color:#9ca3af}

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