WEB用語(N)
<img> - イメージ
トップ > HTMLリファレンス > <img>概要
説明
img は IMaGe(画像)の略です。src 属性で指定した画像ファイルを表示します。画像ファイルは、一般的には GIF形式(*.gif)や JPEG形式(.jpg)のものを使用します。最近は PNG形式(*.png)も用いられるようです。
画像を表示できないブラウザや、文字は音声に変換して読めても画像を見ることのできない人のために、<img> タグには alt 属性を極力指定するようにしましょう。(HTML4.01 では、alt 属性が必須と定義されています。)
必須属性ではありませんが、height と width 属性も極力指定するようにしましょう。これらを指定しないと、ブラウザがページを表示する際に、画像を読み込む度に画面のレイアウトが変更されてしまい、ページ表示の体感速度が遅くなってしまいます。
属性
【重要属性】
【固有属性】
【クリッカブルマップ関連属性】
【動画関連属性】
【データバインド関連属性】
【一般属性】
属性 | 意味 |
---|---|
src=url | H2-H4s/e2/N2/i1。表示する画像ファイルを指定します。これは必須属性です。 |
alt=alt | H2-H4s/e2/N2/i1。画像の代わりに表示される文字列を指定します。画像を表示できない(表示しない)ブラウザを考慮し、HTML4.01 では必須の属性として定義されています。 |
height=n | H3-H4s/e2/N2/i1。画像の高さをピクセルまたはパーセンテージで指定します。 |
width=n | H3-H4s/e2/N2/i1。画像の横幅をピクセルまたはパーセンテージで指定します。 |
【固有属性】
属性 | 意味 |
---|---|
align=align | H2-H4t/e2/N2/i1。表示位置を指定します。align="right" や align="left" を使用するとテキストが画像の周りを回りこんで表示されます。回り込みを解除するには <br clear=all> を用います。 |
border=n | H3-H4t/e2/N2/i1。画像の周りの枠線をピクセルで指定します。画像を <a href="...">〜</a>で囲むと自動的に枠線が表示されますが、border=0 とすればこれを消すことができます。 |
hspace=n | H3-H4t/e2/N2/i1。画像の周りの横方向の余白をピクセル単位で指定します。 |
longdesc=url | H4s。このフレームに対する説明が title 属性で示せないくらい長文の場合に、その説明ページの URL を指定します。 |
lowsrc=url | e4/N2。画像が表示されるまでのいらいらを解消するために、転送中は lowsrc で指定した荒い(サイズの小さい)画像を表示し、転送がすべて完了した時点で src で指定した通常の画像を表示するようにします。 |
suppress=suppress | N4。suppress は抑圧という意味です。省略時の値は false ですが、true を指定すると、画像のダウンロード中に、代替えアイコンの代わりにツールチップが表示されるようになります。 |
vspace=n | H3-H4t/e2/N2/i1。画像の周りの縦方向の余白をピクセル単位で指定します。 |
【クリッカブルマップ関連属性】
属性 | 意味 |
---|---|
ismap | H2-H4s/e2/N2。サーバーサイドクリッカブルマップを実現する際に用います。 |
usemap=usemap | H3-H4s/e2/N2。クライアントサイドクリッカブルマップを実現するために用います。<map>を参照してください。 |
【動画関連属性】
属性 | 意味 |
---|---|
controls | e2〜e3。動画の下部に再生制御用のコントロールを表示します。IE4.0 では廃止されました。 |
dynsrc=url | e2。動画ファイル(*.avi)を指定します。<embed> や <object> タグもありますので、現在ではあまり利用されていません。 |
loop=n | e2。再生回数を指定します。loop=infinite を指定すると無限に繰り返します。 |
start=start | e2。fileopen を指定するとページを表示するとすぐに再生が始まります。mouseover を指定するとマウスが動画の上にきた時点で再生が始まります。 |
【データバインド関連属性】
属性 | 意味 |
---|---|
datafld=datafld | e4。データバインド機能を用いる際の、データソースの列名を指定します。 |
datasrc=datasrc | e4。データバインド機能を用いる際の、データソースの ID を指定します。 |
【一般属性】
属性 | 意味 |
---|---|
class=class | H4s/e4/N4。クラスを指定します。 |
dir=dir | H4s/e5/N6。文字の表示方向を指定します。 |
id=id | H4s/e3/N4。IDを指定します。 |
lang=lang | H4s/e4/N6。言語を指定します。 |
language=language | e4。スクリプト言語を指定します。 |
name=name | H4s/e4/N3。名前を指定します。 |
style=style | H4s/e3/N4。スタイルシートを指定します。 |
title=title | H4s/e4/N6。タイトルを指定します。 |
使用例
HTMLソース |
---|
<img src="image/xxx.gif" alt="イラスト2" width=100 height=100> |
ブラウザ表示例 |
---|
画像をリンクボタンにする
画像をクリックするとジャンプするようにするには次のようにします。border=0 を指定しないと画像の周りに枠線が表示されてしまいます。また、<img>タグの前後にスペースや改行やあると、画像の前後に小さな下線が表示されてしまうことがあります。
<a href="xxx.htm"><img src="image/xxx.gif" height=10 width=10 border=0 alt="XXX"></a>