プログラミング入門30日 の Day 5
🎯 今日のゴール img タグで画像を表示し、alt 属性の役割を説明できる。
<img src="cat.jpg" alt="ひなたぼっこする猫" width="300">src は画像ファイルの場所、alt は画像が表示できないときや読み上げソフトが使う代替テキスト、width は表示幅(ピクセル)です。画像ファイルはHTMLファイルと同じフォルダに置くと src="cat.jpg" のように書けます。
💡 alt は省略せずに必ず書きましょう。目の不自由な人への配慮(アクセシビリティ)としても、画像が読み込めなかったときの保険としても重要です。
自分で用意した画像(またはフリー素材)をページに表示し、width の値を変えて大きさの変化を確認しましょう。
<img src="photo.jpg" alt="旅行で撮った海の写真" width="300">
<img src="photo.jpg" alt="旅行で撮った海の写真" width="150">同じ画像でも width の値で表示サイズが変わります。画像ファイルはHTMLファイルと同じフォルダに置きましょう。
学籍番号と氏名を入力してクイズに正解すると、確認コード付きの提出用画面が表示されます。スクリーンショットを撮って Teams の提出欄にアップロードしてください。
Q. img タグで、画像が表示できないときに使われる代替テキストを指定する属性はどれでしょうか?
| 問題番号 | プログラミング入門30日 Day 5 |
|---|---|
| 学籍番号 | |
| 氏名 | |
| 提出時間 | |
| 確認コード |
提出時間はサーバー時刻に基づきます。
この画面のスクリーンショットを撮り、Teams の提出欄にアップロードしてください。