【イラスト付き】imgタグとは？Webサイトに画像を表示しよう！

ブルーちゃーん

imgタグってどうやって使うんだっけ？

imgタグとは、GIF形式やJPEG形式やPNG形式の画像を表示するためのHTMLで使えるタグだよ

インライン要素のタグで、開始タグが必須で終了タグはいらないという特徴があるよ

Webサイトなどで画像を表示したくなることはよくあるよね

画像を表示するときに使うタグだから、使いこなせるようにマスターしようね

imgタグはこんな風に記述するよ

HTMLの中でこう書くと、ブラウザ上ではこんな風にユーザーに表示されるんだ

HTMLでは＜/○○＞と記述する終了タグが必須なことが多いけど、imgタグは終了タグが不要だから気を付けてね

imgタグはインライン要素だから、divタグやpタグの中に入れて使うことが多いよ

imgタグは様々な属性を設定することで細かく表示を制御することができるんだ

どんな属性があるか紹介していくね

src属性はimgタグで必須な属性だよ

表示したい画像がどこに配置されているかURLを記述するんだ

src属性はこんな風に指定するよ

src属性のURLは絶対パスと相対パスどちらも指定できるから、サイトの構築スタイルに合わせて指定方法を検討してね

imgタグのalt属性は、なにか問題があって画像が表示できないときに画像の代わりに表示させるテキストを設定できるよ

トラブル時でも、何も表示されないより何が表示されるはずだったかわかる方が親切だよね

alt属性はこんな風に設定するんだ

alt属性が設定されているときと設定されていないときの違いがわかったかな？

ユーザーに対して親切なだけじゃなく、SEO対策としても有効なんだよ

imgタグで画像を表示するときは、alt属性も合わせて設定するようにしようね

imgタグではwidth属性とheight属性を設定することで画面上に表示するサイズを指定することができるよ

なにも設定しないままだと、画像の元のサイズのまま表示されるんだ

意図しない大きさだとサイトの表示全体が崩れる可能性が高いから、それぞれ設定しておいたほうが安心だね

width属性とheight属性はこんな風に設定するよ

今や必須となったレスポンシブ対応でも、サイズをしっかり設定しておいた方がきれいに表示を制御できるよね

imgタグではstyle属性で様々な表示方法を指定できるんだよ

わかりやすい例としてborder-radiusuを紹介するね

画像の角が丸まっているのがわかるかな？

こんな風に、style属性で画像がどう表示されるかを指定できるんだよ

最後にimgタグについてまとめておくね

またいつでも聞いてね