画像の表示

画像は img タグ

画像を出すタグが img です。br と同じで文字をはさまないので、終了タグはありません。どの画像を出すかは src 属性に画像の場所を書いて伝えます。

src には、インターネット上の画像なら https から始まる URL を、同じフォルダにある画像なら images/photo.png のようなファイルの場所を書きます。

alt はもう 1 つの本体

alt は代替テキストといって、画像が読み込めなかったときに代わりに表示される文字です。目が見えない人が使う読み上げソフトも、この alt を読み上げます。つまり alt は、画像を見られない人にとっての画像そのものです。

書くときは「写真」「画像」のような一言ではなく、何が写っているかを短く言葉にします。飾りだけの画像なら alt を空にする書き方もありますが、まずは中身を書く練習をしましょう。

プロフィール画像を置こう

自己紹介の見出しのすぐ下に img を 1 つ置きます。src には用意してある画像の URL を書き、alt には誰の何の画像なのかを書きます。

1. 自己紹介の h2 の下に img を追加する
2. src に https://yumesaku.tech/course-assets/profile-sample.svg を指定する
3. alt に何の画像か分かる言葉を書く