← 静的パーツギャラリーへ戻る

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

上部KPIバー+下部詳細エリア構成

上段に主要指標を横並びで表示し、下段に詳細情報を配置する構成。管理画面のトップページで全体像を先に見せたい場合に用いる。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-10-03-wrap">
          <div class="d01-10-03-kpis">
            <div class="d01-10-03-kpi"><span>売上</span><b>¥1.2M</b></div>
            <div class="d01-10-03-kpi"><span>注文</span><b>842</b></div>
            <div class="d01-10-03-kpi"><span>顧客</span><b>1,930</b></div>
            <div class="d01-10-03-kpi"><span>返品率</span><b>1.8%</b></div>
          </div>
          <div class="d01-10-03-detail">
            <div class="d01-10-03-dhead"><span></span><span></span></div>
            <div class="d01-10-03-drows">
              <i></i><i></i><i></i><i></i>
            </div>
          </div>
        </div>

CSS

.prev.d01-10-03{padding:16px;align-items:stretch}
        .d01-10-03-wrap{display:flex;flex-direction:column;gap:12px;width:100%;font-family:sans-serif}
        .d01-10-03-kpis{display:flex;gap:10px}
        .d01-10-03-kpi{flex:1;background:#0f172a;border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
        .d01-10-03-kpi span{font-size:11px;color:#94a3b8}
        .d01-10-03-kpi b{font-size:16px;color:#fff}
        .d01-10-03-detail{flex:1;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:10px}
        .d01-10-03-dhead{display:flex;justify-content:space-between}
        .d01-10-03-dhead span:first-child{width:90px;height:10px;border-radius:4px;background:#334155;display:block}
        .d01-10-03-dhead span:last-child{width:50px;height:10px;border-radius:4px;background:#e2e8f0;display:block}
        .d01-10-03-drows{display:flex;flex-direction:column;gap:8px}
        .d01-10-03-drows i{display:block;height:10px;border-radius:4px;background:#f1f5f9}
        .d01-10-03-drows i:nth-child(1){width:100%}
        .d01-10-03-drows i:nth-child(2){width:85%}
        .d01-10-03-drows i:nth-child(3){width:92%}
        .d01-10-03-drows i:nth-child(4){width:70%}

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