【HTML】画像を表示させるには

こんにちは。駆け出しプログラマーの松下です！

ここでは、imgタグについて紹介します。

HTMLを学び始めたばかりという方の参考になれば幸いです！

imgタグとは

imgタグはブラウザに画像を表示させるときに使います。

<img src=”URL”>のURL部分に、画像がある場所（相対パスまたは絶対パス）を指定することでその画像が表示されます。

指定できる画像形式は、GIF・JPEG・PNGなどです。

終了タグ（</〇〇>）は不要です。

imgタグの書き方

大きさを指定する

画像の大きさを指定するときは、imgタグに「width」と「height」という属性を加えることで、それぞれ幅、高さを指定することができます。

<img src="ねこ.jpg" width="150" height="250">
 庭先にいました

画像の下に文字を配置する

imgタグはインライン要素となるため、続けて文字を書くと上記のように横並びに表示されます。

画像の下に文字を表示するには、<p>でブロック要素とするか改行タグ<br>で改行を入れる必要があります。

title属性

title属性は、画像に対して補足説明をつけたいときなどに使われます。

指定した値は、カーソルを画像の上に重ねると吹出しで表示されます。

<img src="ねこ.jpg" width="150" height="250" title="よく来る野良猫くん">
<p>　庭先にいました</p>

alt属性

alt属性は、画像ファイルのコンテンツを説明するために使用されるものです。

何か不具合があってブラウザに画像が表示されなかったときに、画像の代わりに表示されるテキストを設定します。

音声ブラウザの場合、画像のalt属性のテキストが読み上げられます。

<img src="ねこ.jpg" width="150" height="250" alt="こちらを見てる黒白の猫">
<p>　庭先にいました</p>

このように、表示されなかった画像の代わりに、alt属性で設定されていたテキストが表示されます。

装飾目的など意味を持たない画像の場合は「alt=””」のように空の記述するのが好ましいです。