The Web Design Group

IMGーインライン・画像

構文 <IMG>
属性特定
  • SRC=URI(画像のある場所)
  • ALT=Text(代替テキスト)
  • LONGDESC=URI(長い説明)
  • WIDTH=Length (画像の幅)
  • HEIGHT=Length (画像の高さ)
  • USEMAP=URI(クライアント側イメージ・マップ)
  • ISMAP(サーバー側イメージ・マップ)
  • ALIGN=top|middle|bottom|left|right (画像配置)
  • BORDER=Length(縁に幅)
  • HSPACE=Pixels(水平方向の溝)
  • VSPACE=Pixels(垂直方向の溝)
  • 共通属性
内容
内容となる インライン要素ブロック-レベル要素PREを除く

 IMG要素は インライン画像を特定します。必須である SRC属性は画像の場所を特定します。画像は色々な形式にすることが出来ますが、ブラウザは普通 GIFJPEG画像だけしかサポートしていません。 PNG画像形式のサポートもだんだん増えてきています。

 一般的には必須の ALT属性は、画像の説明ではなく画像の 機能を提供しなければなちません。例えば歓迎ページの会社ロゴの場合 ALT="Welcome to XYZ Corp."のほうが、 ALT="XYZ Corp. Logo"よりも適切です。分かりやすい ALTテクストは、画像を読み込んでいない多くのユーザーにとって文書へのアクセスにとって重要なものです: 画像での代替テキストの使い方に、詳しい説明があります。

 LONGDESC属性は、画像の詳しい説明を記載する所です。この属性は、画像の説明で助けになる様なものを提供するために使わなければなりません。例えば、絵・グラフ・企業ロゴも、盲人やテキスト・ブラウザだけを使っているユーザーにも心の中で想像できる様な説明をしておかなければなりません。

 画像の正確な次元をピクセル単位で指定しておくと、 WIDTHHEIGHT属性は多くの場合大変有効なものです。画像読み込み可能なブラウザで、画像に適したスペースを予約しておき文書を表示し続えるので、読み込みを速くしたページを表示してくれます。

 残念なことに多くのブラウザは画像を読み込まない場合はこの空間を使わないので、画像が小さい乃至は ALTテキストが長い場合 ALTテキストが切れてしまうことが起こります。この様なケースでは ALTテキストやページ上での画像の組み込みが間違いなく重要なものなのだが、 WIDTHHEIGHT属性をやむなく止めてしまいたくなります( WIDTH and HEIGHT属性を設定しないで文書の終のほうに画像をおけば、一般的にはページの表示は分かるほど遅くなりません)。

 WIDTHHEIGHT属性で異なる次元に設定でき、その場合画像を計算して表示しなければなりません。現行の水平及び垂直な空間に相対的なパーセンテージでも設定できます(画像自体のサイズに比例したものではなく、ピクセル単位でのサポートは広くサポートされていません)。ブラウザは、画像計測では不満足なものなので、この様な目的にはできる限り WIDTHHEIGHTを使うことを避けるべきです。

 HTML 4.0では 旧式にされた ALIGN属性は、画像の配置を特定します。値 topmiddlebottomは、周囲の内容からみてそれの左や右に画像を配置します。

 ALIGN=middleは現行の基線に画像の中心をおきます。ページ上で画像を水平方向中心に置くには、或るセンタリング化されたブロック内に画像を置きます、例えば,

<H1 ALIGN=center><IMG SRC="logo.gif" ALT="Welcome to XYZ Company"></H1>

 他の ALIGN属性、 leftright、は画像の移動を特定します:画像が左乃至は右端に置かれその周囲に沿って内容が移動します。画像の下に内容を配置する場合 <BR CLEAR=left|right|all>を場に応じて使います。

 カスケード・スタイル・シート(滝状)vertical-alignfloat特有値(プロパティ)は、画像配置のより柔軟な方法です。

 HTML 4.0では旧式とされている BORDER属性は、画像の境界の幅を特定します。 BORDER=0と設定した場合大抵のブラウザでは、リンクされている画像の回りの境を取り除きますが、ユーザーがこれに上書きすることもできるブラウザもあります。画像が明らかにリンクしているものと分かる場合やリンクを強調しない方法を取る場合にだけに BORDER=0を使うべきです。例えば:

<A HREF="reference/"><IMG SRC="icon/reference.gif" ALT="" WIDTH=90 HEIGHT=90 BORDER=0>Web Authoring Reference</A>

 旧式とされた HSPACEVSPACE属性でそれぞれ、画像を取り囲む水平な溝や垂直な溝を設定します。値はピクセル単位で画像の両側に適用されなければなりません。 スタイル・シートでは、画像周囲の空間の特定に際してより柔軟性を発揮できます。

 USEMAP属性は マップ定義の在る場所を与えるために、クライアント側イメージ・マップと一緒に使われます。この値完全な型の URIー一つのマップ定義で幾つものページに対応出来ますーです。 Netscape Navigatorは、同じファイルにあるマップ定義だけを見つけ、 USEMAP値を事実上 "#map"という断章識別子に限定しています。

 ISMAP属性は、サーバー側イメージ・マップで使われます。 ISMAP属性がリンクされた画像を持ち、ユーザーが画像をクリックし、画像上のクリックされた座標をサーバーに送り、サーバーから場所が送り返されてきます。座標の処理方法はサーバーに依存していますが、 NCSA サーバー法が最も一般的です。

 サーバー側イメージ・マップはクライアント側イメージ・マップよりもよくサポートされていますが、今日では大部分のブラウザは両者をサポートしています。クライアント側イメージ・マップは、普通は好まれます。と言うのは、サーバーに余分な要求をしません(それで、早くなります)し、テキスト専用ブラウザに有効なメニュ−を提供できるからです。両者を一緒にに使うのは賢明なやり方です。クライアント側イメージ・マップをサポートしているブラウザは、この方法を使い、一方旧式のブラウザはサーバー側イメージ・アップを使います。以下の例の様に:

<A HREF="/cgi-bin/imagemap/sitemap.map"><IMG SRC="sitemap.gif" ALT="Site Map" ISMAP USEMAP="#map" WIDTH=100 HEIGHT=100></A>

 mapと呼ばれる MAP要素は、同一文書上に記載されなければなりません。

その他の情報