第1部 HTML — Day 5 / 30

画像

<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 の Class Notebook に提出してください。

学籍番号氏名（フルネーム）

Q. img タグで、画像が表示できないときに使われる代替テキストを指定する属性はどれでしょうか?

src alt width

Completed

提出時間はサーバー時刻に基づきます。

この画面のスクリーンショットを撮り、Teams の Class Notebook に提出してください。