imgタグとは?|HTML文書で画像を表示させよう

imgタグとは?|HTML文書で画像を表示させよう
博士
リンゴくんが書く記事にはよく画像が使われておるの。
リンゴ
はい!
画像があった方が記事の内容も伝えやすくなるので、けっこう頻繁に使ってます。
博士
それはいいことじゃ。
画像は記事を読み進めやすくするからの。
それでは、HTMLで画像を表示するためのタグも分かるかの?
リンゴ
確か、<img>タグですよね。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<img>タグとは

 

<img>

対応ブラウザ Internet Explorer / Firefox / Google Chrome / Safari / Opera
分類 フロー・コンテンツ / フレージング・コンテンツ / エンベディッド・コンテンツ / インタラクティブ・コンテンツ(usemap属性がある場合) / パルパブル・コンテンツ
利用場所 エンベディッド・コンテンツが期待される場所
内容


 
 
<img>タグは、文書に画像を埋め込みたいときに使用するタグです。
必須属性のsrc属性で、画像のファイル名(URL)を指定します。

一般的なブラウザでは、GIF、JPEG、PNG形式のファイルが使われますが、HTML5ではSVGやPDF、アニメPNGやアニメGIFなどのファイルもsrc属性の値として指定できます。
 
 

alt属性

alt属性には、画像が表す内容をテキストで指定します。
このテキストは、何らかの理由で画像が表示されなかった場合に、画像の代わりに表示されるものです。
そのため、あえて画像表示をオフにしているユーザーや、そもそも画像を見ることのできない検索ロボット(クローラー)であっても、画像と同じ意味が伝わるテキストを指定する必要があります。
 
 

博士
HTML5ではalt属性は必須ではないが、アクセシビリティを高めるためにも指定しておこう。
 
 

使用例

 
 

表示例

美味しそうですね。

複数のリンゴがボウルに積まれています

 
 

スポンサーリンク

width属性 / height属性

画像のサイズを指定する場合は、<img>タグにwidth属性(幅)とheight属性(高さ)を追加します。
どちらもピクセル単位で0以上の数値を指定しましょう。
 
 

使用例

 
 

表示例

美味しそうですね。

複数のリンゴがボウルに積まれています

 
 
博士
画像のサイズを指定しておくと、画像の読み込みを待たずに文書全体が表示されるようになるため、ページの表示速度が高まるんじゃ。
リンゴ
そうなんですね!
 
 

usemap属性

usemap属性は、イメージマップを利用する際に指定します。
イメージマップは<map>タグで作成しますが、map要素のname属性の値と、img要素のusemap属性の値を同じにすることで、画像とイメージマップを関連付けます。
 
 

スポンサーリンク

まとめ

<img>タグは、文書に画像を埋め込みたいときに使用します。
src属性で画像のファイル名(URL)を指定し、alt属性には画像が表す内容をテキストで指定します。
 
 

博士
alt属性の指定は、面倒くさがらずしっかりやっておこう。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








imgタグとは?|HTML文書で画像を表示させよう