> ## Content Index > Fetch the complete content index at: https://www.sakashita.page/llms.txt > Use this file to discover other available public pages before exploring further. # Days Elapsed - URL: https://www.sakashita.page/days-elapsed-yearly-progress-calendar/ - Published: 2025-12-30T13:30:21.000Z - Updated: 2026-02-25T13:30:07.000Z - Author: Sakashita Yasunobu - Tags: 技術 --- ## 一年を「面」で見る 一年は365日。数字で見ると多いけど、並べてみると案外少ない。 12ヶ月を並べて、過去を塗りつぶして、今日を光らせる。それだけのカレンダーを作った。進捗バーが「一次元」なら、これは「二次元」の進捗表示。 [Year Progress一年は50週ちょっとしかない 2026年を週で数えると、52週とちょっと。 カレンダーで見ると長そうなのに、週で数えると急に短くなる。そんな感覚を形にしたくて、このページの上の方に進捗バーを置いた。 やっていることは単純で、「今年が何%進んだか」をリアルタイムで表示しているだけ。 なぜ作ったか 理由は3つある。 1\. 時間を「量」として見たかった ── イベントや予定ではなく、単純に「どれだけ経ったか」を数値で見たかった。 2\. 目に見える形にしたかった ── 抽象的な「一年」を、動く数字に落とすとどう感じるか試したかった。 3\. 自分の場所に置きたかった ── 誰かのツールを借りるのではなく、自分のブログに自分で作ったものを置きたかった。 実装の話 せっかく作るなら、それなりに丁寧にやりたかった。 \* Web Components で実装。ブログのCSSやDOMを汚さず、どこにでも持っていける。 \* requestAnimationFrame で描画。固定間隔のタイマーではなく、画面更新に同期させることで滑らかさとリソース![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/icon/logo-1-4.png)SakashitaのブログSakashita Yasunobu![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/thumbnail/horizontal.png)](https://www.sakashita.page/year-time/) これは一年の進捗バー --- ## なぜ作ったか 進捗バーでは「どれだけ進んだか」はわかる。でも「今どこにいるか」は見えない。 - **空間で把握したかった** ── 線ではなく面で。12月がどこにあるか、今が年のどのあたりか、一目でわかるようにしたかった。 - **月の重みを感じたかった** ── 1月も12月も同じ1マス。でも並べると、過ぎた月と残った月の差が目に見える。 - **GitHubの草が好きだった** ── あの「塗りつぶされていく感覚」を、一年単位で味わいたかった。 --- ## 設計の話 ### レスポンシブは妥協しない 最初は GitHub 風の「7行 × 53列」で作った。見た目は良かったけど、スマホで横スクロールが発生して使い物にならなかった。 解決策は「月ベースのレイアウト」。12ヶ月を並べて、画面幅に応じて 4列 → 3列 → 2列 と自動で切り替わる。**Container Queries** を使って、親要素の幅に反応するようにした。 ```css @container (min-width: 600px) { .year { grid-template-columns: repeat(4, 1fr); } } @container (min-width: 400px) and (max-width: 599px) { .year { grid-template-columns: repeat(3, 1fr); } } ``` どの画面でも横スクロールは発生しない。 ### 日付変更を正確に検知する 0時0分0秒に「今日」が移動する。そのタイミングを逃さないために、次の0時までの残り時間を計算して `setTimeout` をセットしている。 タブがバックグラウンドにあると JavaScript のタイマーは信用できないから、`visibilitychange` で復帰時に再チェックする仕組みも入れた。 ### 色はすべて `oklch()` 従来の `hsl()` は、同じ彩度・明度でも色相によって見た目の明るさが変わる。`oklch()` は知覚的に均一な色空間で、hue を変えるだけで一貫した見た目が保てる。 ```css --_past: oklch(55% 0.15 var(--_hue)); --_today: oklch(65% 0.22 var(--_hue)); ``` 緑でも青でも紫でも、`--calendar-hue` を変えるだけでテーマが変わる。 --- ## アクセシビリティ 派手なアニメーションは人を選ぶ。 - **`prefers-reduced-motion`** ── アニメーションを無効化。今日のセルも静的な強調に切り替わる。 - **`forced-colors`** ── Windows のハイコントラストモードでも、過去・今日・未来が区別できるようにした。 - **`aria-label`** ── スクリーンリーダーには「2025: 364/365 (99.7%)」のように進捗を読み上げる。 見た目だけじゃなく、見えない人にも情報が届くようにした。 --- ## 年末に眺める 今、このカレンダーを見ると、ほとんど塗りつぶされている。残っているのは数日だけ。 来年の1月1日になったら、すべてが空になる。そしてまた少しずつ埋まっていく。 その繰り返し。