HTML作成7

8.いろいろなテクニックを学ぶ(その１)

【画像と説明文の位置関係を調整する】
　　今までは、画像を単独の行として扱って来ましたが、画像と文字を並べて表示することも出来ます。それには<IMG>タグの位置を制御するalign という属性を利用します。

      <IMG src="file name" align="top">---画像の上端を文字の上端に揃えます

　　　<IMG src="file name" align="middle">---画像の中心を文字の下端に揃えます　

      <IMG src="file name" align="bottom">---画像の下端を文字の下端に揃えます

(注)このalign="top","middle"等は、画像が文字列の中の一行に並べると云う機能しか持ってません。従って、画像の前後のテキストは当然一行しか並びません。複数の行を、画像の左または右に並べるときはalign でleftまたはrightを指定します(後述)。

　　　それでは、実際にプログラムを作ってブラウザで見てみましょう。ある写真をスキャナで呼びこんできて tyuugoku.jpgと云う名前をつけimageフォルダに保存します。そして、その写真と説明文の関係を調整しましょう。

 
      <CENTER>       
　　　<IMG src="image/tyuugoku.jpg" align="top">西安郊外の華清池  
      <BR><BR>
      <IMG src="image/tyuugoku.jpg" align="middle">西安郊外の華清池
      <BR><BR>
      <IMG src="image/tyuugoku.jpg" align="bottom">西安郊外の華清池
      </CENTER>

　　上のようにソースプログラムを記述すると、ブラウザにはそれぞれ次ぎのように表示されます。

西安郊外の華清池

　

【画像にテキスト(説明文)を回り込ませる】
　　画像の左または右に、複数行のテキスト並べるときはalignでleftまたはrightを指定します。また、画像の周りに　余白を設けたいときは、vspace(上下の余白)、hspace(左右の余白)を指定します。

<IMG src="file name" align="☆" vspce="★" hspace="◇">

                    ☆- - -left, right
                    ★- - -ピクセル数(上下の余白)
                    ◇- - -ピクセル数(左右の余白)

 
<IMG src="image/tyuugoku.jpg" align="right" vspce="15" hspace="30">
<B>西安郊外の華清池</B><BR>
西安市の東１０キロにある温泉地。周代から歴代王朝が離宮を設けた。
特に唐代の皇帝玄宗は６０万平方ｍの華清宮を造り、楊貴妃と共に
晩秋から春にかけてここで過ごし、昼夜を問わず豪勢な宴を繰り広
げたことで有名である。大詩人・白居易の次ぎの詩がよく知られている。<BR>
<P align="center">春寒賜浴華清池<BR>
　　　　　温泉水滑洗凝脂<BR>
       (　春寒にして　浴を賜わる華清の池<BR>
　　　　湯滑らかにして白きつややかな肌を洗う)</P>

　　上のように記述すると、ブラウザには次ぎのように表示されます。

西安郊外の華清池

西安市の東１０キロにある温泉地。周代から歴代王朝が離宮を設けた。特に唐代の皇帝玄宗は６０万平方ｍの華清宮を造り、楊貴妃と共に晩秋から春にかけてここで過ごし、昼夜を問わず豪勢な宴を繰り広げたことで有名である。大詩人・白居易の次ぎの詩がよく知られている。

春寒賜浴華清池
温泉水滑洗凝脂
(　春寒にして　浴を賜わる華清の池
湯滑らかにして白きつややかな肌を洗う)
　　　　　