画像の属性
CoddyのHTMLジャーニー「Fundamentals」セクションの一部 — レッスン 24/60。
画像を改善するための追加の属性をいくつか見ていきましょう:
alt: 画像が読み込まれなかった場合に代替テキストを提供します。widthとheight: ピクセル単位で画像のサイズを制御します。
例を次に示します:
<img src="img.jpg" alt="A scenic view of mountains" width="600" height="400" />これにより、画像のソースを設定し、説明を提供し、サイズを600x400ピクセルに設定します。アクセシビリティのために常にaltを含め、デザインの一貫性を維持するために寸法を使用してください。
チャレンジ
簡単画像に次の属性を追加してください:
alt: "A beautiful bird"width: "400"height: "250"
チートシート
追加の属性を使用して画像を改善します:
alt: 画像が読み込まれない場合に代替テキストを提供しますwidthおよびheight: ピクセル単位で画像のサイズを制御します
<img src="img.jpg" alt="A scenic view of mountains" width="600" height="400" />アクセシビリティのために常に alt を含め、デザインの一貫性を維持するために寸法を使用してください。
自分で試してみよう
<!DOCTYPE html>
<html>
<body>
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg">
</body>
</html>このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。