イメージ(画像)とテキスト(文字列)
イメージとテキストとの関係を指定します。
画像の横に文字列(1行) 画像の横に文字列(複数行)
画像と文字列間の空き 文字列の回り込み解除




画像の横に文字列(1行)
<IMG SRC="イメージファイル名または、url" ALIGN="オプション">テキスト
オプション top
middle,center
bottom
イメージの一番上
イメージの中央
イメージの一番下

 イメージの横にテキストを入れる場合に、上中下の位置指定をします。 デフォルトはbottomです。 このとき、イメージを1つのテキストのように扱い、 文字列と文字列の間に配置します。 したがって、2行目以降のテキストはイメージの下に流れてしまいます。

Topへ

画像の横に文字列(複数行)
<IMG SRC="イメージファイル名または、url" ALIGN="オプション">テキスト
オプション left
right
bottom
イメージの左側に文字列を配置
イメージの右側に文字列を配置

 イメージの横に、複数行のテキストを配置します。
 イメージが左、もしくは右のマージンに揃えられ、 その側面にテキストが表示されます。
 また、イメージの横に収まりきらなかったテキストは、 イメージの下に移動します。

Topへ

画像と文字列間の空き
<IMG SRC="イメージファイル名または、url" HSPACE="n1" VSPACE="n2">テキスト
オプション n1 = ピクセル数
n2 = ピクセル数
イメージと文字列の左右のスペース
イメージと文字列の上下のスペース

 イメージの横にテキストを書くとき、 イメージとテキストの間に間隔をあけます。
 VAPCEは縦方向、HSPACEは横方向の空きをイメージに対して設定しています。
イメージの側面にテキストを複数行置くためは、 ALIGNオプションが必要です。

Topへ

文字列の回り込み解除
<BR CLEAR="オプション">
オプション all,left,right

 イメージの横に複数行のテキストを配置する場合、 テキストの回り込みを解除して、 それ以降のテキストはイメージの下の行に続けます。
 テキストの回り込みを指定した際ALIGN="left"の場合には、 <BR CLEAR="left">、ALIGN="right"の場合には、 <BR CLEAR="right">を使用します。
 オプションがleftでは、イメージが左寄せになり、 次の右余白のあるところにテキストが置かれ、 rightでは、イメージが右寄せになり、 次の左余白があるところにテキストの続きが置かれます。
 ただし、<BR CLEAR="all">を使用しても結果は同じなので、 通常はallを使用します。 また、allのときと何も指定していない<BR CLEAR>のときも 同じ結果となり、左右どちらでも余白があるところにテキストが続きます。

<BR>について
イメージファイルについて

Topへ

見本SOURCE

<HTML>
<HEAD>
<TITLE>イメージ(画像とテキスト)</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<BASEFONT SIZE=4>
<BR>
<IMG SRC="al.jpg" LOWSRC="al.gif" ALIGN="MIDDLE" ALT="Algernon" WIDTH="270" HEIGHT="170">
Algernonだよぉ〜♪
<BR>
<HR>
<BR>
<IMG SRC="hiyoko.gif" HSPACE="5" VSPACE="3" ALIGN="right" ALT="お散歩ひよこ" WIDTH="180" HEIGHT="155">
 私のうちでは、チャボの夫婦を飼っています。
名前は、"太郎"と"こっこ"といいます。
<BR>
 ある日、"こっこ"が生んだたまごがかえり、
中からかわいいひよこが生まれてきました。
彼は、外でお散歩するのが大好き!
いつも私の後についてきます。
<BR clear="ALL">
<CENTER> 今では、私の大切な友達です。(^-^)
</CENTER> <BR>
</BODY>
</HTML>


このSOURCEを実行してみる...
20秒で自動クローズします。



Topへ


前のページへ 次のページへ