HOME > HTMLリファレンス [ABC順 / 目的別] > <IMG>
<IMG>
画像を表示する
ショートカット
形式 ・ 説明
タグの形式
- 開始タグ : 必須 / 終了タグ : なし
画像に関する重要な属性
src="画像ファイルのURL"
- 表示させる画像ファイルのURLを指定。絶対必要。
- GIF形式(*.gif)、JPEG形式(.jpg)、 PNG形式(*.png)を一般的に Web で使用する。
BMP形式(*.bmp)などは重いのでHPに載せる時は、画像を圧縮してからにしよう。
alt="代替テキスト"
width="数字" height="数字"
- 画像の幅と高さを ピクセル か % で指定。拡大・縮小自由。
- 指定したほうが体感的に速く表示。
画像が表示されなかったときでもレイアウトが崩れない。
拡大・縮小も可。
(縮小しても軽くなるわけではないのでその場合は小さい画像をつくるほうがいい)
usemap="マップの名前"
- クライアントサイドイメージマップ機能を設定する。 → <AREA>参照
longdesc="URL"
- 画像の長文説明へのリンクを指定。
一般属性
非推奨属性
- border="数字" ・・・ 枠線の太さをピクセルで指定。
- スタイルシートを使えば色も線も好きなようにできるのでスタイルシートがオススメ。
- リンク画像の枠線を消したい場合は、 border="0"とするか(非推奨属性)、
スタイルシートで border:none; (NN4の場合はさらに color:背景色; も)と指定する。
- align=" 〜 " ・・・ 画像にテキストを回り込ませる。
- left (画像を左におく) / right (画像を右におく)
- 回り込みを解除するのには<BR>の clear属性を使う。
- スタイルシートでも同じように指定できる。(float: 〜 ;)
- align=" 〜 " ・・・ ひとつの行の中に配置される画像と他のテキストとの並び方を指定する。
- bottom (文字が画像の横の下に並べられる。デフォルト。)
top (文字が画像の横の上に並べられる。)
middle (文字が画像の真横に並べられる。) のいずれかを指定できる。
- bottom (文字が画像の横の下に並べられる。デフォルト。)
- vspace="数字" ・・・ 縦方向の空き(上下の余白)をピクセルで指定。
hspace="数字" ・・・ 横方向の空き(左右の余白)をピクセルで指定。 - lowsrc="軽い画像のURL" ・・・ 画像読み込み中のときに表示する画像の URL を指定する。
- 読み込み完了したとき、src=" 〜 "で指定した画像に表示が変わる。
- サイズの大きな画像が表示されるまでに時間がとてもかかるので、
閲覧者のストレス軽減のため、サイズの小さな軽い荒い画像を表示するなどに使われた。
(そのかわりその分ファイルが重くなるので軽い画像をできるだけ軽くする)
使用例
HTMLソース
<IMG src="banner.gif" width="200" height="40" alt="バナー">