header・main・footer は見た目ではなく役割を分ける

本文・学習内容

3枚を意味が伝わる因果、既存内容を3領域へ移す実課題コード、3領域の直接確認へ分離。L15のdiv / spanを維持し、L17のnav / section / article / id / #、CSS、ARIAを先取りしない。旧4枚の重複とLesson 2の再説明を除いた。

ソース・課題との接続

lessonKeyから3枚のauthored deck、semantic-header-main、quiz、3件のHTML構造採点まで実経路で接続。raw 3件=parsed 3件、starterは0/3、solutionは3/3。外枠欠落、継承タグ欠落、内容移動、decoy、閉じタグ欠落を拒否し、図解source / public / still / snap / metadataと6状態を整合確認した。

見た目・操作

実レッスン開閉・再表示、全枚ナビ、キーボード、図解6状態、クイズ正誤とreset、320 / 360 / 393px各3枚の開始・終端、印刷3枚、cold fallbackとhydrationを通過。デスクトップとresponsive / print / patternを別担当が原寸確認し、blocker / major / minor 0。

再利用・パターンマスター

既存の共通完成スライドinteractive-figure-compact、editor-focus、quizと共通CodePanel / Quiz renderer、既存semantic-header-mainだけを再利用。3カードを実画面で確認し、fallback、重複分類、新規一品物なし。

型・テスト・回帰

前後レッスンを含む採点、共通SlideStage、図解全状態、全61レッスン、図解TypeScript、整形、差分、実ブラウザ回帰を通過。管理QAのVite依存キャッシュを専用dirへ隔離し、通常開発設定を変えず並行サーバーのReact二重ロードを防いだ。