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

スパークライン付きKPIカード

大きな数値とミニ折れ線グラフを組み合わせた構成。WordPressのアクセス解析ウィジェットやレポート冒頭のサマリーに向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-13-02-card">
          <p class="d05-13-02-label">週間PV</p>
          <p class="d05-13-02-value">48,120</p>
          <svg class="d05-13-02-spark" viewBox="0 0 120 36" preserveAspectRatio="none">
            <polyline points="0,30 15,26 30,28 45,18 60,20 75,10 90,14 105,6 120,8" fill="none" stroke="#6366f1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            <circle cx="120" cy="8" r="3.5" fill="#6366f1"/>
          </svg>
          <p class="d05-13-02-sub">過去7日間の推移</p>
        </div>

CSS

.d05-13-02-card{
          width:100%;max-width:260px;background:#fff;border:1px solid #e5e7eb;
          border-radius:14px;padding:20px 22px;box-sizing:border-box;
        }
        .d05-13-02-label{margin:0 0 8px;font-size:12.5px;font-weight:700;color:#6b7280}
        .d05-13-02-value{margin:0 0 10px;font-size:24px;font-weight:800;color:#1f2937}
        .d05-13-02-spark{display:block;width:100%;height:36px;margin-bottom:8px}
        .d05-13-02-sub{margin:0;font-size:11px;color:#9ca3af}

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