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

HTML入門 / 全 4 枚

作成品質の確認

全チェックの通過状況

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

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

スライドごと

1枚目を確認単枚Playwright、図解19/19、source/public/still/snap/metadata整合、独立原寸レビューを通過。実controlで見た目・読み上げ・検索エンジンとmain解除の6状態を巡回し、eye状態のdivはmuted、読み上げ・検索状態のmain欠落だけerrorになること、fallbackからruntimeへの差替え、印刷静止画、ナビ非交差を確認。P0・P1・P2なし。通過

2枚目を確認単枚Playwright 1/1と独立原寸レビューを通過。実課題のheader・main・footerを6行の等価コードで示し、3注釈、コード全文、先生note、2/3 chrome、下部ナビの可読性と非交差を確認。contentContract・sourceWiring・visualInteraction・reuseLibrary・slide-scoped regressionの5/5ゲートPASS、P0・P1・P2なし。通過

3枚目を確認単枚Playwright 1/1と実デッキのナビ・クイズ状態テスト1/1、独立原寸レビューを通過。未回答、誤答、正答、別枚往復後のresetを確認し、正答index 0、誤答index 1、解説全文、亀・兎、3択、3/3 chrome、下部ナビの意味・可読性・非交差を確認。5/5ゲートPASS、P0・P1・P2なし。通過

完成後の5チェック

本文・学習内容

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二重ロードを防いだ。

通過

実レッスンで確認全スライドを一覧確認パターンマスターを確認

中身を消さず、3つの外箱へ移す

既存の中身を削らず3領域へ移し、旧「リンク」の h2 だけ外します。

<header><h1>山田太郎</h1><p>Web エンジニアを目指しています</p></header>

<header>名前と肩書き

<main>自己紹介・趣味・経歴

<footer>著作権とリンク

</footer>

<header><h1>山田太郎</h1><p>Web エンジニアを目指しています</p></header>

名前と肩書き

自己紹介・趣味・経歴

著作権とリンク

</footer>

body 直下は header → main → footer。自己紹介の div / span は中身ごと残します。

2 / 4

← → キーでも送れます

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