ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > HTML/CSS > 【HTML】画像を表示させるimgタグの使い方について解説

【HTML】画像を表示させるimgタグの使い方について解説

HTML/CSS

2022/08/23

2023/06/02

画像を表示するタグ

HTMLには画像を表示するimgタグがあります。imgタグにはいっしょに記述するとよい、いくつかの属性があります。imgタグは属性を設定することにより、画像の情報をクローラーに理解させたり、レイアウトシフトを防ぐことができます。

この記事では、「画像を表示させるimgタグの使い方」について解説していきます。

この記事のゴールは「画像のimgタグについて役割と使い方を理解すること」です。

いっしょに学習していきましょう。

この記事で身につく内容
  • HTMLの画像を表示するimgタグの使い方と基礎知識
ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

 

HTMLのimgタグとは:画像を表示する

imgタグは文書内に画像を表示するタグです。imgはimageの略称で、インライン要素となります。imgタグで表示できる画像の形式は「.gif(GIF形式)」、「.jpg(JPEG形式)」、「.png(PNG形式)」などがあります。

 

基本書式

<img src=”画像ファイルのパス/ ファイル名.(png, jpg, gif など拡張子)  ” alt=”代替テキスト” title=”ツールチップで補足情報を記載” width=”画像の横幅” hight=”画像の高さ”>

基本書式にコードを当てはめると次のようになります。

<img src="dummy.png" alt="ダミーの画像です" width="300" height="200" title="補足情報">

出力結果img-src

検証画面で確認すると、src属性、alt属性、width属性、height属性、title属性が設定されているのが確認できます。title属性は画像をマウスでホバーするとツールチップとして情報が出力されます。

 

ここからはそれぞれの属性について解説していきます。

imgタグのsrc属性:画像の読み込み元を指定する属性

src属性は画像の読み込み元を指定する属性です。

src属性には絶対パスと相対パスの2つの方法でファイルの読み込み元を指定することができます。

絶対パスとは、URLで画像のファイルを記述する方法です。次の画像のようなイメージで、src属性を指定します。

絶対パス

相対パスとは、画像を読み込ませたいファイルを起点として画像ファイルまでの場所を記述する方法です。

相対パス

src属性はimgタグだけではなく、スクリプトファイルを読み込むためにも使用されます。

下記はスクリプトファイルを読み込む記述例になります。

<body>

<script src="main.js"></script>
</body>

imgタグのalt属性:画像の代替となるテキスト情報

alt(オルト)属性は、画像の代替となるテキスト情報を設定する属性です。

ブラウザで画像が表示されないときに画像の代わりに表示されるテキストとなります。alt属性を記述するメリットは、検索エンジンのクローラーに画像の情報を伝えることです。

 

クローラーとは、検索エンジンがWebサイト上の情報(テキストや画像など)を巡回して解析・データベース化(インデックス)するためのプログラムのことです。

クローラーを巡回させることで、検索エンジンは「Webサイトの検索順位を決めるための要素を情報収集」しています。

alt属性が直接SEOに影響を与えるわけではありません。クローラーはテキストの内容しか理解できませんが、alt属性を設定すればクローラーが画像の内容を理解できるようになります。

 

その他alt属性を設定するメリット視覚障害を持っている方や高齢者の方は、Webサイトのコンテンツ内容を理解するために音声読み上げ機能を利用します。alt属性を設定していると、画像の情報をテキストで音声が読み上げてくれます。

 

imgタグのwidth属性とheight属性:画像の横幅と縦幅のサイズを指定

imgタグにwidth属性とheight属性を指定することができます。

imgタグにその2つの属性を記述する効果は、Webサイトのページがロードされる際に画像分のスペースを確保し、レイアウトシフトを防ぐことにあります。

レイアウトシフトとは、Webページがロードされる際に画像分のスペースがないことによって、コンテンツのずれが発生することです。

width属性・height属性を設定していない場合は、次のようなイメージになります。

レイアウトシフト

width属性・height属性を設定している場合は次のようなイメージです。

レイアウトシフトなし

width属性とheight属性を設定すると、画像分の領域が確保された状態になるため、画像以外のコンテンツのずれが発生しなくなります。

 

imgタグのtitle属性:補足情報をツールチップとして表示

title属性は画像の補足情報や説明文をツールチップとして表示することができます。ツールチップとは、マウスオーバーした際に表示される補足情報のことです。

実はtitle属性は、aタグやdivタグに対しても適用されます。

<div class="" title="空の要素です"></div>
div {
  width: 200px;
  height: 200px;
  background: orange;

}

出力結果

 

要素をホバーするとツールチップが表示されます。

なお、2022年現在ではtitle属性はほとんど使われなくなっています。SEO的な効果もないので、無理に使う必要はありません。予備知識として覚えておきましょう。

 

まとめ

画像を表示するタグと、いくつかの属性について解説しました。alit属性やwidth属性、height属性については必須設定としてコーディングしましょう。

HTMLには様々なタグや属性の種類があり、タグ一つでも覚えることがたくさんあります。少しずつ学習を進めていきましょう。

Web制作は、その他にも学ぶべき知識が数多くあります。

Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください!

 

画像を表示するタグまとめ

  • imgタグは画像を表示するタグ
  • src属性でファイルの読み込み元を指定できる
  • alt属性は画像の内容をテキスト情報として伝えることができる
  • title属性は補足情報として設定できる
  • width属性とheight属性指定はレイアウトシフトを防ぐことができる
ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから