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

解決済

質問者：nekocya
質問日時：2004/02/15 01:33
回答数：3件

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

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

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： vamos_4wd
回答日時：2004/02/15 02:00

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>
以上のような感じです。

- 2
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2004/02/17 22:09

No.3

回答者： lead1976
回答日時：2004/02/15 11:00

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

他にも方法はあるでしょう。

スタイルシートの場合：
<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だけで対処するよりもだいぶ自由にレイアウトを整えることができるのではないでしょうか。
参考まで。