navで移動先を結び、sectionとarticleで中身を分ける

HTML入門 / 全 4

作成品質の確認

全チェックの通過状況

スライド 3 / 3枚、チェック 5 / 5項目が通過

全項目通過・次へ進めます

完成後の5チェック

本文・学習内容

3枚を実課題全体の構造、hrefとidの一致を操作する因果、到達条件の直接確認へ分離。L16のsemantic構造を前提にnav・section・article・id・ページ内リンクを扱い、L18のtable、CSS、ARIAを先取りしない。最終コピーと前後境界を44/44および設定済み125/125で再監査した。

通過

ソース・課題との接続

lessonKeyからstatic → figure → quizのauthored deck、anchor-jump-id、4件の厳密なHTML構造採点まで実経路で接続。raw=parsed、starter不合格、solution全合格、live override、反例拒否、図解source / public / still / snap / metadataと9状態を確認した。

通過

見た目・操作

実レッスン開閉・再表示、全枚ナビ、キーボード、図解9状態、クイズ正誤とreset、320 / 360 / 393px各3枚の開始・終端、印刷3枚、cold fallbackからhydrationを含む13/13を通過。5教材の長文回答後quiz回帰もheaderと下部navigationの両方から実寸検査した。独立原寸レビューでP0・P1・P2なし。

通過

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

既存のeditor-focus、interactive-figure-compact、quiz、共通CodePanel / Quiz rendererとanchor-jump-idだけを再利用。3つのpattern cardを実画面で確認し、fallback、孤立部品、重複分類、新規一品物なし。

通過

型・テスト・回帰

L17 focused 44/44、設定済み125/125、図解19/19、SlideStage 6/6、全61レッスン、Prettier、git diff --check、実ブラウザ13/13を通過。共通quiz変更について5教材の回答前後10枚でheader侵入とnavigation衝突がないことを確認した。

通過

HTML入門 - navで移動先を結び、sectionとarticleで中身を分ける

href の # のあとと id が同じ場所へ飛ぶ

メニューと id の書き方を切り替え、完全一致・1文字違い・重複で飛び先がどう変わるか比べます。

  • href="#hobby" は id="hobby" と完全一致した section を探す
  • 綴り違いでは一致先がなく、同じ id が複数なら最初の要素が選ばれて後の要素を直接指せない
# で同じページへ飛ぶ

2 / 4

このスライドが付いているレッスンを開く