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

ミニカード羅列型統計(6項目グリッド)

小さな統計カードを6つ並べたグリッド構成です。会員数や投稿数など複数指標をまとめて表示するダッシュボードに向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-09-09-grid">
          <div class="d05-09-09-card"><span class="d05-09-09-num">312</span><span class="d05-09-09-lbl">新規会員</span></div>
          <div class="d05-09-09-card"><span class="d05-09-09-num">58</span><span class="d05-09-09-lbl">記事投稿</span></div>
          <div class="d05-09-09-card"><span class="d05-09-09-num">1.2k</span><span class="d05-09-09-lbl">PV数</span></div>
          <div class="d05-09-09-card"><span class="d05-09-09-num">89</span><span class="d05-09-09-lbl">コメント</span></div>
          <div class="d05-09-09-card"><span class="d05-09-09-num">17</span><span class="d05-09-09-lbl">お問合せ</span></div>
          <div class="d05-09-09-card"><span class="d05-09-09-num">99%</span><span class="d05-09-09-lbl">稼働率</span></div>
        </div>

CSS

.d05-09-09{padding:18px}
        .d05-09-09-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
        .d05-09-09-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 4px;border-radius:8px;background:#f8fafc;border:1px solid #eef1f5}
        .d05-09-09-num{font-size:17px;font-weight:800;color:#334155}
        .d05-09-09-lbl{margin-top:4px;font-size:9.5px;color:#94a3b8;font-weight:600;text-align:center}

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