画像が動いてしまいます!?!

[新着] Webテンプレートを仮オープンしました

0   名前： ぽぽんた ： 2006/11/03（金） 19:14  ID:BuWBc7e7
こんにちは、ホームページ作りを始めたばっかりの初心者です。
今「Bluefish」でタグを使い作成しているんですけど、文字を書いてその横に<img src="">で画像を入れてalign="right"にし、全画面で表示するとしっかり文字の右に画像が表示されるんですけど、そのページを縮小すると画像が文字と重なってしまい見にくくなってしまいます。どなたか画像が動かないようにするにはどうしたらよいか教えてくれませんか？
1   名前： TEIDHO ： 2006/11/03（金） 19:14  ID:exOVSdhQ
テーブルのセルに入れてみたらいかがでしょうか。
2   名前： ぽぽんた ： 2006/11/03（金） 19:14  ID:BuWBc7e7
お返事ありがとうございます。本当に申し訳ないんですがタ打今このような状態です。

<table cellpadding="2" cellspacing="2" border bordercolor="#000000" bgcolor="#101010" align="right">
<tr>
<td bgcolor="#4f4f4e">
<table cellpadding="3" cellspacing="2" border bordercolor="#000000" bgcolor="#8f8f8e" style="font:13px/130%;">
<tr>
<td bgcolor="#efefee" align="center">

</td>
</tr>
<tr>
<td bgcolor="#ffffff">
<div style="padding:3px;">
<br>
<img src="○○.jpg"><br>

</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
3   名前： suzunone ： 2006/11/03（金） 19:14  ID:rTI.mjdn
表ではないのにレイアウトのためにテーブルを書くのはいかがかと思います。(重くなりますしね)

ということで、単に文字の右側に画像を入れたいのであれば、スタイルシートを活用したほうがいいですよ。

ちなみに、次のは一例です。参考にしてみてください。

<p>

<img src="image.jpg" alt="alt" title="title" width="123" height="45" style="border-style: none;padding-left: 10px;float: right;" />

ここに文字を入れます。ちなみにこの場合、border-style: none;というのは、border="0"の代わりにつかっています。また、padding-left: 10px;というのは、画像の左側に10pxの空白をあけるという意味です。そして、float: right;というのが画像を右側によせるという意味になります。最後の<br style="clear: both;" />のclear: both;は回り込みを解除すると言う意味です。

<br style="clear: both;" />

</p>


だらだらと書いてしまって見にくいのですが、ご勘弁下さい。
4   名前： 匿名 ： 2006/11/03（金） 19:14  ID:vF/mN4Au
>>3
CSS1ならそれで構わない。

ただ、CSS2からは、clearはブロックレベル要素にのみ適用可能。
したがって、br { display: block; } としなければならないが、
こう書くくらいなら、外側の何かのブロック要素を利用した方がよい。
5   名前： suzunone ： 2006/11/03（金） 19:14  ID:rTI.mjdn
>>4
確かにそうですね。あなたのおっしゃるとおりだと思います。
ということで、書き直し。

<p>
<img src="image.jpg" alt="alt" title="title" width="123" height="45" style="border-style: none;padding-left: 10px;float: right;" />

ここに文字を入れます。ちなみにこの場合、border-style: none;というのは、border="0"の代わりにつかっています。また、padding-left: 10px;というのは、画像の左側に10pxの空白をあけるという意味です。そして、float: right;というのが画像を右側によせるという意味になります。最後の<br style="clear: both;" />のclear: both;は回り込みを解除すると言う意味です。

</p>
<div style="clear: both;"><p>続きの文章を書いてください</p></div>
6   名前： suzunone ： 2006/11/03（金） 19:14  ID:rTI.mjdn
>>5
次の文は削除でお願いします。

最後の<br style="clear: both;" />のclear: both;は回り込みを解除すると言う意味です。
7   名前： 匿名 ： 2006/11/03（金） 19:14  ID:vF/mN4Au
>>5-6
ごめん、>>4の言い方はきつかったかもしれない。
他意は全くなかったんだけど、書き直して頂いて感謝です。
（別にdivブロックを用意せずとも、二番目のp要素でclearすればいいと思われ）

>>4を補足すると、CSS2以降、clearはブロックレベル要素にのみ適用できるのだから、
ブロック要素以外に適用すると、実装によってはエラーとして無視されるかもしれないし、
暗黙にdisplay:blockを付与することだってあるかもしれない。
つまり、意図した表示にならない「可能性がある」ということでした。
8   名前： suzunone ： 2006/11/03（金） 19:14  ID:rTI.mjdn
>>7
別に気にしていなかったことなので逆に恐縮です。
確かにdivの使いすぎは良くないですね。
ということで、最後の書き直し？

<p>
<img src="image.jpg" alt="alt" title="title" width="123" height="45" style="border-style: none;padding-left: 10px;float: right;" />

ここに文字を入れます。ちなみにこの場合、border-style: none;というのは、border="0"の代わりにつかっています。また、padding-left: 10px;というのは、画像の左側に10pxの空白をあけるという意味です。そして、float: right;というのが画像を右側によせるという意味になります。この次にでてくる<p style="clear: both;" />のclear: both;は回り込みを解除すると言う意味です。

</p>
<p style="clear: both;">続きの文章を書いてください</p></div>


0さんへアドバイスするつもりでしたが、逆に勉強になりました。あまり深いことを考えずにタグ打ちしていたのですが、これからは気をつけたいと思います。すっきり見やすいソースのほうがいいですしね。

ということで、何度もソースが変わってしまってすみませんでした。最後のものをご参考に頑張ってください。
9   名前： suzunone ： 2006/11/03（金） 19:14  ID:rTI.mjdn
そしてまた、訂正。。。
最後の</div>はいりません。すみません。
一覧へ戻る