見た目ではなく役割で選ぶ

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

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