HP作成時の画像の処理について

質問

素人ながら、TeraPadというフリーソフトでHPの作成に挑戦しています。
自作の画像を載せるのに"img"タグで画像自体は表示されているのですが、同じ行にあるテキストがずれて表示されてしまいます。
テキストと画像を横並びに表示するためにはどういったソースを書けばよいのでしょうか？

回答No.5

asora · ベストアンサー

補足です
先ほどの例では
画像を●テキストを■とした場合

●■　の並び方になりますが

<td>テキスト</td><td><img src="画像URL"></td>
だと■●になります。

<tr>
<td><img src="画像URL"></td><td>テキスト</td>
</tr>
<tr>
<td>テキスト</td><td><img src="画像URL"></td>
</tr>
<tr>
<td><img src="画像URL"></td><td>テキスト</td>
</tr>
と言う風にすると
●■
■●
●■　とできますよ。

　また、最初の
<table border="0">のborderの部分は枠線（元々TABLEタグは表を作るタグなので…）の太さの定義です。
「0」ですと、枠線無しになります。<table>のみですと枠線が表示されます。
bordercolorというタグで色のついた枠線にすることもできます。

お礼

ありがとうございます。
大変参考になりました。

回答No.4

asora

＃１さんの仰る方法ともう一つ・・・
TABLEタグを使う方法もあります。
この方法ですと色々とレイアウトに使えて便利です。

<table border="0">
<tr>
<td><img src="画像URL"></td><td>テキスト</td>
</tr>
</table>

<tr>・・・行を定義します</tr>までが一行です。
<td>・・・欄の定義です</td>までが一欄です。

テキストを中央揃えなどにすることも可能です。
<td align="center" valign="middle">
このように指定すると、文字列は中央揃いで欄の高さの中心に文字列が表示されます。
（つまり、画像の真ん中と同じ高さに文字列が並ぶ）
　ちなみに、画像の上部と文字列を揃えるのはmiddleをtopに、アンダーラインで揃えるならbottomに変更すればOKです。

デフォルトでは
align="left"　Valign="top"と同じ状態になっています。

回答No.3

Bergamot

<br clear="left">
の間違いです。左寄せの解除になります。３度もすみません。
日頃ＣＳＳでfloatしか使ってないもので、
申し訳ないです。

回答No.2

Bergamot

<img src="○○.jpg" align="left">
のようにです（これは左寄せ、文字が右になります。）
解除するには
<br clear>
を入れてください。

回答No.1

Bergamot

画像を左か右に寄せると、文字が回りこみます。
img のタグに、半角スペース空けてから、
align="left"　もしくは align="right"を追記してください。