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

期間比較2列KPIカード

今週と先週の数値を左右に並べて比較する構成。WordPressの週次アクセスレポートや受注件数の比較表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-13-09-card">
          <div class="d05-13-09-col">
            <p class="d05-13-09-tag">今週</p>
            <p class="d05-13-09-value">386</p>
          </div>
          <div class="d05-13-09-div"></div>
          <div class="d05-13-09-col">
            <p class="d05-13-09-tag">先週</p>
            <p class="d05-13-09-value d05-13-09-prev">341</p>
          </div>
        </div>

CSS

.d05-13-09-card{
          width:100%;max-width:270px;background:#fff;border:1px solid #e5e7eb;
          border-radius:14px;padding:20px 10px;box-sizing:border-box;
          display:flex;align-items:center;
        }
        .d05-13-09-col{flex:1;text-align:center}
        .d05-13-09-div{width:1px;align-self:stretch;background:#eef0f3;margin:0 6px}
        .d05-13-09-tag{margin:0 0 8px;font-size:11.5px;font-weight:700;color:#9ca3af}
        .d05-13-09-value{margin:0;font-size:22px;font-weight:800;color:#1f2937}
        .d05-13-09-prev{color:#9ca3af;font-size:19px}

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