画像をならべよう

01 / 05

画像は img タグで置く

ページに絵や写真を置くタグは <img>。image（画像）の img だよ。

置きたい画像の場所を src 属性に書く。source（もとの場所）の src だね。

<img src="/samples/neko.svg">

02 / 05

<img> には終了タグがない。画像は「はさむ文章」を持たないからだよ。

こういうタグを空要素と呼ぶ。</img> は書かないので気をつけて。

<p>これは段落</p><img src="/samples/hana.svg">

03 / 05

alt 属性には、その画像が何の絵なのかを短い言葉で書く。

画像が読みこめなかったときに代わりに出るし、読み上げソフトを使う人にはこの文が読まれる。画像を置いたら alt も書く、とセットで覚えよう。

<img src="/samples/neko.svg" alt="ねこのイラスト">

04 / 05

この教材では次の5枚を使えるよ。名前をそのまま src に書いてね。

<img src="/samples/onigiri.svg" alt="おにぎりのイラスト">

05 / 05

見出し・段落・リンク・画像。ここまでで4種類のタグがそろった。

組み合わせれば、もう見て楽しいページが作れるよ。