<IMG>画像を表示

HTML文書内に画像を埋め込むには、置換要素である<IMG>(Image)を使います。 表示させたい画像のファイルはsrc属性で指定しましょう。

表示できる画像の形式は、GIF、JPEG、PNGの3つの形式が利用できます。

画像の幅と高さについては、実際のサイズに関わらず、ここで指定した幅と高さでブラウザ上に表示されます。 <IMG>のwidth属性(幅)とheight属性(高さ)を使ってそれぞれ指定して下さい。 画像の表示サイズの指定は必須ではありませんが、指定しておくことで、画像以降の内容(テキストなど)を早く表示させることができるので、なるべく指定しておくようにしましょう。

またalt属性には、画像を表示できなかった場合に代わりに表示するテキストを入力します。 内容としては、どういう画像なのか説明するのではなく、その画像が表示されなかった場合に画像の代わりとしての役割を果たすような内容を入力して下さい。 また前後の文章などの関係を考えた上で記入するようにしましょう。

alt属性は省略できませんので、画像自体に意味がない、例えば飾りのような場合には、テキストは入力せず「alt=""」というように空欄で記述して下さい。

使用した時の例

<img src="/image/sample-senyou.jpg" alt="表示例" width="130" height="87">

ブラウザ上の表示例

表示例

書式

  • <img src="画像url" width="" height="高さ" alt="代替テキスト"> ・・・・・・ 画像を表示

※url: 画像ファイルのurl、幅: 画像の幅、高さ: 画像の高さ、代替テキスト: 画像の代わりのテキスト

属性

必須属性
src="url" 表示したい画像ファイルのurlを指定
alt="テキスト" 画像が表示されなかった場合に表示される代替テキスト
任意属性
width="" 画像の幅をピクセル数、または%で指定
height="" 画像の高さをピクセル数、または%で指定
usemap="" クライアントサイド・イメージマップを作成する際に利用
ismap="" サーバーサイド・イメージマップを作成する際に利用
longdesc="" 画像の説明ページのurlを指定
name="" 画像の名前を指定
非推奨属性
align="" 画像の表示位置の指定
  • top・・・・上端揃え
  • middle・・・・中央揃え
  • bottom・・・・下端揃え
  • left・・・・画像を左端に配置し、続くテキストが右に回り込む
  • right・・・画像を右端に配置し、続くテキストが左に回り込む
border="" 画像の枠線をピクセル数で指定
hspace="" 左右の余白をピクセル数で指定
vspace="" 上下の余白をピクセル数で指定

対応ブラウザなどのデータ

形式 <img src=""> 分類 インライン要素
親要素 エンベデッドコンテンツ 子要素 なし
開始タグ 必須 終了タグ なし
属性 controls / dynsrc / loop / start / datafld / datasrc
汎用属性 accesskey / class / contenteditable / dir / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

alt属性について

alt属性はHTML4.01では必ず指定しなければなりません。 ここで注意してもらいたいのは、画像の代わりにalt属性で指定したテキストが表示された時でも、前後の文章の意味が通るようにしておくという点です。

訪問者の中には画像の表示をオフにする人もいますし、テキストしか表示しないブラウザなどもあります。 そういった場合でも、テキストがおかしくならないように注意して下さい。

また説明が長くなる場合は、alt属性ではなくtitle属性を使用するようにしましょう。

HTML5での状況と関連情報

align、border、hspace、vspace属性は、HTML5では廃止。