§10-04Layout

Timeline / gantt view

タスクの期間を横棒で並べて日程を示す。

タスクの開始と終了を横棒で並べ、重なりや前後関係を見渡せる。期間が複数週にまたがる計画で、遅れがどこに波及するか確認したいときに使う。

実装のポイント

タスクは開始日と期間で持ち、grid-template-columns の列位置に変換して配置する。依存関係の線と今日の位置を重ね、列幅が狭いときは横スクロールにする。