HTML と CSS の役割分担
HTML入門 / 全 4 枚
作成品質の確認
全チェックの通過状況
スライド 3 / 3枚、チェック 5 / 5項目が通過
全項目通過・次へ進めます
スライドごと
完成後の5チェック
本文・学習内容
本文、制作物、模範解答、全2チェック、前後境界を監査。本文外のトラブルシュート1枚を除外し、比較・構文・確認の3枚へ確定。
ソース・課題との接続
css-style-on-off、注釈付きCodePanel focus、quizの全描画経路とQA記録表示を確認。starterは未達、模範解答は2/2。
見た目・操作
Playwright全7件を4件・3件に分割して合格。通常、小型画面、印刷、送り、キーボード、図解操作、クイズ、Hydrationを確認し全3枚を目視。
再利用・パターンマスター
既存3パターンを再利用。短い注釈付きコード用にEditorPanelのfocus表示を追加し、パターンカードと本番スライドが同じCodePanelを消費。
型・テスト・回帰
61レッスン共通検証、実レッスン採点、一覧、モーダル、印刷、パターンを再確認。Playwrightのサーバー自己管理とエディタ全選択を安定化。
HTML入門 - HTML と CSS の役割分担
CSS を外すと中身は減らない
CSS を外して、同じ中身の並び方と大きさがどう変わるか見比べてください。
- CSS を外しても中身は1つも減らない。縦に積まれるだけ
- HTML が何が書いてあるかを決め、CSS がどう見えるかを決める
- 文章を変えずに色や大きさだけ直したいときは、CSS の側だけ書き替えれば済む
1 / 4
← → キーでも送れます