【 imgタグ 】で画像を出力する方法について解説します~HTML入門~

< 所要時間 > 10分程度

このような方にオススメの記事

  • imgタグで画像の出力をしたい方
  • imgタグのalt属性の指定方法について知りたい方
  • HTML初学者の方

この記事は、HTMLのタグについて、『なんとなくで使えている』方へにむけた一度タグの意味と種類を確認してみよう的な感じの記事です。

感覚的にどういうタグかわかっていればコードは書けるけど、ある程度かけるようになったからこそ、一歩先の『正しい使い方』や『もっといい使い方』等理解を深めて行けたらなあと思っています。

なお、本記事の内容はHTMLクイックリファレンスを参考文献として、より具体的に実際のコードを見ながら解説していきます。

contents

imgタグの基本的な使い方

imgタグは、ブラウザ上に画像を表示したい際に使用します。

基本的な使い方としては、imgタグのsrc属性に画像URLを記述することで、画像が表示されます。

それでは、画像URLはどのように記述したらいいのか、加えて最低限覚えておく必要があるalt属性について解説したいと思います。

See the Pen by Shuhei Nishida (@shu0814) on CodePen.

画像URLの指定方法

画像URLは、【記述している文書から見てどの位置にある画像なのか】を記述します。

下記の例では、『test-code』というファイル内に記述している文書『index.html』と、表示させたい画像が入っている『img』ファイルがある場合の、記述方法となります。

この例での、画像URLは

<img src=”../img/img.jpg” >

となります。

ここでの『.』(ドット)は、『一つ上の階層』を意味します。

また、『/』(スラッシュ)は『一つ下の階層』を意味します。

つまり、『 ../』は “../”(一つ上の階層のファイル『test-code』)の中にあるという意味になります。

このように、画像URLは記述している文書から見て、どの階層にある画像なのか(パス)を記述します。

※ファイルの位置関係

※記述するコード

alt属性

alt属性は、その画像の代替えテキストを記述します。

例えば、リンゴの画像を表示する際には

alt=”リンゴ”等のように指定してあげます。なぜこのように、わざわざ画像の代替えテキストを記述する必要があるのでしょうか?

Google『検索エンジンスターターガイド』では、alt属性を指定するメリットとして下記の三点が挙げられています。

①alt属性は何らかの理由によって画像が表示されないときに、代わりのテキストを示してくれる

②画像からリンクを張る場合に、画像のaltテキストがリンクに対するアンカーテキストのように扱われる

③画像のファイル名とalt属性をわかりやすく付けると、Google画像検索のような画像に特化した検索エンジンに、サイトの画像について伝えることができ

①は、例えばユーザーが画像を表示しないウェブブラウザ を利用していたり、もしくはスクリーンリーダー のような別の手段でサイトを閲覧していたりする場合、ブラウザ上では画像が表示されません。その代わりに、alt属性で指定したテキストが表示されます。上記のような環境でも、どのような画像が配置されているのかという情報を伝えるためにもalt属性を指定することは重要です。

②③は、SEO対策として有効とされています。画像をリンクとして利用する際は、alt属性を指定することで、リンク先のページ内容が理解されやすくなったり、そもそも検索エンジンは『表示されている画像が何の画像なのか識別することができない』ため、検索エンジンに『それが何の画像なのか』をわかりやすく伝えることができるようになります。

alt属性の適切な記述

alt属性の役割を理解したところで、適切な記述方法を見ていきます。

下記のような、画像の場合どのように指定するのが適切なのか考えてみてください。

×:<img src=”../img/bara” alt=””> 

何も指定しないのはもちろん×です。

○:<img src=”../img/bara” alt=”バラ”>

これは、きちんと画像がバラであるということを記述しているので適切な例です。

◎:<img src=”../img/bara” alt=”水滴のついた青いバラ”>

ここではバラという情報だけでなく、青いバラであるということ、水滴がついているという状態を簡潔に記述しているので、単にバラというテキストよりも良い記述例であるといえます。

SEO対策としての、alt属性については是非調べてみてください。

part6まとめ

今回は、imgタグの使い方について簡単に解説しました。私自身もそうでしたが、最近までalt属性って別に記述しなくても画像が表示されてれば問題ないやって思ってましたが、案外重要な役割を持ってたりします。

こういうちょっとしたことも意識して行けたらいいですね(自戒)。

次回は、HTMLタグ『画像・動画・埋め込み』の、他のタグについて解説したいと思います。

お疲れさまでした~。

ABOUT AUTHOR

portfolio-image

シュウヘイ

フリーランスのマークアップエンジニアとしてweb制作を中心に活動
HTML,CSS,Wordpress,javascript,その他独学方法やWeb制作フリーランスの経験談について情報を発信しています。

お問い合わせはこちらから
関連記事
html

【 リンク 】を埋め込むHTMLタグについて解説します~HTML入門~

html

【 imgタグ 】で画像を出力する方法について解説します~HTML入門~

html

【 HTMLタグ 】の種類と分類について解説します~HTML基礎~

html

【 テキストの表現 】するHTMLタグについて解説します~HTML入門~