画像
画像を表示させる要素には、 img 要素を用います。
<img attributes...>は、srcアトリビュートで指定した画像ファイルをインラインイメージとして表示します。EMPTYタグです。
<img src="images/hana.png" width="200" height="150" alt="花の絵">
img 要素は、画像を表示させるための空要素（エンプティ要素）です。img 要素における各属性の意味は以下の通りです。HTMLにおけるvspace 属性、およびhspace 属性は、いずれもピクセル単位で設定しますが、両者とも非推奨扱いとされております。
| タグ | Attribute | 終了タグ | 説 明 |
|---|---|---|---|
| 画像（イメ−ジ） | |||
| <IMG> Embedded Image |
src= "URL" |
なし | 表示する画像があるURL |
| LOWsrc= "URL" |
SRCで指定した画像より先に表示する。 名前の通り色数の少ない同サイズの画像を指定する（ＮＮ拡張） |
||
| ALIGN= "LEFT" |
 画像を左に表示する、文字の右への回り込み |
||
| ALIGN= "RIGHT" |
画像を右に表示する、文字の左への回り込み |
||
| ALIGN= "TOP" |
↑画像の上部を文字列に合わせる |
||
| ALIGN= "MIDDLE" |
←画像の中央部を文字列に合わせる |
||
| ALIGN= "middle" |
↓画像の下部を文字列に合わせる |
||
| WIDTH=n | イメージの横幅（ピクセル値）横に伸ばした例 |
||
| HEIGHT=n | イメージの縦幅（ピクセル値）縦に伸ばした例 |
||
| BORDER=n | イメージ枠の幅（ピクセル値） |
||
| HSPACE=n | イメージの左右の余白（ピクセル値） | ||
| VSPACE=n | イメージの上下の余白（ピクセル値） | ||
| alt= "text" |
イメージが表示出来ない場合の代替え文字 |
||
| <MAP> client-side image MAP |
ISMAP | 必要 | クリッカブルマップ（ＣＧＩ使用） |
| USEMAP= "#text" |
クリッカブルマップ（ＣＧＩ不要） | ||
| <AREA> client-side image map AREA |
<MAP>内に 配置 |
必要 | マップ内の条件を指定 |
| NAME= "text" |
クリッカブルマップ名 | ||
| SHAPE= "RECT" |
範囲四角形 | ||
| SHAPE= "CIRCLE" |
範囲円 | ||
| SHAPE= "POLYGON" |
範囲多角形 | ||
| HREF= "URL" |
指定範囲に対応するＵＲＬＴＡＲＧＥＴ | ||
| COORDS= "x1,y1,x2,y2" |
座標値 | ||
| NOHREF | 指定外のクリックを無視する | ||
画像の上下左右に余白を設ける設定は、以下の２つの方法があります。
HTMLによる設定（非推奨）
<img src="images/hana.png" width="200" height="150" alt="花の絵" align="right" vspace="10" hspace="10">CSSによる設定 （推奨）
img { margin: 10px }
image要素のalign、border、hspace、vspace属性は、vertical-align （ align="top|middle|bottom" の場合）、 float （ align="left|right" の場合）、 border-width、margin プロパティで代替します。
［ xhtml 1.0 ］
<img align="top" border="0" hspace="5" vspace="10" />
［ xhtml 1.1 ］
<img style="vertical-align: top; border-width: 0; margin: 10px 5px;" /
目的別要素
広告