見た目ではなく役割で選ぶ
HTML入門 / 全 4 枚
作成品質の確認
全チェックの通過状況
スライド 3 / 3枚、チェック 5 / 5項目が通過
全項目通過・次へ進めます
スライドごと
完成後の5チェック
本文・学習内容
本文・正解・前後境界を監査。strongは重要性、emは語調の強調へ固定し、b/iを意味なしとする誤記を修正。
ソース・課題との接続
監査済みJSONを実レッスン採点へ優先適用。textsでstrong/emの個数・順序・単語内容、insideで両方のp内配置を確認。
見た目・操作
各3枚と全体を操作し原寸目視。図解4切替、quiz、キーボード、狭画面、印刷、冷起動fallback、hydration/runtime/overflowなし。
再利用・パターンマスター
既存の触れる図解・先生解説コード・腕試しの3パターンを再利用し、パターンマスターで確認。
型・テスト・回帰
本文・図解・採点・スライド・印刷・共通パターンを回帰確認。画面外の遅延図解もQAが対象へ移動して待つよう共通修正。
HTML入門 - 見た目ではなく役割で選ぶ
文全体ではなく単語を包む
自己紹介の段落の中で、重要性を伝える HTML は strong、語調を強調する CSS は em で包みます。
採点では HTML と CSS の単語だけが、それぞれ段落内の strong と em に入っているかを確認します。
強調したい語の直前に開始タグ、直後に終了タグを置きます。段落の p はそのまま残します。
<p>
2026 年から <strong>HTML</strong> と
<em>CSS</em> を学びはじめました。
</p>2 / 4
← → キーでも送れます