パーツ番号 01-10-02 ・ CSSのみ

カード羅列型ダッシュボード

複数の統計カードをグリッドで並べる構成。会員マイページの利用状況サマリーなど、数値指標をまとめて見せたい場面に適する。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-10-02-grid">
          <div class="d01-10-02-card">
            <div class="d01-10-02-top"><span class="d01-10-02-lbl"></span><i class="d01-10-02-ic c1"></i></div>
            <b>128</b>
            <span class="d01-10-02-tag up">+12%</span>
          </div>
          <div class="d01-10-02-card">
            <div class="d01-10-02-top"><span class="d01-10-02-lbl"></span><i class="d01-10-02-ic c2"></i></div>
            <b>3,204</b>
            <span class="d01-10-02-tag up">+4%</span>
          </div>
          <div class="d01-10-02-card">
            <div class="d01-10-02-top"><span class="d01-10-02-lbl"></span><i class="d01-10-02-ic c3"></i></div>
            <b>¥52万</b>
            <span class="d01-10-02-tag down">-2%</span>
          </div>
          <div class="d01-10-02-card">
            <div class="d01-10-02-top"><span class="d01-10-02-lbl"></span><i class="d01-10-02-ic c4"></i></div>
            <b>87%</b>
            <span class="d01-10-02-tag up">+1%</span>
          </div>
        </div>

CSS

.prev.d01-10-02{padding:16px;align-items:stretch;background:#f4f5f7}
        .d01-10-02-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;font-family:sans-serif}
        .d01-10-02-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:8px}
        .d01-10-02-top{display:flex;justify-content:space-between;align-items:center}
        .d01-10-02-lbl{width:50%;height:8px;border-radius:4px;background:#cbd5e1;display:block}
        .d01-10-02-ic{width:22px;height:22px;border-radius:6px;display:block}
        .d01-10-02-ic.c1{background:#38bdf8}
        .d01-10-02-ic.c2{background:#a78bfa}
        .d01-10-02-ic.c3{background:#fb923c}
        .d01-10-02-ic.c4{background:#34d399}
        .d01-10-02-card b{font-size:19px;color:#1e293b;font-family:sans-serif}
        .d01-10-02-tag{font-size:11px;width:fit-content;padding:2px 7px;border-radius:10px}
        .d01-10-02-tag.up{background:#dcfce7;color:#16a34a}
        .d01-10-02-tag.down{background:#fee2e2;color:#dc2626}

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