画像が出ないときに見えるもの
HTML入門 / 全 4 枚
作成品質の確認
全チェックの通過状況
スライド 3 / 3枚、チェック 5 / 5項目が通過
全項目通過・次へ進めます
スライドごと
完成後の5チェック
本文・学習内容
img・指定src・内容が分かるalt・自己紹介見出し直後に限定。相対パス、CSS、width/heightは除外。既存4枚は3枚へ整理する監査済み。
ソース・課題との接続
監査済みJSONの4チェックを実レッスンへ登録。starter不合格、solution満点、余分なimgと禁止終了タグの反例不合格を確認。
見た目・操作
実レッスン開閉・再表示・狭幅・印刷・全枚ナビ・キーボード・クイズ・図解操作・冷起動fallbackを通過。図解操作で発生した内部スクロールをoverflow-clipで修正し、撮影前後の座標検査も追加。
再利用・パターンマスター
登録済みの共通完成スライド3種だけで構成し、各マスターカードを実画面で確認。
型・テスト・回帰
前後境界、全61レッスン採点、パーサーテスト、差分空白検査を通過。
img は src と alt を1行に書く
src に画像の場所、alt に画像の内容を書きます。今回は自己紹介の見出しの直後へプロフィール画像を置きます。
<img src="https://yumesaku.tech/course-assets/profile-sample.svg" alt="山田 太郎のプロフィール写真">
srcどこの画像かalt何が写っているか<img src="https://yumesaku.tech/course-assets/profile-sample.svg" alt="山田 太郎のプロフィール写真">
どこの画像か
何が写っているか
img は文字をはさまない空要素なので、終了タグ </img> は書きません。
1 / 4
← → キーでも送れます