SEO
更新日: 2024/2/1
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タグを使いこなせる気がしてきたよー
ブルーちゃんありがとう!
またいつでも聞いてね
ブルー
SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。
最新の記事一覧
ゲシュタルトとは?心理学の歴史や基本法則について徹底解説!
SEO
マーケティングファネルとは?4つの段階についてわかりやすく解説!
SEO
サジェスト対策はどうやる?詳しい方法やサジェストの仕組みも解説
SEO
SEOとキーワード数の関係は?目安の数やキーワードの適切な入れ方も
SEO
SEO対策を外注するメリット・デメリットは?良い業者の選び方も解説
SEO
関連キーワードとは?SEO初心者でもわかる基礎知識と活用法!
SEO
Looker Studioとは?機能や使い方をわかりやすく解説!
SEO
MEOとSEOの違いとは?どちらに注力するべきかの判断基準も解説
SEO
KPIとは?ビジネス成功のための指標と活用法を徹底解説!
SEO
定量と定性の違いとは?データ分析での効果的な使い方を解説!
SEO
校了とは?校正との違いや注意点をわかりやすく解説!
SEO
コンテンツとは?意味や具体例について初心者でもわかりやすく解説!
SEO
Googleトレンドとは?できることや使い方について詳しく解説!
SEO
コンテンツSEOとは?メリット・やり方などわかりやすく解説!
SEO
SSL化でSEO強化!Google推奨の理由と導入方法を解説!
SEO
サポートページとは?特徴と構成要素、未来展望を徹底解説!
SEO
キャッシュバスターってどんなツール?おすすめプラグインも紹介!
SEO
リダイレクトループとは?原因、特定、解決方法をそれぞれ徹底解説!
SEO
ハブページとは?3つの目的と効果的な作成・運用のコツを徹底解説!
SEO
最新の記事一覧
ゲシュタルトとは?心理学の歴史や基本法則について徹底解説!
SEO
マーケティングファネルとは?4つの段階についてわかりやすく解説!
SEO
サジェスト対策はどうやる?詳しい方法やサジェストの仕組みも解説
SEO
SEOとキーワード数の関係は?目安の数やキーワードの適切な入れ方も
SEO
SEO対策を外注するメリット・デメリットは?良い業者の選び方も解説
SEO
関連キーワードとは?SEO初心者でもわかる基礎知識と活用法!
SEO
Looker Studioとは?機能や使い方をわかりやすく解説!
SEO
MEOとSEOの違いとは?どちらに注力するべきかの判断基準も解説
SEO
KPIとは?ビジネス成功のための指標と活用法を徹底解説!
SEO
定量と定性の違いとは?データ分析での効果的な使い方を解説!
SEO
校了とは?校正との違いや注意点をわかりやすく解説!
SEO
コンテンツとは?意味や具体例について初心者でもわかりやすく解説!
SEO
Googleトレンドとは?できることや使い方について詳しく解説!
SEO
コンテンツSEOとは?メリット・やり方などわかりやすく解説!
SEO
SSL化でSEO強化!Google推奨の理由と導入方法を解説!
SEO
サポートページとは?特徴と構成要素、未来展望を徹底解説!
SEO
キャッシュバスターってどんなツール?おすすめプラグインも紹介!
SEO
リダイレクトループとは?原因、特定、解決方法をそれぞれ徹底解説!
SEO
ハブページとは?3つの目的と効果的な作成・運用のコツを徹底解説!
SEO