パーツ番号 05-04-11 ・ CSSのみ

実績ヒートマップカレンダー

月ごとの稼働量を濃淡のマスで一覧化するヒートマップです。WordPressの制作実績や更新頻度の可視化、活動量アピールに使えます。

css

プレビュー

ソースコード

HTML

<div class="d05-04-11-wrap">
          <p class="d05-04-11-cap">月別 稼働実績ヒートマップ</p>
          <div class="d05-04-11-grid">
            <span style="--v:1"></span><span style="--v:3"></span><span style="--v:2"></span><span style="--v:4"></span><span style="--v:2"></span><span style="--v:1"></span>
            <span style="--v:2"></span><span style="--v:4"></span><span style="--v:3"></span><span style="--v:4"></span><span style="--v:3"></span><span style="--v:2"></span>
          </div>
          <div class="d05-04-11-legend"><span>少ない</span><i style="--v:1"></i><i style="--v:2"></i><i style="--v:3"></i><i style="--v:4"></i><span>多い</span></div>
        </div>

CSS

.d05-04-11-wrap{width:100%;max-width:260px}
        .d05-04-11-cap{margin:0 0 12px;font-size:12px;color:#5a6273;text-align:center}
        .d05-04-11-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
        .d05-04-11-grid span{aspect-ratio:1;border-radius:5px;background:rgba(43,92,255,calc(var(--v) * .22));transition:transform .2s}
        .d05-04-11-grid span:hover{transform:scale(1.15)}
        .d05-04-11-legend{display:flex;align-items:center;gap:5px;justify-content:center;margin-top:14px;font-size:9px;color:#94a3b8}
        .d05-04-11-legend i{width:10px;height:10px;border-radius:3px;background:rgba(43,92,255,calc(var(--v) * .22));display:inline-block}

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