HTML5タグ虎の巻

imgタグ

imgは、画像を表示するタグです。

解説

imgタグに指定する画像にはJPEG、PNG、GIF、BMPなど一般的な形式の画像は指定できます。

コンテンツ・モデル

カテゴリー
(自カテゴリ)
フロー・コンテンツ
フレージング・コンテンツ
エンベッディッド・コンテンツ
インタラクティブ・コンテンツ
コンテキスト
(親カテゴリ)
エンベッディッド・コンテンツを許可する場所
コンテンツ・モデル
(子カテゴリ)
なし

属性

imgタグには以下の属性が指定できます。

【属性】
属性説明
src画像のパス(必須)
(例)src="img/sample.jpg"
alt画像が読み込めない時に表示される代替テキスト
(例)alt="いぬの画像"
width画像の幅を指定
(例)width="100"
height画像の高さを指定
(例)height="100"
usemap使用するイメージマップの名前を指定する
(例)usemap="#mymap"
【主要グローバル属性】
属性説明
classクラスを指定する
(例)class="hoge"
idIDを指定する
(例)id="foo"
styleスタイルを指定する
(例)style="color:red;"
titleツールチップを指定する
(例)title="補足情報です"
tabindexTabキーによる移動の順番を指定する
 正数:指定した数値の順にフォーカス移動される
 負数:フォーカスは可能だが、タブ移動時はフォーカス対象とならない
(例)tabindex="10"

その他のグローバル属性値については、グローバル属性をご覧ください。

サンプル

画像(cat.png)をそのままのサイズで表示する

<img src="image/cat.png" alt="ねこ">
ねこ

画像(cat.png)を横幅80px、縦幅80pxで表示する

<img src="image/cat.png" alt="ねこ" width="80" height="80">
ねこ

画像(cat.png)を50%のサイズで表示する

<img src="image/cat.png" alt="ねこ" width="50%">
ねこ

画像を表示するエリアに対する割合になります。
この例の場合は、黄色いエリアの幅に対して50%のサイズとなります。

備考

  • imgは「image」(画像)の略です。
  • alt属性は必須ではないですが検索エンジンにどういった内容の画像であるかを伝えたり、画像が読み込めなかった場合に閲覧者に何の画像か伝えるためなど指定しておくことをお勧めします。

関連項目

  • img:画像を表示する
  • map:クリッカブルマップを設定する
  • area:クリッカブルマップのリンクエリアを設定する