カレンダーヒートマップ
GitHub風の週×曜日グリッドを値の濃淡(藍の階調)で塗る。セルにホバー/タップで値ツールチップを表示。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- 日ごとの活動量を数か月分まとめて見せる実績表示
- 継続の習慣化を促すプロフィール
- 曜日の偏りを見せたい分析
- 避ける場面
- 正確な日付と値を読ませたい報告（表が向く）
- スマホ幅で 18 週分が収まらない画面
- 構成要素
- 見出し
- 凡例
- 曜日ラベル
- セル
- ツールチップ
- 持っている状態
- 通常
- ホバー
- キーボード
Tab でグリッドへ（1 セルだけ tabindex=0）、←→ で前後の週、↑↓ で前後の曜日、Home／End で最初・最後のセルへ。フォーカスしたセルの件数がツールチップに出る
- 支援技術
枠は role=group＋aria-label、各セルは button で aria-label「第N週 曜日 M件」。ローミング tabindex。ツールチップは role=tooltip で focus でも表示。濃淡は凡例で示す。reduced-motion で遷移停止
- 動き
セルの透明度 150ms・ツールチップのフェード 150ms
デザインの要点
- 濃淡は 5 段階に量子化する。連続階調にすると隣のセルとの差が読めず、凡例も作れない
- 0 件も最も薄い色で塗って空白にしない。空白だと「データが無い日」と「0 件の日」が区別できない
- セルは 12px でも当たり判定は 24px 取る（負のマージンで重ねる）。126 個を Tab で回らせず矢印キーで動かす
- ツールチップは position:fixed で座標を計算して置く。グリッドが横スクロールしても切れない
コード（コピーして使えます）
<div class="ch-wrap">
<div class="ch-header">
<span class="ch-title">アクティビティ</span>
<span class="ch-legend" aria-label="凡例: 薄いほど少なく、濃いほど多い">
<span class="ch-leg-label">少</span>
<span class="ch-leg-cell" style="--lv:0"></span>
<span class="ch-leg-cell" style="--lv:1"></span>
<span class="ch-leg-cell" style="--lv:2"></span>
<span class="ch-leg-cell" style="--lv:3"></span>
<span class="ch-leg-cell" style="--lv:4"></span>
<span class="ch-leg-label">多</span>
</span>
</div>
<div class="ch-body">
<div class="ch-day-labels" aria-hidden="true">
<span>月</span><span></span><span>水</span><span></span><span>金</span><span></span><span>日</span>
</div>
<div class="ch-grid" id="chGrid" role="group" aria-label="18週分の日別アクティビティ（矢印キーで移動）"></div>
</div>
<div class="ch-tip" id="chTip" role="tooltip" aria-hidden="true"></div>
</div>