初心者です。よろしくお願いいたします。
表題のとおりなのですが、
<img src="gazou.jpg" width="100" height="100" align="right">
<ol>
<li>りんご</li>
<li>みかん</li>
</ol>
・・・と記述すると確かに箇条書きリストの右側に画像が表示されるのですが画像が右端に表示されてしまいます(当然ですが・・・)箇条書きリストの少し横あたりに画像を表示させたいのですがなにか方法があるのでしょうか。このような微調整はむずかしいのでしょうか。
よろしくアドバイスお願いいたします。
No.2ベストアンサー
- 回答日時:
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
- 回答日時:
スタイルシートでボックスの枠を決めてしまい、そこに上記のソースを入れてしまうとか、テーブルで枠を切ってしまい、その枠内で画像を右に回り込ませると言った方法でも良いかと思います。
他にも方法はあるでしょう。スタイルシートの場合:
<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
- 回答日時:
私はいつも表(テーブル)<TABBLE></TABBLE>を使っています。
テーブルを使えば微調整など簡単に出来ますよ。表のプロパティーでラインの値を0にて表示し無いように
して、左のセルに箇条書きのものを入れて、右のセルの中
に画像を貼り付けます。
他の方のHPのソースを参考にして見てください。
頑張ってくださいね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルタグの中にdivを含めて...
-
テーブルの位置を細かく指定し...
-
tableのheight指定が効かない
-
【CSS】縦横スクロールテーブル...
-
テーブルでスクロールを同期したい
-
テーブル内に画像を表示したい。
-
テーブルの横に画像を
-
HTMLでテーブルを横に並べる方法
-
箇条書きリストのすぐ横に画像...
-
テーブルが自動改行される
-
テーブルを半透明(または網掛け)
-
画像の横にテーブルを。。。
-
IE6 バグ table td colspan pa...
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
CSSで特定のテーブルだけに...
-
tableにul,または,olを入れられ...
-
テーブルのヘッダとボディの幅...
-
テーブル内のセル間にスペース...
-
cssで、表示されるテキストによ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルタグの中にdivを含めて...
-
テーブルの位置を細かく指定し...
-
テーブルの横に画像を
-
HTMLでテーブルを横に並べる方法
-
tableのheight指定が効かない
-
ウィンドウのサイズを変えても...
-
テーブル内に画像を表示したい。
-
2つのテーブルを左右に表示した...
-
CSSで文字を一番下の中央に表示...
-
複数のテーブルを無条件に中央...
-
箇条書きリストのすぐ横に画像...
-
画像の横にテーブルを。。。
-
【CSS】縦横スクロールテーブル...
-
プルダウンの表示位置
-
HTMLでページの幅を設定し...
-
DWで、デザインビューに表示さ...
-
ヘッダー固定のスクロールが可...
-
画像と、セルのつなぎ目に白い...
-
ドリームウィーバーでテーブル...
-
一部CSSを無効にする
おすすめ情報