属性のきほん
HTML入門 / 全 4 枚
作成品質の確認
全チェックの通過状況
スライド 3 / 3枚、チェック 5 / 5項目が通過
全項目通過・次へ進めます
スライドごと
完成後の5チェック
本文・学習内容
属性名と値、開始タグ内の追記位置、単位なしの width="160" / height="160"、既存targetの確認に限定。本文・課題・3チェックと一致し、後続のdiv / spanを先取りしない。
ソース・課題との接続
lessonKeyから3枚のauthored deck、attr-name-value図解、クイズ描画、3件のHTML構造採点まで実経路で接続。raw 3件=parsed 3件、starterは幅と高さで不合格、solutionは3/3合格し、誤値・空値・decoy・配置移動の反例も拒否した。
見た目・操作
実レッスン開閉・再表示、320 / 360 / 393px、印刷、全枚ナビ、キーボード、図解全状態、クイズ正誤、compact fallbackを通過。独立目視で欠け・衝突・伸長・横切れがなく、狭幅の内容末尾まで到達できることを確認した。
再利用・パターンマスター
既存の共通完成スライド3種、CodePanel、クイズ描画、attr-name-value図解だけを再利用。各マスターカードを実画面で確認し、重複分類・fallback表示・孤立部品・新規一品物はない。
型・テスト・回帰
Lesson 14の構造・値チェック、共通CodePanelの狭幅契約、全61レッスン、対象TypeScript、整形、差分、実ブラウザ回帰を通過。QA中の図解生成を直列化し、クリーンな新規サーバーで11/11を一括取得した。
今回確認する3つの属性
画像には width と height を追加し、外部リンクは target が残っているか確認します。
<img src="https://yumesaku.tech/course-assets/profile-sample.svg"
alt="山田 太郎のプロフィール写真"
width="160" height="160">
width="160"今回追加:幅height="160"今回追加:高さ<a href="https://yumesaku.tech"
target="_blank">ゆめさくコード</a>
target="_blank"前回から確認<img src="https://yumesaku.tech/course-assets/profile-sample.svg"
alt="山田 太郎のプロフィール写真"
width="160" height="160">
今回追加:幅
今回追加:高さ
<a href="https://yumesaku.tech"
target="_blank">ゆめさくコード</a>
前回から確認
2 / 4
← → キーでも送れます