文字化けは読む規則のずれ
HTML入門 / 全 5 枚
作成品質の確認
全チェックの通過状況
スライド 4 / 4枚、チェック 5 / 5項目が通過
全項目通過・次へ進めます
スライドごと
完成後の5チェック
本文・学習内容
本文・課題・正解・前後境界を監査。charset偏重を除き、lang・charset・titleを同格に再構成。
ソース・課題との接続
本文の正規figureへ統一。教材JSONと実レッスンDBの3チェックが一致し、starter不合格・solution全合格を確認。
見た目・操作
全4枚を操作・目視し、狭画面、印刷、hydration、runtime errorなしを確認。cold-load静止画のナビ重なりを修正し専用QAも通過。
再利用・パターンマスター
既存4パターンを再利用し、各カードに実装プレビューがありフォールバック表示がないことを目視確認。
型・テスト・回帰
前後レッスンと全教材を回帰確認。リポジトリ全体typecheckには既存のroute生成・shared-ui等の多数の基準エラーがあるが、今回の変更ファイルには該当エラーなし。
HTML入門 - 文字化けは読む規則のずれ
3つの役割と置き場所
同じ設定の仲間でも、langだけはhtmlの開始タグに書きます。metaとtitleはhead、画面に見せるh1はbodyです。
採点では、lang、文字コードの指定、タブに出るページ名の3点を確認します。
| 書く場所 | 効く先 |
|---|---|
| <html lang="ja"> | ページ全体の言語。読み上げと翻訳が使う |
| <meta charset="UTF-8"> | headの中。ブラウザが文字を読む規則になる |
| <title>...</title> | headの中。タブと検索結果へページ名を渡す |
| <h1>山田 太郎</h1> | bodyの中。読む人が画面で見る見出しになる |
4 / 5
← → キーでも送れます