A.T-MOON

contents

パンくずリスト

メッセージエリア



    画像の指定A

メッセージエリア


マーク 画像にテキストを回り込み <img src="A" align"G">

画像に対するテキストの位置指定≠ニ同じようにalign属性を使って画像の表示位置を指定します。
画像の表示位置を右が左に指定することにより、
ブラウザの片端に画像、その反対側にテキストを複数行表示させる事ができます。
Gには属性の値を入れましょう。
画像に対するテキストの位置指定≠ニ同じalign属性を使いますが属性の値が変わりますので注意して下さい。

G 画像の表示位置
left 画像を左側によせる
right 画像を右側によせる

※例)
画像の表示
サンプル画像 このような形で表示されます。横にテキストをズラズラと並べても、表示できるところまでは表示され幅が一杯になると自動的に改行されて次の行に移ります。画像の表示位置を指定しているため、テキストは単独で表示されるようになります。ただし画像の前にあるテキストに関しては画像の位置を指定していても無視されます。この例の場合画像の表示≠フ部分は画像より前に記述されていますので普通に左から表示されています。画像の表示≠フ後ろに改行タグを入れていないとこのような形で…≠熈画像の表示≠ノ続いて表示されてしまいますので気をつけて下さい。
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 画像の表示<br>
 <img src="画像ファイルのURL" alt="代替テキスト" align="left">
 このような形で表示されます。横にテキストをズラズラと並べても、表示できるところまでは表示され幅が一杯になると自動的に改行されて次の行に移ります。…
 </body>
</html>

ページTOP


マーク 画像に対する回り込み解除 <br clear="A">

前項の画像にテキストを回り込み≠解除して、それ以降のテキストを画像の下に配置したいときに
改行タグ<br>clear属性を使ってテキストの回り込みを解除します。
Aには属性の値を入れましょう。

A 解除位置
left 画像が左側にあるときの回り込みを解除
right 画像が右側にあるときの回り込みを解除
all どちら側にあるときでも回り込みを解除

※例)
画像の表示
サンプル画像 このような形で表示されます。横にテキストをズラズラと並べても、表示できるところまでは表示され幅が一杯になると自動的に改行されて次の行に移ります。
この前で解除しているため以降のテキストは画像の下に表示される事になります。
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 画像の表示<br>
 <img src="画像ファイルのURL" alt="代替テキスト" align="left">
 このような形で表示されます。横にテキストをズラズラと並べても、表示できるところまでは表示され幅が一杯になると自動的に改行されて次の行に移ります。
 <br clear="left">
 この前で解除しているため以降のテキストは画像の下に表示される事になります。
 </body>
</html>

ページTOP



マーク 画像とテキストの間隔 <img src="A" vspace="B" hspace="C>

画像とテキストの間に間隔をあけたい時に<vspace>(横方向)と<hspace>(縦方向)を使って指定します。
BCにはそれぞれピクセルで値を入れましょう。


※例)
画像の表示
サンプル画像 このような形で左に10pxの余白が入ります
このような形で左上にに10pxの余白が入ります
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 画像の表示<br>
 <img src="画像ファイルのURL" alt="代替テキスト" align="left" vspace="10" hspace="10">
 このような形で左に10pxの余白が入ります
 <br clear="left">
 このような形で左上にに10pxの余白が入ります
 </body>
</html>

ページTOP

画像の指定@ 画像の処理@(HTML編)