箇条書きリストのすぐ横に画像を載せたい

質問

初心者です。よろしくお願いいたします。

表題のとおりなのですが、

<img src="gazou.jpg" width="100" height="100" align="right">
<ol>
<li>りんご</li>
<li>みかん</li>
</ol>

・・・と記述すると確かに箇条書きリストの右側に画像が表示されるのですが画像が右端に表示されてしまいます(当然ですが・・・）箇条書きリストの少し横あたりに画像を表示させたいのですがなにか方法があるのでしょうか。このような微調整はむずかしいのでしょうか。
よろしくアドバイスお願いいたします。

回答No.2

vamos_4wd · ベストアンサー

No1の補足です。

●箇条書きに対し、画像が一つずつの場合

<TABLE border="0" width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD width="46%">りんご</TD>
<TD width="54%"><IMG border="0" src="gazou.jpg" width="43" height="39"></TD>
</TR>
<TR>
<TD width="46%">みかん</TD>
<TD width="54%"><IMG border="0" src="gazou.jpg" width="43" height="39"></TD>
</TR>
</TABLE>

●箇条書きに対し、画像が一つだけの場合

<TABLE border="0" width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD width="46%">りんご</TD>
<TD width="54%" rowspan="2"><IMG border="0" src="gazou.jpg" width="43" height="39"></TD>
</TR>
<TR>
<TD width="46%">みかん</TD>
</TR>
</TABLE>
以上のような感じです。

お礼

お礼が遅くなり申し訳ありません！
なるほど!!!!という感じで助かりました!
ありがとうございました!

回答No.3

noname#199778

スタイルシートでボックスの枠を決めてしまい、そこに上記のソースを入れてしまうとか、テーブルで枠を切ってしまい、その枠内で画像を右に回り込ませると言った方法でも良いかと思います。 他にも方法はあるでしょう。

スタイルシートの場合：
<div style="width: 300px;">
<img src="gazou.jpg" width="100" height="100" align="right">
<ol>
<li>りんご</li>
<li>みかん</li>
</ol>
</div>

テーブルの場合：
<table width="300">
<tr>
<td>
<img src="gazou.jpg" width="100" height="100" align="right">
<ol>
<li>りんご</li>
<li>みかん</li>
</ol>
</td>
</tr>
</table>

上記はいずれも幅300pxの表示領域を確保し、その枠の中で画像を右端に配置します。 上記のソースは端折って書いてあるものなので、スタイルシートとテーブルとで表示結果が若干異なります(テーブルの方がセル間のスペースを確保する分、枠が若干狭くなります。tableのcellpaddingとcellspacingを0に設定すれば、見かけ上はほぼ等しい表示になると思います)。

スタイルシートを使ってレイアウトするなら、他にもいくらか方法があります。 おそらく、スタイルシートを使った方が、HTMLだけで対処するよりもだいぶ自由にレイアウトを整えることができるのではないでしょうか。
参考まで。

お礼

お礼が遅くなりもうしわけありません。
そういうやり方があったんですね！
やってみます。助かりました！

回答No.1

vamos_4wd

私はいつも表（テーブル）<TABBLE></TABBLE>を使っています。テーブルを使えば微調整など簡単に出来ますよ。

表のプロパティーでラインの値を０にて表示し無いように
して、左のセルに箇条書きのものを入れて、右のセルの中
に画像を貼り付けます。

他の方のHPのソースを参考にして見てください。
頑張ってくださいね。