div と span は囲む相手が違う

本文・学習内容

3枚を並び方の因果、実課題コード、使い分け確認へ分離。自己紹介のimg + pをdiv、名前だけをspanで囲む到達目標と一致し、CSS display、幅・余白、後続のsemanticタグを先取りしない。既存4枚の重複とCSS先取りを除いた。

ソース・課題との接続

lessonKeyから3枚のauthored deck、div-span-flow、クイズ描画、3件のHTML構造採点まで実経路で接続。raw 3件=parsed 3件、starterは不合格、solutionは3/3合格し、decoy、閉じタグ欠落、対象違い、順序違いの反例も拒否した。図解のsource / public / still / snap / metadata parityも確認した。

見た目・操作

実レッスン開閉・再表示、全枚ナビ、キーボード、図解全状態、クイズ正誤、320 / 360 / 393px、印刷、compact fallbackを通過。デスクトップ、狭幅、印刷、パターンを別担当が原寸確認し、P0 / P1 / P2なし。狭幅の内部スクロール終端と操作領域も機械確認した。

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

既存の共通完成スライド3種、CodePanel、クイズ描画、div-span-flowだけを再利用。各マスターカードを実画面で確認し、fallback表示、孤立部品、重複分類、新規一品物はない。compact密度はopt-inで、既存editor-focusの既定表示を変えない。

型・テスト・回帰

前後レッスンを含む採点、共通CodePanelと本文・ナビ非交差契約、図解全状態、全61レッスン、対象TypeScript、整形、差分、実ブラウザ回帰を通過。QAは図解生成と直列化し、クリーンな管理サーバーで全11件を一括取得した。