動画像(ﾌﾗｯｼｭ) WWWで扱うﾏﾙﾁﾒﾃﾞｨｱ目次 ｸﾘｯｶﾌﾞﾙﾏｯﾌﾟ

イメージ <img>

インラインイメージ

インラインイメージというのはHTMLページへ直接張り込む画像のことで、より効果的なページ作成が可能となります。インラインイメージを張り込む場合、<img>タグを用い、これはワンサイドタグで終了タグを持ちません。<img>タグにはsrc、alt、align属性があり、画像ファイルの指定やテキストとの位置関係を指定します。また、HTML3.0からは、より多くの属性が付加されました。インラインイメージとして扱える画像の種類とブラウザ(閲覧ソフト)の関係は以下のとおりです。

各ブラウザがインラインイメージをサポートするフォーマット一覧
画像の種類MOS 2.7NS 1.1-NS 2.0+MSIE 2.0-MSIE 3.0+
GIF87○○○○○
GIF89a(透明)○○○○○
GIF89a(インターレース)○○○○○
GIF89a(アニメーション)××○×○
JPEG○○○○○
プログレッシブJPEG△(効果なし)×○×○
PNG○××××
MOS：モザイク　　NS：ネットスケープ　　MSIE：インターネット･エクスプローラ


src属性は張り込みたい画像名のパス指定をします。たとえば、image.gifというファイルを張り込む場合、画像ファイルがページと同じディレクトリにあれば、 

	
	
	<img src="image.gif">
となり、１つ上のディレクトリにあれば、 
	
	
	<img src="../image.gif">
と指定します。これは絶対パス、相対パスのどちらでも指定でき、次のように記述すると、 
	
	
	<img src="../photos/traci_s.jpg">
こう表示されます。


外部メディアの取り扱い

HTMLで外部メディアを指定するには、ハイパーリンクで用いた<a>タグのhref属性を使います。href属性に外部メディア･ファイルのパス名を指定するだけです。 
	
	
	<a href="外部メディア･ファイルのパス名">ポインタ</a>
この方法は大きな画像を外部プログラムで表示させたい、つまり読者へもっと正確な画像が見られる選択を与えたい時などにも有効です。たとえば、以下のようにHTMLを記述すれば、先ほどの画像はポインタとして機能し、読者がそこをクリックすることで、より大きな画像を見られます。 
	
	
	<a href="../photos/traci_l.jpg"><img src="../photos/traci_s.jpg"></a>
ここをクリックすれば、大きな画像へジャンプします(別の窓を開いてそこに大きな画像を表示する方法は、openメソッドをご参照ください)。

イメージとテキスト

<img>タグにはテキストとイメージの整列関係を制御するalign属性があり、HTML2.0からは以下のように指定できます。

align=top： 画像上部へテキストを合わせる。
align=middle： 画像中央部へテキストを合わせる。
align=bottom： 画像下部へテキストを合わせる。

align=top、align=middle、align=bottomの順に指定した例をあげてみましょう。

アイコンアイコンアイコン

HTML2.0ではテキスト部が折り返されてもテキストの回り込みはされませんが、HTML3.0以降は可能になりました。

指定した画像がない場合の処理

多くのブラウザでは、指定した画像が存在しなかったり表示できなかった場合、代わりの画像(多くはアイコン)を表示します。この機能は、わざわざ画像を作成しなくてもテストができるため、たいへん便利です。代わりの画像を見たい時は、ご覧になっているブラウザで｢x｣という存在しないファイル名を指定すればいいのです。 
	
	
	これは<img src="x" align=middle>存在しない画像の代わりに表示されています。
これは存在しない画像の代わりに表示されています。

画像とハイパーリンク

<img>タグをハイパーリンクのポインタとして使う例は、これまでもいくつかご紹介しました。それらの画像のどこかをクリックすればリンク先の文書へ移動できるわけですが、ポインタとなった画像の周りには枠が現われ、ネットスケープやインターネット･エクスプローラの場合、<img>でborder=0の指定をすると枠は表示されません。 
	
	
	<center><a href="../index.html"><img src="../images/redchile.gif">ホームページへ</a></center>
このように指定すると、


ホームページへ

テキストのみのブラウザに対する処理

画像表示をサポートせずテキストのみを表示するLynxのようなブラウザだと、画像はロードされないのでページに何があるのかわからない恐れがあります。それを避けるため、<img>タグのalt属性を使い、テキストのみのブラウザへ画像の名称や説明を表示させることも可能です。

Lynxの場合、alt属性がなければ<img>タグを使った画像部は[IMAGE]と表示され、alt属性を使うと[IMAGE]ではなくaltで指定されたテキストが表示されます。 

	
	
	<img src="../images/bear.gif" alt="[A Teddy Bear]">
このように指定すると、イメージを表示できるブラウザでは、

[A Teddy Bear]

そして、画像表示がサポートされていないブラウザでは以下のとおりです。

Lynxブラウザ画面

ただ、イメージを表示できないブラウザは現在ほとんど使われておりません。その結果、Alternetive(二者択一)を略したalt属性も用途が本来とは違ってきました。ネットスケープやインターネット･エクスプローラの場合、画像より早くaltで指定されたテキストが表示されるので、読者へ内容を知らせるいわば予告編として利用できます。また、ロードし終えた画像にマウスを当てた時、テキストは説明文としてポップアップ表示が可能であり、今後ロードの時間はどんどん短縮され、予告編の必要性がなくなればなくなるほど、ポップアップ表示の説明文に用途は絞られてゆくでしょう。

ネットスケープによる拡張

ネットスケープの<img>タグは以下のように多くの拡張が行われています。

画像の位置

align属性によって画像を張り付ける指定位置が前より多くなりました。

HTMLテキストと画像の開始位置
top 画像の頂点
texttop テキストのみ
middle 画像の中央
absmiddle 画像全体でテキストを高さとした中央
baseline 画像のベースライン
bottom 画像の下部
absbottom 画像全体でテキストを高さとした下部

画像の開始位置は左下を起点とします。 
	
	
	<h4>Middle of Text and Line aligned: (middle, top, texttop)</h4>
	
	<img src="../images/4x100.gif" align=middle><tt>align=top</tt>
	<img src="../images/3lines.gif" align=top><tt>align=texttop</tt>
	<img src="../images/3lines.gif" align=texttop><tt>Text...</tt>
	
	<H4>Top of Text and Line aligned: (top, absmiddle, middle)</h4>
	
	<img src="../images/4x100.gif" align=top><tt>align=absmiddle</tt>
	<img src="../images/3lines.gif" align=absmiddle><tt>align=middle</tt>
	<img src="../images/3lines.gif" align=middle><tt>Text...</tt>
	
	<h4>Top of Text and Line aligned: (top, baseline, absbottom)</h4>
	
	<img src="../images/4x100.gif" align=top><tt>align=baseline(bottom)</tt>
	<img src="../images/3lines.gif" align=baseline><tt>align=absbottom</tt>
	<img src="../images/3lines.gif" align=absbottom><tt>Text...</tt>

Middle of Text and Line aligned: (middle, top, texttop)

align=top align=texttop Text...

Top of Text and Line aligned: (top, absmiddle, middle)

align=absmiddle align=middle Text...

Top of Text and Line aligned: (top, baseline, absbottom)

align=baseline(bottom) align=absbottom Text...

横方向の位置 

	
	
	<img src="../images/3lines.gif" align=left hspace=10>
	テキストと画像が１行づつ階段状に降りていきます。
	<img src="../images/3lines.gif" align=left hspace=10>
	画像と画像の間には10ピクセル分の隙間が設定してあります。
	<img src="../images/3lines.gif" align=left hspace=10>
	テキストと画像が１行づつ階段状に降りていきます。
	<img src="../images/3lines.gif" align=left hspace=10>
	画像と画像の間には10ピクセル分の隙間が設定してあります。
	<img src="../images/3lines.gif" align=left hspace=10>
	<br clear=all>
テキストと画像が１行づつ階段状に降りていきます。 画像と画像の間には10ピクセル分の隙間が設定してあります。 テキストと画像が１行づつ階段状に降りていきます。 画像と画像の間には10ピクセル分の隙間が設定してあります。

画像を両側へ置き中央にテキストという整形は、 

	
	
	<img src="../images/3lines.gif" align=left>
	<img src="../images/3lines.gif" align=right>
	<br>
	<h3 align=center>中央にあるテキスト</h3>
	<br clear=all>

中央にあるテキスト


縦方向の位置 

	
	
	ベース･テキスト<img src="../images/3lines.gif" align=bottom>
	<img src="../images/3lines.gif" align=middle>
	<img src="../images/3lines.gif" align=texttop>
	<img src="../images/3lines.gif" align=absmiddle>
	<img src="../images/3lines.gif" align=bottom><p>
ベース･テキスト

イメージのサイズ指定

<omg width=value height=value>

テキストの回り込みを行う際、書類の表示を高速化するため画像のサイズを指定します。サイズを指定することで、画像の表示を待たずレイアウトがわかります。

インラインイメージのサイズ指定

テキストの回り込みを行います。テキストの回り込みを行います。テキストの回り込みを行います。テキストの回り込みを行います。テキストの回り込みを行います。テキストの回り込みを行います。



また、画像の実寸が指定したサイズと異なる場合、ネットスケープなどでは指定したほうのサイズに画像が変形されます。 

	
	
	<img src="../images/redchile.gif">Original Size<br>
	<img src="../images/redchile.gif" width=150 height=50>150x50<br>
	<img src="../images/redchile.gif" width=100 height=50>100x50<br>
	<img src="../images/redchile.gif" width=50 height=50>50x50
インラインイメージのサイズ変更

Original Size
150x50
100x50
50x50

画像の枠幅

<img border=value>

画像の枠幅を指定します。 

	
	
	<img src="../wallpapr.gif" border=0><tt>border=0</tt><p>
	<ing src="../wallpapr.gif" border=5><tt>border=5</tt><p>
	<img src="../wallpapr.gif" border=10><tt>border=10</tt><p>
インラインイメージの境界線

border=0

border=5

border=10

ハイパーリンクすると次のとおりです。border=0にすればハイパーリンクであることがわからず、これはクリッカブルマップを使う時、マップ全体へハイパーリンクの証を表示させたくない場合などに利用します。

インラインイメージの境界線(ハイパーリンク時)

border=0

border=5

border=10

テキストの回り込み

<img vspace=value hspace=value>

とくにalign属性がleftかrightの場合は、画像の空いている部分へ文書などを埋め込んでいく効果(テキストの回り込み機能またはフローティング･イメージ効果)が得られます。その際、フローティング･イメージの上下左右のスペース(ピクセル値)を指定することも可能です。次のように指定すると、画像の左右横方向へ、それぞれ50ピクセル分のスペースを空けられます。 

	
	
	<img src="../images/4x100.gif" hspace=50 align=left>
	これは回り込みテストです。これは回り込みテストです。これは回り込みテストです。
	これは回り込みテストです。これは回り込みテストです。これは回り込みテストです。
	<ul>
	<li>これは回り込みテストです。
	<li>これは回り込みテストです。
	</ul>
テキストの回り込みとインラインイメージの関係

これは回り込みテストです。これは回り込みテストです。これは回り込みテストです。これは回り込みテストです。これは回り込みテストです。これは回り込みテストです。



イメージの二重読込

<img src="URL" lowsrc="URL">

ネットスケープなどでは二重に画像を読み込ませることができます。この機能は、最初に読み込んだ画像を新しく読み込んだ画像で上書きするものです。あらかじめ解像度の低い画像を読み込ませ、続いて解像度の高い画像をゆっくりと送ることで、読者へ早く画像のイメージを理解させられます。imgタグにおいてlowsrc属性で低解像度の画像を指定し、その後src属性で指定した高解像度の画像を読み込みます。この機能をサポートしていないブラウザでは、低解像度の画像が無視され、最初からsrc属性で指定した画像のみを読み込みます。

しかし、この機能は必ずしも解像度の低いものから高いものの順に読み込ませる必要がなく、alt属性同様、実際は当初の意向と違った方法で用いられることが多いようです。たとえば、白黒→カラーと異なる２つのインターレースGIFを使うと面白い効果を得られます。また、まったく違うイメージを読み込ませて、画像へ変化を持たせることも可能です。

<img src="高解像度の画像" lowsrc="低解像度の画像">
<img src="カラー画像" lowsrc="白黒画像"> 

	
	
	<img src="../photos/beach_c.jpg" lowsrc="../photos/beach_m.jpg">

これだと少しわかりにくいので、もう１パターン二重読込の実例を作成してみました。次のボタンをクリックして下さい。

二重読込の実例


Copyright (C) 1996-2003 by Yasukazu Yokoi. All Rights Reserved.