![imgタグとは?Webサイトに画像を表示しよう!のアイキャッチ画像](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/e4a3172b7a754b60bcb0bb5b089801de/Group%20415.png?w=1200&fm=webp)
SEO
更新日: 2024/2/1
imgタグとは?Webサイトに画像を表示しよう!
![character_balloon](/media/character/yellow_normal_left.png)
ブルーちゃーん
どうしたのイエローちゃん?
![character_balloon](/media/character/blue_normal_right.png)
![character_balloon](/media/character/yellow_normal_left.png)
imgタグってどうやって使うんだっけ?
あーimgタグについて知りたいんだねぇ
![character_balloon](/media/character/blue_normal_right.png)
じゃぁ今日はimgタグを詳しく見ていこうね
![character_balloon](/media/character/blue_normal_right.png)
imgタグとは
![imgタグとは?Webサイトに画像を表示しよう!の画像_2枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/45e7b175b3684c21941f0e4ffdd819f4/img.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
imgタグとは、GIF形式やJPEG形式やPNG形式の画像を表示するためのHTMLで使えるタグだよ
![character_balloon](/media/character/blue_normal_left.png)
インライン要素のタグで、開始タグが必須で終了タグはいらないという特徴があるよ
![character_balloon](/media/character/blue_normal_left.png)
Webサイトなどで画像を表示したくなることはよくあるよね
![character_balloon](/media/character/blue_normal_left.png)
画像を表示するときに使うタグだから、使いこなせるようにマスターしようね
imgタグはどうやって使うの?
![imgタグとは?Webサイトに画像を表示しよう!の画像_4枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/193e7e39bb834b159f1b50d0395e3e1c/img2.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
imgタグはこんな風に記述するよ
![character_balloon](/media/character/blue_normal_left.png)
HTMLの中でこう書くと、ブラウザ上ではこんな風にユーザーに表示されるんだ
![character_balloon](/media/character/blue_normal_left.png)
HTMLでは</○○>と記述する終了タグが必須なことが多いけど、imgタグは終了タグが不要だから気を付けてね
![character_balloon](/media/character/blue_normal_left.png)
imgタグはインライン要素だから、divタグやpタグの中に入れて使うことが多いよ
imgタグにはどんな属性があるの?
![character_balloon](/media/character/blue_normal_left.png)
imgタグは様々な属性を設定することで細かく表示を制御することができるんだ
![character_balloon](/media/character/blue_normal_left.png)
どんな属性があるか紹介していくね
imgタグの属性1.src属性
![imgタグとは?Webサイトに画像を表示しよう!の画像_8枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/5f0bce6807be489889445c5d2f5e489c/img3.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
src属性はimgタグで必須な属性だよ
![character_balloon](/media/character/blue_normal_left.png)
表示したい画像がどこに配置されているかURLを記述するんだ
![character_balloon](/media/character/blue_normal_left.png)
src属性はこんな風に指定するよ
![character_balloon](/media/character/blue_normal_left.png)
src属性のURLは絶対パスと相対パスどちらも指定できるから、サイトの構築スタイルに合わせて指定方法を検討してね
imgタグの属性2.alt属性
![imgタグとは?Webサイトに画像を表示しよう!の画像_10枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/4cda89bd86354b2493760695b98cf56e/img4.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
imgタグのalt属性は、なにか問題があって画像が表示できないときに画像の代わりに表示させるテキストを設定できるよ
![character_balloon](/media/character/blue_normal_left.png)
トラブル時でも、何も表示されないより何が表示されるはずだったかわかる方が親切だよね
![character_balloon](/media/character/blue_normal_left.png)
alt属性はこんな風に設定するんだ
![character_balloon](/media/character/blue_normal_left.png)
alt属性が設定されているときと設定されていないときの違いがわかったかな?
![character_balloon](/media/character/blue_normal_left.png)
ユーザーに対して親切なだけじゃなく、SEO対策としても有効なんだよ
![character_balloon](/media/character/blue_normal_left.png)
imgタグで画像を表示するときは、alt属性も合わせて設定するようにしようね
imgタグの属性3.width属性とheight属性
![imgタグとは?Webサイトに画像を表示しよう!の画像_12枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/0d307d6af5004c65aa32f652f09dc61d/img5.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
imgタグではwidth属性とheight属性を設定することで画面上に表示するサイズを指定することができるよ
![character_balloon](/media/character/blue_normal_left.png)
なにも設定しないままだと、画像の元のサイズのまま表示されるんだ
![character_balloon](/media/character/blue_normal_left.png)
意図しない大きさだとサイトの表示全体が崩れる可能性が高いから、それぞれ設定しておいたほうが安心だね
![character_balloon](/media/character/blue_normal_left.png)
width属性とheight属性はこんな風に設定するよ
![character_balloon](/media/character/blue_normal_left.png)
今や必須となったレスポンシブ対応でも、サイズをしっかり設定しておいた方がきれいに表示を制御できるよね
imgタグの属性4.style属性
![imgタグとは?Webサイトに画像を表示しよう!の画像_14枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/82455539fc6f4ac583f3d51c6ffd0f7d/img6.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
imgタグではstyle属性で様々な表示方法を指定できるんだよ
![character_balloon](/media/character/blue_normal_left.png)
わかりやすい例としてborder-radiusuを紹介するね
![character_balloon](/media/character/blue_normal_left.png)
画像の角が丸まっているのがわかるかな?
![character_balloon](/media/character/blue_normal_left.png)
こんな風に、style属性で画像がどう表示されるかを指定できるんだよ
![character_balloon](/media/character/blue_normal_left.png)
最後にimgタグについてまとめておくね
まとめ
◆imgタグとはWebサイト上で画像を表示させるためのタグ
◆src属性で画像のURLを指定する
◆alt属性で画像を説明するテキストを設定できる
◆画像をどのように表示するか設定するための属性も存在する
imgタグを使いこなせる気がしてきたよー
![character_balloon](/media/character/yellow_normal_right.png)
ブルーちゃんありがとう!
![character_balloon](/media/character/yellow_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
またいつでも聞いてね
![character_balloon](/media/character/blue_writer.png)
ブルー
SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。