見出しは大きさではなく階層
HTML入門 / 全 5 枚
作成品質の確認
全チェックの通過状況
スライド 4 / 4枚、チェック 5 / 5項目が通過
全項目通過・次へ進めます
スライドごと
完成後の5チェック
本文・学習内容
本文・要件・正解コード・前後レッスンを監査。h1を増やさず、自己紹介・趣味・経歴を同じ深さのh2として置く契約に固定。
ソース・課題との接続
実デッキ4枚を配線。教材JSONを実レッスン採点へ優先適用し、textsチェックでh2の個数・順序・内容、count maxでh1の上限を確認。
見た目・操作
全4枚を個別・全体で操作し、原寸画像と印刷を目視。狭画面、quiz、キーボード、hydration、runtime error、stage overflowなし。切替アニメ中の欠けた撮影を検知し、完了待ちをQAへ追加して証拠を再取得。
再利用・パターンマスター
既存4パターンを再利用し、各カードを目視。フォールバックなし。本文内heading-outlineはデッキへ重複再掲していない。
型・テスト・回帰
前後レッスンと全教材を回帰確認。全体typecheckには既存のroute生成・shared-ui・HtmlLessonView CodingLessonPageProps等の基準エラーがあるが、今回追加したchecks/html-track-contractsには該当エラーなし。
見出しを拾うと構造が見える
見出しの階層は、ブラウザや検索エンジンがページの構造を理解する手がかりになります。
見出しから見たページの構造
| 段 | 文字 | 何のまとまりか |
|---|---|---|
| h1 | 山田 太郎 | ページ全体 |
| h2 | 自己紹介 | ページの中の1章 |
| h2 | 趣味 | ページの中の1章 |
| h2 | 経歴 | ページの中の1章 |
囲った h1 がページ全体、その下の h2 が同じ深さの3つの章です。
これは見出しから構造を確認する表です。画面に目次が自動で表示されるという意味ではありません。
2 / 5
← → キーでも送れます