●キーコンセプト：画像処理A to Z
◆HR……horizontal rule（水平の罫線）
【解説】画面を横に走る水平線を描くタグ。アトリビュートの指定によって、ヘアラインの太さや幅、それに配置などを指定することもできる。
【書式】<HR SIZE="n" WIDTH="nn" ALIGN="left/right/center"> <HR NOSHADE> 【機能】画面を横に区切るヘアライン（水平線）の表示。
それぞれのアトリビュートの意味などは、次のようになる。
・SIZE
ヘアラインの太さを、ピクセル単位で指定する。このアトリビュートを省略したときは、SIZE=2が指定されたものとみなされる。上限は100。次に例を示しておくので、それぞれの指定でどのような違いがあるか確認してみるといいだろう。
【ソース例】
<BR> <HR NOSHADE> <HR> <P> <HR SIZE=5> <P> <HR SIZE=30>
・WIDTH
ヘアラインの幅を、ピクセル単位またはパーセンテージ（％）で指定する。無指定の場合は、100％が指定されたものとみなされる。
パーセンテージ指定の場合、ユーザーが開いているブラウザのウィンドウの横幅に対しての割合となり、また表示はウィンドウ中央になる。ピクセル単位での指定の場合も、開いているウィンドウより小さな値を指定していた場合は、ウィンドウの中央に配置される。 SIZEアトリビュートを併記することもできる。
【ソース例】
<P> <HR WIDTH=300> <P> <HR WIDTH="50%"> <P> <HR SIZE=10 WIDTH="40%">
・ALIGN
ヘアラインの配置位置を設定するアトリビュート。WIDTHでウィンドウより小さい割合や値を指定した場合、ヘアラインはウィンドウの中央に配置される。これをALIGNの指定で左寄せ、または右寄せに配置させることができる。
左寄せにしたい場合はleftを、右寄せにしたい場合はrightと記述すればいい。なお、ALIGN="center" という指定もできるが、leftまたはrightを指定しないかぎり、初期値はセンタリングになっているから、特にcenterを指定する必要はない。
【ソース例】
<P> <HR WIDTH="30%" ALIGN="LEFT"> <P> <HR WIDTH="30%" ALIGN="RIGHT"> <P> <HR SIZE=10 WIDTH="40%" ALIGN="CENTER">
・NOSHADE
前述したように、HRタグにSIZE指定を行わない場合、ヘアラインの太さはSIZE=2を指定したものとみなされる。この太さより細いヘアラインを表示したいときは、SIZE=1、SIZE=0のどちらかを指定することになるが、よく見ればこれは３次元的なヘアラインとなっている。
この３次元的なヘアラインではなく、単純な直線を表示したいときは、このNOSHADEアトリビュートを指定すればいい。NOSHADEアトリビュートにも、SIZEやWIDTHの指定を併記することができる。
【ソース例】
<P> <HR> <P> <HR NOSHADE> <P> <HR NOSHADE SIZE=10 WIDTH="40%">
◆IMG……イメージ
【解説】インターネットのアプリケーションのなかでも、とくにWWWが爆発的な流行となったのは、文字と同時にテキストやビデオなどが扱え、マルチメディアなページが作成、閲覧できるためだろう。
【書式】<IMG SRC="filename" ALIGN="top/middle/center/bottom" ALIGN="left/right" ALT="text" WIDTH="n" HEIGHT="n" BORDER="n" VSPACE="n" HSPACE="n" LOWSRC="filename"> <IMG DYNSRC="Video" START=FILEOPEN/MOUSEOVER CONTROLS LOOP=n/0/-1 LOOPDELAY=n> <IMG SRC="url" USEMAP="#Mapname"> 【機能】インラインイメージの表示、またはビデオの再生、クリッカブル マップの指定。
その画像やビデオといったものを扱うのが、IMGタグである。IMGタグには、指定するファイルによって３種類のものがある。画像（インラインイメージ）、ビデオ、そしてクリッカブプルマップだ。
(1)インラインイメージ
ページのなかに貼り込まれている画像を、インラインイメージとよぶが、これはIMGタグによって記述・指定する。
なお、ブラウザが扱えるイメージファイルの形式は、GIF87、GIF89a（透明GIF）、GIF89a（インターレスGIF）、JPEG、プログレッシブJPEGの各形式のファイルである。
・SRC
表示したい画像ファイル名を、このアトリビュートで指定する。たとえば、ホームページと同じディレクトリにあるtest.gifという画像ファイルを表示したいときは、次のように指定すればいい。
<IMG SRC="test.gif">
こう記述した部分に、test.gifファイルが読み込まれ、他の部分の文字やイメージとともにページ上に表示されることになる。
なお、表示させたいイメージファイルが、下層のディレクトリに保存されている場合は、<IMG SRC="ディレクトリ名/ファイル名">
と正しく指定しなければならない。また上位のディレクトリに保存されている場合は、<IMG SRC="../ファイル名">
といった具合に、正しくディレクトリも指定する必要がある。
・ALIGN
インラインイメージと同じ行に記述している文字列を、イメージのどこに表示するかを設定するアトリビュート。
WWWブラウザでは、インラインイメージはどんなに大きくても１行とみなされて表示される。またIMGタグは改行・改段を行わないので、イメージにつづけて記述した文字列は、イメージの横に１行で表示されることになる。
この文字列を、インラインイメージのどこに表示させるかを設定することができる。指定できるのは次の３つ。
top ：イメージの最上部に合わせて表示。 middleまたはcenter：イメージの中央部に合わせて表示。 bottom ：イメージの最下部に合わせて表示。
それぞれの指定が、どのように表示されるか、次の画面で確認しておくといいだろう。
【ソース例】
<IMG SRC="sample.gif" ALIGN="top"> これはtop指定。<P> <IMG SRC="sample.gif" ALIGN="middle"> こちらは middle 指定。<P> <IMG SRC="sample.gif" ALIGN="bottom"> 最後は bottom 指定。<P>
・ALIGN="left/right"
実はインラインイメージと文字列を同時に表示する場合、文字列をイメージの周りに回り込ませることができる。その指定が、ALIGN属性の設定でleft、またはrightを指定する方法。
leftを指定した場合、これは文章の左側にイメージがくることを意味している。つまりイメージの右側に文章が回り込まれることになる。逆にrightを指定すると、文章の右側にイメージが配置され、イメージの左側に文章が回り込むことになる。
【ソース例】
<IMG SRC="sample.gif" ALIGN="left"> これは left 指定。<BR> 複数行の文章を、イメージの右側に表示します。<BR CLEAR="all"> <HR> <IMG SRC="sample.gif" ALIGN="right"> こちらは right 指定。<BR> 複数の文章を、イメージの左側に表示します。<BR CLEAR="all"> <HR>
・ALT="text"
WWWブラウザでは、テキストとイメージとを同時に表示させることができる。このために大きな表現の自由が実現しているのだが、ただしなかにはイメージを表示できないブラウザもある。
また、低速の電話回線を利用してアクセスしているユーザーの場合、故意にイメージを表示させないようブラウザの設定を行っているユーザーも少なくない。
これらのインラインイメージが表示できない（表示させない）ブラウザでアクセスされたとき、イメージの位置にイメージの代わりに文字列を表示させることができる。それがALT指定。
ALT指定を行っている場合と行っていない場合とで、ブラウザでの表示がどのようになるか、確認してみるといい。
【ソース例】
<IMG SRC="sample.gif" ALT="Sample"> ALT指定を行なった場合。 <HR> <IMG SRC="sample.gif"> ALT指定を行っていない場合。
・WIDTH="n"、HEIGHT="n"
HTMLでは、ページに表示されるインラインイメージの大きさも指定できる。イメージの大きさが指定できれば、画像ファイルの元の表示サイズに関係なく、ページ上で自由にレイアウトすることが可能になる。
このイメージの大きさの指定が、WIDTHとHEIGHTの指定だ。WIDTHはイメージの幅のサイズ、HEIGHTはイメージの高さのサイズで、ともにピクセル単位または開いているブラウザのウィンドウの画面サイズに対する割合で指定する。
たとえば、元の画像ファイルの大きさが、ブラウザで表示させたときに画面の半分近くにもなってしまうが、ページ上では４分の１ほどの大きさにしたい、といったケースだってあるだろう。
あるいはこの機能を利用して、わざと画像を歪めて表示させることだってできる。
また、実はイメージのWIDTHとHEIGHTの指定を行っていると、ページ上ではまずテキスト部分が読み込まれ、次にイメージが表示されるようになるため、低速な回線でアクセスしているユーザーのイライラを、少しでも緩和することができるというメリットもある。
WIDTHとHEIGHTを、さまざまに指定してみて、それがどのようにブラウザに表示されるか試してみるといいだろう。
【ソース例】
<IMG SRC="sample.gif" WIDTH="345" HEIGHT="167"> （オリジナル画像）<P> <IMG SRC="sample.gif" WIDTH="40%" HEIGHT="20%"> （パーセンテージ指定）<P> <IMG SRC="sample.gif" WIDTH="150" HEIGHT="50"> （ピクセル指定／歪み）<P> <IMG SRC="sample.gif" WIDTH="150"> （WIDTHのみの指定）<P>
・BORDER="n"
このアトリビュートの指定は、インラインイメージの境界線の太さを指定するもの。
たとえば、インラインイメージに外枠をつけたいことがある。こんなときにBORDERの指定を行なうといい。また、イメージにリンクを行っている場合、イメージには自動的にリンクを示す枠線がついてしまう。これを枠線がつかないようにしたいときは、BORDER=0 を設定しておくといい。
BORDERで設定するのは、ピクセル数。数値を大きくすれば、それだけ枠線も太くなる。ただし、ブラウザによっては枠線はつくものの、余白として表示されてしまうものもあるので注意。
【ソース例】
<IMG SRC="sample.gif" BORDER=0>BORDER=0の指定 <IMG SRC="sample.gif" BORDER=10>BORDER=10の指定 <HR> <A HREF="index.html"><IMG SRC="sample.gif"></A> リンク済み（BORDER省略) <A HREF="index.html"><IMG SRC="sample.gif" BORDER=0></A> リンクして BORDER=0の指定
・VSPACE="n" HSPACE="n"
イメージの周りに文章を回り込ませたり、あるいはイメージを並べたりしたいときもあるだろう。前述したようにHTMLでは、２つ以上のスペースは認識されず、１つのスペースとして処理される。そのためにPREタグが用意されているが、イメージと文章を並べる場合、その間隔も自由に設定したいもの。これを実現するのが、VSPACEとHSPACEの指定だ。
VSPACEは、インラインイメージに対する垂直方向の余白を指定するもの。つまりイメージの上下に付加される余白となる。指定はピクセル数で行なう。
また、文章がイメージに回り込んでいる場合は、文章の回り込みが始まる位置がイメージより上に設定される。
HSPACEのほうは、インラインイメージに対する水平方向の余白を指定するもの。イメージの左右につけられる余白となる。文章がイメージに回り込んでいる場合も、やはり指定したピクセル数だけイメージから離れて文章が表示されることになる。
【ソース例】
<IMG SRC="sample.gif" VSPACE=0 HSPACE=0> <IMG SRC="sample2.gif" VSPASE=0 HSPACE=0> <HR> <IMG SRC="sample.gif" VSPACE=30 HSPACE=30> <IMG SRC="sample2.gif" VSPASE=30 HSPACE=30> <HR> <IMG SRC="sample.gif" VSPACE=0 HSPACE=0 ALIGN="left"> イメージに回り込む文章がある場合、<BR> HSPACEを0に設定すると、文章とイメー<BR> ジとの境界がなくなってしまう。<BR> <HR> <IMG SRC="sample.gif" VSPACE=40 ALIGN="left"> また、VSPACEの値を設定すると、<BR> イメージの上に余白が設定され、<BR> 文章のスタート位置がイメージよ<BR> りも上になる。<P> <HR> <IMG SRC="sample.gif" HSPACE=50 ALIGN="left"> さらに、HSPACEの値を設定すると、<BR> イメージの左右に余白が設定され、<BR> 文章とイメージとの間に余白がとら<BR> れて見やすくなる。
・LOWSRC="filename"
画像ファイルのサイズが大きくなると、低速回線を利用しているユーザーでは読み込み時間が長くなる。画像を読み込む時間が長く、いつまでたっても画面がちゃんと表示されないときはイライラするものだ。
こんな待ち時間を少しでも緩和するのが、LOWSRCの設定である。緩和するとはいっても、もちろん画像の読み込み時間が短縮されるわけではない。待ち時間のあいだ、別の画像を表示させておき、これによって本物の画像が表示されるまでに、その部分に何の画像が配置されているのか、あるいは「しばらくお待ちください」といったメッセージ（画像）を表示するなどして、イライラを緩和するのである。
LOWSRCの設定は、次のような書式で指定する。
<IMG SRC="Filename1" LOWSRC="Filename2">
本物の画像をFilename1で指定し、その画像が表示される前に表示される画像をFilename2で指定しておく。最初にFilename2の画像が表示されるから、こちらにはモノクロの画像や読み込み時間の短い画像ファイルを指定しておくといい。
このFilename2の画像が表示されたあと、Filename1のファイルが読み込まれ、自動的にFilename1の画像が表示されるわけだ。
【ソース例】
<IMG SRC="sample.gif" LOWSRC="sample2.gif">
・DYNSRC="Video"
WWWブラウザによっては、動画を扱うこともできる。拡張子が.aviのVideo for Windowsファイルや、VRMLの3D画像ファイルなどだ。Internet Explorer2.0以降のブラウザならビデオ画像が表示される。
このビデオやVRMLファイルを利用したい場合は、インラインイメージと同じようにIMGタグを利用する。ただし、SRCアトリビュートではなく、DYNSRCアトリビュートで指定する。
たとえば、ビデオのファイル（例：VideoFile）を指定する場合は、次のように記述すればいい。
<IMG DYNSRC="VideoFile">
また、ビデオやVRMLファイルが表示されないブラウザを利用しているユーザーのことも考え、SRC属性で静止画（例：PicFile）を指定しておくといいだろう。次のように記述する。
<IMG DYNSRC="VideoFile" SRC="PicFile">
・START=FILEOPEN/MOUSEOVER
ビデオファイルの再生方法を指定するアトリビュート。Internet Explorerのみ対応しているもので、STARTにつづけて次のいずれかの再生タイミングを指定しておく。
FILEOPEN : ファイルを読み込むとすぐにビデオが再生される。START属性 を省略した場合は、こちらが既定値となる。 MOUSEOVER : ビデオ画像の上にマウスを移動すると、ビデオが再生される。なお、このFILEOPENとMOUSEOVERは、同時に指定することも可能だ。同時に指定する場合は、「START=FILEOPEN, MOUSEOVER」といった具合に記述する。具体的には、次のように記述すればいい。
<IMG DYNSRC="VideoFile" START=FILEOPEN, MOUSEOVER>
気をつけたいのは、スペースの有無だ。FILEOPENの次にカンマ（,）を、さらにスペースを１つ挿入してMOUSEOVERと記述すると、ビデオ画像が読み込まれるとビデオが再生され、ビデオ画像をクリックすると再生が停止。さらにビデオ画像の上でマウスをクリックすると再生が続行。マウスのクリックで、再生と停止が繰り返される。
カンマの次にスペースを挿入していない場合は、まずファイルが読み込まれるがビデオは再生されず、ビデオ画像の上でマウスをクリックすると再生される。
・CONTROLS
画面50を見ていただくとわかるが、このビデオは通常のインラインイメージのような感じで配置されていて、ここでビデオが再生され、ウスをクリックすることで停止したり再生を続行させたりすることができる。
ところが、ブラウザ上でこれがビデオファイルであることがよくわかるように、あるいはマウスをクリックするのではなく制御バーが表示されていて、これでビデオの再生や停止ができたらどうだろう。それを可能にするのが、CONTROLS属性だ。
たとえば、次のように記述しておく。
<IMG DYNSRC="VideoFile" CONTROLS>
これだけのことで、次画面のようにビデオ画像の部分に制御バーが表示される。もちろん、この制御バーを使って再生したり停止させたり、あるいは再生位置を移動させることができる。
・LOOP
ビデオ画像の再生回数を指定することもできる。それがLOOP属性だ。ビデオ画像は、一度再生し終わると、最後のフレームが表示されているが、LOOP属性を設定しておくと、再生が終了したあとビデオの上でマウスをクリックすると、指定した回数分、繰り返して再生されるようになる。
LOOP属性には、次の値を設定する。
n : nは１以上の整数で、指定した回数だけ繰り返してビデオを再生する。 0 : 自動再生は行なわず、ビデオ画像をクリックしたとき再生が開始さ れる。 -1 : 無限に繰り返し再生し続ける。LOOP=INFINITEと指定しても同義。たとえば、ビデオ画像を何度でも再生させたいときは、次のように記述しておけばいい。
<IMG DYNSRC="VideoFile" LOOP=-1>
なお、繰り返し再生するときの再生間隔は、次のLOOPDELAY属性で設定しておく。
・LOOPDELAY=n
ビデオ画像を繰り返して再生させるよう設定したときは、再生の間隔も設定しておくといい。これはLOOPDELAYで設定する。
再生の間隔というのは、再生終了から次の再生がスタートするまでの間隔で、ミリ秒（1000分の１秒）単位で数値を指定する。たとえば、再生が終わって次の再生を３秒後にスタートさせたい場合は、次のように記述すればいい。
<IMG DYNSRC="VideoFile" LOOP=-1 LOOPDELAY=3000>
・クリッカブルマップ
ホームページのなかには、画像が表示されていて、その画像の特定の部分をマウスでクリックすると、リンクされているページや場所に移動するものがある。複数のページや場所がリンクされており、画像のなかでそれぞれ別々の場所にリンクがはってあるものだ。 これはクリッカブルマップとよばれるもの。クリッカブルマップについては次章で詳しく解説するが、HTMLのなかでは画像のタグの指定で設定するようになっている。
クリッカブルマップを設定するには、まず利用する画像の設定を行なう。たとえばsample-map.gifという画像をクリッカブルマップとして表示したいとき、次のように記述することになる。
<IMG SRC="sample-map.gif" USEMAP="#mapdata">
SRCで利用する画像のファイル名を指定し、さらにUSEMAPでマップデータを指定するわけだ。マップデータ名には、先頭に#記号を付けておく。
画像ファイルを指定したら、今度はマップデータを指定する。これはMAPタグを利用するが、IMGタグでマップデータを「mapdata」と指定しているから、MAPタグでは次のように記述すればいい。
<MAP NAME="mapdata">
さらに、このクリッカブルマップのエリア情報も設定しておかなければならない。画像のどの部分をクリックするとどこにリンクするか、という情報だ。これはAREAタグで指定する。
AREAタグで指定できる属性には、次の３つのものがある。
・SHAPE : リンク部分の形状 ・COORDS : リンク部分の範囲 ・HREF : リンク先それぞれについて説明しておこう。まずSHAPEだが、これには次表の３つのパラメータのいずれかを指定し、さらにそれぞれの形状の範囲をCOORDSのパラメータで指定することになる。
SHAPE 形状 COORDSのパラメータ circle 円 X1,Y1,R1（円の中心座標をX1,Y1で、半径をR1で指定） rect 四角形 X1,Y1,X2,Y2（四角形の左上の座標をX1,Y1で、右下の座標をX2,Y2で指定） polygon 多角形 X1,Y1,X2,Y2,X3,Y3……（多角形の各頂点の座標を順にX1,|Y1、X2,Y2……と指定）
HREFはリンク先の指定で、これはリンク先のURLを記述する。もしリンク先を設定しない場合も、URLの代わりに“NOHREF”と記述しておく。
なお、これらはリンクを実現したいエリアすべてについて、記述しておく必要がある。
以上をまとめると、たとえば次のように記述すればいい。
<IMG SRC="sample-map.gif" USEMAP="#mapdata"> <MAP NAME="mapdata"> <AREA SHAPE=rect COORDS=40,143,206,353 HREF="sample1.html"> <AREA SHAPE=rect COORDS=184,28,279,174 HREF="sample2.html"> <AREA SHAPE=rect COORDS=358,88,443,208 HREF="sample3.html"> </MAP>
上記画面のステータス行に、それぞれのリンク先が表示されているのがわかるだろう。これでクリッカブルマップも簡単に実現できる。
なお、クリッカブルマップにはブラウザ側で用意されているクライアントサイド・クリッカブルマップと、サーバー側で用意しているサーバーサイド・クリッカブルマップの２種がある。ここではクライアントサイド・クリッカブルマップについて説明したが、CGIを利用したクライアントサイド・クリッカブルマップを利用する方法は、次章を参照していただきたい。
