HTML編 26/51
| 目的別 index | タグ別 index | カラーチャート | images | SAMPLE |
画像を表示する
画像の横に文字を入れる
画像と文字のスペースを調節する




画像の横に文字を入れる

●<IMG SRC="n" ALIGN="n">
IMGタグにつけるALIGNオプションは画像自体の位置を指定するものではありません(画像の位置を指定する場合は<DIV>を使います)。IMGタグに付けるALIGNオプションは、続けて書いた文字の位置を指定するものです。
パラメータは「top」「middle」(または「center」)「bottom」です。デフォルトはbottomになります。View

これらのパラメータは画像の右側にキャプションを付ける場合などには有効ですが、長い文章には向きません。なぜなら1行しか有効ではないからです。2行目以降は画像の下列に表示されてしまいます。
複数行の文字を画像の横に配置したい場合は、パラメータに「left」か「right」を入れます。この場合、画像の天地サイズに入る分だけの文章が、画像の上合わせで表示されます。テーブルタグに付けるALIGNオプションも本来の意味では同様です。
下合わせ、もしくは真ん中合わせで複数行の文字を配置するにはテーブルを使って隣のセルに配置するしかありません。

●<BR CLEAR="n">
「left」か「right」で複数行の文章を配置した時、途中で画像の横位置から外したい場合(回り込みを解除したい場合)はBR CLEARで解除します。パラメータにはALIGN="left"だった場合には<BR CLEAR="left">、ALIGN="right"の場合は<BR CLEAR="right">を入れますが、<BR CLEAR="all">とすればどちらにも有効ですので、「all」で覚えておきましょう。
View
<HTML>
<HEAD>
<TITLE>ようこそ!Kimura's Roomへ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#ececec">

<B>●<IMG SRC="n" ALIGN="top"></B><BR>
<IMG SRC="img/tra-canada081.jpg" ALT="カナダ8" BORDER="0" WIDTH="95" HEIGHT="64"
ALIGN="top">IMGタグにつけるALIGNオプションは画像自体の位置を指定するもので
----------略---------------
指定するものです。<P>

<B>●<IMG SRC="n" ALIGN="middleまたはcenter"></B><BR>
<IMG SRC="img/tra-canada081.jpg" ALT="カナダ8" BORDER="0" WIDTH="95" HEIGHT="64"
ALIGN="middle">パラメータは「top」「middle」(または「center」)「bottom」です。
----------略---------------
されてしまいます。<P>

<B>●<IMG SRC="n" ALIGN="bottom"></B><BR>
<IMG SRC="img/tra-canada081.jpg" ALT="カナダ8" BORDER="0" WIDTH="95" HEIGHT="64"
ALIGN="bottom">複数行の文字を画像の横に配置したい場合は、パラメータに「left」か
----------略---------------
りません。<P>

<B>●<IMG SRC="n" ALIGN="left"></B><BR>
<IMG SRC="img/tra-canada081.jpg" ALT="カナダ8" BORDER="0" WIDTH="95" HEIGHT="64"
ALIGN="left">IMGタグにつけるALIGNオプションは画像自体の位置を指定するものではありません
----------略---------------
配置するしかありません。<P>

<B>●<IMG SRC="n" ALIGN="right"></B><BR>
<IMG SRC="img/tra-canada081.jpg" ALT="カナダ8" BORDER="0" WIDTH="95" HEIGHT="64"
ALIGN="right">IMGタグにつけるALIGNオプションは<BR CLEAR="all">画像自体の位置を指定するものではありません
----------略---------------
配置するしかありません。<P>

</BODY>
</HTML>




画像と文字のスペースを調節する

●<IMG SRC="n" HSPACE="n"><IMG SRC="n" VSPACE="n">
写真の横に文字を配置すると文字と写真がくっついてしまって、あまり見やすいものではありません。そこで写真と文字の間にスペースを空けるタグがありあます。HSPACEオプションで横方向に、VSPACEオプションで下方向に、パラメータに入力したピクセル数分スペースが空きます。
View
<HTML>
<HEAD>
<TITLE>ようこそ!Kimura's Roomへ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#ececec">

<B>●IMG SRC="n" HSPACE="10"</B><BR>
<IMG SRC="img/tra-canada081.jpg" ALT="カナダ8" BORDER="0" WIDTH="95" HEIGHT="64" ALIGN="center"
HSPACE="10">カナダの写真<P>

<B>●IMG SRC="n" VSPACE="20"</B><BR>
<IMG SRC="img/tra-canada081.jpg" ALT="カナダ8" BORDER="0" WIDTH="95" HEIGHT="64"
VSPACE="20">カナダの写真

</BODY>
</HTML>

backindexnext