HTML文書(イメージ：画像とテキスト)

イメージ(画像)とテキスト(文字列)
イメージとテキストとの関係を指定します。

画像の横に文字列(１行)	画像の横に文字列(複数行)
画像と文字列間の空き	文字列の回り込み解除

画像の横に文字列(１行)

<IMG SRC="イメージファイル名または、url" ALIGN="オプション">テキスト

オプション

top
middle,center
bottom

イメージの一番上
イメージの中央
イメージの一番下

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

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"の場合には、 、ALIGN="right"の場合には、 を使用します。
　オプションがleftでは、イメージが左寄せになり、次の右余白のあるところにテキストが置かれ、 rightでは、イメージが右寄せになり、次の左余白があるところにテキストの続きが置かれます。
　ただし、 を使用しても結果は同じなので、通常はallを使用します。また、allのときと何も指定していない のときも同じ結果となり、左右どちらでも余白があるところにテキストが続きます。

について
イメージファイルについて

Topへ

見本ＳＯＵＲＣＥ

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

このＳＯＵＲＣＥを実行してみる...
２０秒で自動クローズします。

Topへ

前のページへ

次のページへ