
SEO
更新日: 2024/11/22
【イラスト付き】imgタグとは?Webサイトに画像を表示しよう!

ブルーちゃーん
どうしたのイエローちゃん?


imgタグってどうやって使うんだっけ?
あーimgタグについて知りたいんだねぇ

じゃぁ今日はimgタグを詳しく見ていこうね

imgタグとは


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

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

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

画像を表示するときに使うタグだから、使いこなせるようにマスターしようね
imgタグはどうやって使うの?


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

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

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

imgタグはインライン要素だから、divタグやpタグの中に入れて使うことが多いよ
imgタグにはどんな属性があるの?

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

どんな属性があるか紹介していくね
imgタグの属性1.src属性


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

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

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

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


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

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

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

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

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

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


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

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

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

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

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


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

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

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

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

最後にimgタグについてまとめておくね
まとめ
◆imgタグとはWebサイト上で画像を表示させるためのタグ
◆src属性で画像のURLを指定する
◆alt属性で画像を説明するテキストを設定できる
◆画像をどのように表示するか設定するための属性も存在する
imgタグを使いこなせる気がしてきたよー

ブルーちゃんありがとう!


またいつでも聞いてね
最新の記事一覧
aタグとは?Webページを繋ぐ架け橋の使い方を徹底解説!
SEO
ページがフリーズする原因と対策とは?ブラウザ環境を快適にしよう!
SEO
要約とは?正しい意味や文章を要約する手順・コツを紹介
SEO
文章の書き方やコツを徹底解説!簡潔で分かりやすい文章とは?
SEO
検索エンジンのランキングは?世界と国内のシェア率を比較
SEO
CVRの平均はどのくらい?低くなる原因や改善方法を解説
SEO
SEOの効果が出るまでの期間を知ろう!早く効果を出すコツも紹介
SEO
Webマーケターとは?仕事内容や種類、必要なスキルを徹底解剖!
SEO
メタタグとは?SEO効果や種類をわかりやすく解説!
SEO
セマンティック検索とは何か?概要と活用事例を解説!
SEO
サイトマップ作成ツールのおすすめは?作る際の手順も紹介!
SEO
サイトリニューアルはSEOに影響する?注意点も詳しく解説!
SEO
Webビーコンとは?仕組みや用途の例について詳しく解説
SEO
カニバリゼーションとは?仕組みや避けるための対策を解説
SEO
トラフィックとは?マーケティングにおける意味や増やし方を解説
SEO
SEOと文字数の関係は?上位表示のためのポイントも紹介
SEO
ECサイトのSEO対策をしよう!売上アップに効果的な方法を紹介
SEO
SEOの歴史を知ろう!SEOの誕生から変化まで詳しく解説
SEO
リッチカードとは?重要性や設定方法を分かりやすく解説
SEO
ユーザーリテンションとは?気になる測定方法と重要性を徹底解説!
SEO


最新の記事一覧
aタグとは?Webページを繋ぐ架け橋の使い方を徹底解説!
SEO
ページがフリーズする原因と対策とは?ブラウザ環境を快適にしよう!
SEO
要約とは?正しい意味や文章を要約する手順・コツを紹介
SEO
文章の書き方やコツを徹底解説!簡潔で分かりやすい文章とは?
SEO
検索エンジンのランキングは?世界と国内のシェア率を比較
SEO
CVRの平均はどのくらい?低くなる原因や改善方法を解説
SEO
SEOの効果が出るまでの期間を知ろう!早く効果を出すコツも紹介
SEO
Webマーケターとは?仕事内容や種類、必要なスキルを徹底解剖!
SEO
メタタグとは?SEO効果や種類をわかりやすく解説!
SEO
セマンティック検索とは何か?概要と活用事例を解説!
SEO
サイトマップ作成ツールのおすすめは?作る際の手順も紹介!
SEO
サイトリニューアルはSEOに影響する?注意点も詳しく解説!
SEO
Webビーコンとは?仕組みや用途の例について詳しく解説
SEO
カニバリゼーションとは?仕組みや避けるための対策を解説
SEO
トラフィックとは?マーケティングにおける意味や増やし方を解説
SEO
SEOと文字数の関係は?上位表示のためのポイントも紹介
SEO
ECサイトのSEO対策をしよう!売上アップに効果的な方法を紹介
SEO
SEOの歴史を知ろう!SEOの誕生から変化まで詳しく解説
SEO
リッチカードとは?重要性や設定方法を分かりやすく解説
SEO
ユーザーリテンションとは?気になる測定方法と重要性を徹底解説!
SEO