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

ヒートマップ風カラーグリッド

濃淡で数値の大小を表現したヒートマップ風のカラーグリッドです。活動量や稼働状況をイメージで伝えるダッシュボードのサンプル表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-12-09-grid">
          <span class="d05-12-09-cell d05-12-09-c0"></span><span class="d05-12-09-cell d05-12-09-c2"></span><span class="d05-12-09-cell d05-12-09-c1"></span><span class="d05-12-09-cell d05-12-09-c3"></span><span class="d05-12-09-cell d05-12-09-c0"></span><span class="d05-12-09-cell d05-12-09-c4"></span><span class="d05-12-09-cell d05-12-09-c2"></span>
          <span class="d05-12-09-cell d05-12-09-c1"></span><span class="d05-12-09-cell d05-12-09-c3"></span><span class="d05-12-09-cell d05-12-09-c2"></span><span class="d05-12-09-cell d05-12-09-c0"></span><span class="d05-12-09-cell d05-12-09-c4"></span><span class="d05-12-09-cell d05-12-09-c3"></span><span class="d05-12-09-cell d05-12-09-c1"></span>
          <span class="d05-12-09-cell d05-12-09-c2"></span><span class="d05-12-09-cell d05-12-09-c1"></span><span class="d05-12-09-cell d05-12-09-c4"></span><span class="d05-12-09-cell d05-12-09-c3"></span><span class="d05-12-09-cell d05-12-09-c2"></span><span class="d05-12-09-cell d05-12-09-c0"></span><span class="d05-12-09-cell d05-12-09-c3"></span>
          <span class="d05-12-09-cell d05-12-09-c0"></span><span class="d05-12-09-cell d05-12-09-c3"></span><span class="d05-12-09-cell d05-12-09-c2"></span><span class="d05-12-09-cell d05-12-09-c4"></span><span class="d05-12-09-cell d05-12-09-c1"></span><span class="d05-12-09-cell d05-12-09-c2"></span><span class="d05-12-09-cell d05-12-09-c0"></span>
        </div>
        <div class="d05-12-09-cap"><span>少ない</span><span class="d05-12-09-scale"></span><span>多い</span></div>

CSS

.d05-12-09{padding:20px;flex-direction:column;gap:10px}
        .d05-12-09-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;width:100%}
        .d05-12-09-cell{display:block;width:100%;padding-top:100%;border-radius:3px}
        .d05-12-09-c0{background:#f1f5f9}
        .d05-12-09-c1{background:#bbf7d0}
        .d05-12-09-c2{background:#86efac}
        .d05-12-09-c3{background:#4ade80}
        .d05-12-09-c4{background:#16a34a}
        .d05-12-09-cap{display:flex;align-items:center;gap:6px;font-size:10px;color:#94a3b8;font-weight:600}
        .d05-12-09-scale{width:70px;height:8px;border-radius:4px;background:linear-gradient(to right,#f1f5f9,#16a34a)}

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