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のサーバー自己管理とエディタ全選択を安定化。

通過

CSS の決まりを3つに分ける

今回書くCSSでは、h1で相手を選び、colorで変えるものを示し、最後に青の値を書きます。

h1 {
h1どの要素に当てるか
color: #0071e3;
color色を変える
#0071e3青を表す値
}

このかたまりを <style> と </style> で囲み、前回のh1の下へ足します。HTMLの文章そのものは変えません。

2 / 4

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