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

パーツ番号 10-07-04 ・ CSSのみ

空き状況ヒートマップカレンダー

日付ごとの混雑度を色の濃淡で表示するカレンダー。宿泊施設や会議室予約で混雑具合を直感的に伝えたい時に使う。

css

プレビュー

ソースコード

HTML

<div class="d10-07-04-wrap">
          <p class="d10-07-04-title">7月の空き状況</p>
          <div class="d10-07-04-grid">
            <span class="d10-07-04-w">月</span><span class="d10-07-04-w">火</span><span class="d10-07-04-w">水</span><span class="d10-07-04-w">木</span><span class="d10-07-04-w">金</span><span class="d10-07-04-w">土</span><span class="d10-07-04-w">日</span>
            <span class="d10-07-04-d" data-lv="0">1</span><span class="d10-07-04-d" data-lv="1">2</span><span class="d10-07-04-d" data-lv="2">3</span><span class="d10-07-04-d" data-lv="3">4</span><span class="d10-07-04-d" data-lv="1">5</span><span class="d10-07-04-d" data-lv="0">6</span><span class="d10-07-04-d" data-lv="0">7</span>
            <span class="d10-07-04-d" data-lv="2">8</span><span class="d10-07-04-d" data-lv="3">9</span><span class="d10-07-04-d" data-lv="4">10</span><span class="d10-07-04-d" data-lv="2">11</span><span class="d10-07-04-d" data-lv="1">12</span><span class="d10-07-04-d" data-lv="0">13</span><span class="d10-07-04-d" data-lv="0">14</span>
          </div>
          <div class="d10-07-04-legend">
            <span>空き</span>
            <i data-lv="0"></i><i data-lv="1"></i><i data-lv="2"></i><i data-lv="3"></i><i data-lv="4"></i>
            <span>混雑</span>
          </div>
        </div>

CSS

.d10-07-04-wrap{width:100%;max-width:260px;}
        .d10-07-04-title{font-size:12px;font-weight:600;color:#444;margin:0 0 8px;text-align:center;}
        .d10-07-04-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
        .d10-07-04-w{font-size:10px;color:#999;text-align:center;padding-bottom:2px;}
        .d10-07-04-d{font-size:11px;text-align:center;padding:6px 0;border-radius:4px;color:#333;background:#eef3ff;}
        .d10-07-04-d[data-lv="0"]{background:#f2f2f2;color:#bbb;}
        .d10-07-04-d[data-lv="1"]{background:#d7e6ff;}
        .d10-07-04-d[data-lv="2"]{background:#a9c8ff;}
        .d10-07-04-d[data-lv="3"]{background:#6f9dff;color:#fff;}
        .d10-07-04-d[data-lv="4"]{background:#2f5fd0;color:#fff;font-weight:700;}
        .d10-07-04-legend{display:flex;align-items:center;gap:3px;margin-top:10px;font-size:9px;color:#999;}
        .d10-07-04-legend i{width:12px;height:12px;border-radius:2px;display:inline-block;}
        .d10-07-04-legend i[data-lv="0"]{background:#f2f2f2;}
        .d10-07-04-legend i[data-lv="1"]{background:#d7e6ff;}
        .d10-07-04-legend i[data-lv="2"]{background:#a9c8ff;}
        .d10-07-04-legend i[data-lv="3"]{background:#6f9dff;}
        .d10-07-04-legend i[data-lv="4"]{background:#2f5fd0;}

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