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

内訳タグ一覧付き合計値KPIカード

合計値の下に構成比を色分けチップで一覧表示する構成です。単一の進捗バーより内訳の種類が多い場合に見やすく、WordPressのアクセス流入元レポートカードに向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-13-12-card">
          <p class="d05-13-12-label">流入経路合計</p>
          <p class="d05-13-12-value">32,410</p>
          <div class="d05-13-12-chips">
            <span class="d05-13-12-chip c1">検索 48%</span>
            <span class="d05-13-12-chip c2">SNS 27%</span>
            <span class="d05-13-12-chip c3">広告 15%</span>
            <span class="d05-13-12-chip c4">紹介 10%</span>
          </div>
        </div>

CSS

.d05-13-12-card{
          width:100%;max-width:270px;background:#fff;border:1px solid #e5e7eb;
          border-radius:14px;padding:20px 22px;box-sizing:border-box;
        }
        .d05-13-12-label{margin:0 0 8px;font-size:12.5px;font-weight:700;color:#6b7280}
        .d05-13-12-value{margin:0 0 14px;font-size:24px;font-weight:800;color:#1f2937}
        .d05-13-12-chips{display:flex;flex-wrap:wrap;gap:6px}
        .d05-13-12-chip{font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:999px}
        .d05-13-12-chip.c1{background:#e0e7ff;color:#4338ca}
        .d05-13-12-chip.c2{background:#fce7f3;color:#be185d}
        .d05-13-12-chip.c3{background:#fef3c7;color:#92400e}
        .d05-13-12-chip.c4{background:#d1fae5;color:#047857}

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