- ベストアンサー
テーブルの位置について
<img src="..." style="float:right" ...> の後に文章とテーブルを書いたところ、 テーブルが画像と重なって表示されてしまいます。 画像を右側に、左側の余白に文章とテーブルを表示させたいです。 XHMLT1.0 で、CSSの指定で解決したいのですが、 どのようにすればよいのか、教えていただけないでしょうか。 なお、テーブルはスペースいっぱいに表示したいので、width=100%と指定してます.
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- Yanch
- ベストアンサー率50% (114/225)
まず、自分でどこまで作ったのか、ソースを見せていただきたい所ではありますが、 ＞テーブルを使ってレイアウトするのは、XHTML的にはよろしくないかと・・・。 その通りです。 しかし、tableを使用しない場合、色々制約がある上、htmlの内容に修正を 掛ける場合にも、変更箇所が多くなると思うので、tableを使用しておいた方が、賢明だと思います。 もしテーブルを使わないなら、 DIVやSPANを多用すれば良いと思います。その場合、 たぶん、DIVはSPAN内に配置したタグの種類によっては融通の利かない動きをするかもしれませんから、 その都度、何か解決方法を模索すると良いです。
お礼
ご返信ありがとうございます。 もうひとつの質問 <http://okwave.jp/kotaeru_hosoku.php3?a=13400386&q=4477205> と同じソースになりますが、補足にさらしました。 > もしテーブルを使わないなら、DIVやSPANを多用すれば良いと思います。その場合、 > たぶん、DIVはSPAN内に配置したタグの種類によっては融通の利かない動きをするかもしれませんから、 その都度、何か解決方法を模索すると良いです。 DIVやSPANの多用で解決したいのですが、そのDIVやSPANにどういった スタイルを指定すればよいのか分からないので、 お伺いしている次第です。 何かお分かりでしたら、教えてください。
補足
現状、問題となっているソースです。 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head profile="http://purl.org/net/ns/metaprof"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>aaa</title> </head> <body class="mainIndex"> <div id="body"> <a href="img/e9.png"> <img style="float:right" src="img/5f.gif" alt="..." width="184" height="164" /></a> <img class="middle" src="img2a0e.gif" alt="..." width="65" height="31" /> あああああああああああああああああああああああ いいいいいいいいいいいいいいいいい, <div class="center"><table cellpadding="0" width="100%"> <tbody><tr valign="middle"> <td align="right"><img class="middle" src="img/51.gif" alt="..." width="68" height="35" /></td> <td align="left"><img class="middle" src="img/57.gif" alt="..." width="85" height="35" /></td> <td class="right" align="right"> <img class="bottom" src="img/09.gif" alt="..." width="47" height="15" /> <a href="" id="0001_2008_003-01" name="0001_2008_003-01"><img src="img/a1.gif" class="right" alt="..." width="20" height="33" /></a> </td> </tr> <tr valign="middle"> <td> </td> <td align="left"><img class="middle" src="img/ea.gif" alt="..." width="112" height="31" /></td> <td class="right" align="right"> </td> </tr> <tr valign="middle"> <td> </td> <td align="left"><img class="middle" src="img/a3.gif" alt="..." width="237" height="31" /></td> <td class="right" align="right"> <img class="bottom" src="img/09.gif" alt="..." width="47" height="15" /> <a href="" id="0001_2008_003-02" name="0001_2008_003-02"><img src="img/a2.gif" class="right" alt="..." width="20" height="33" /></a> </td> </tr> <tr valign="middle"> <td> </td> <td align="left"><img class="middle" src="img/ee.gif" alt="..." width="241" height="54" /></td> <td class="right" align="right"> </td> </tr> <tr valign="middle"> <td> </td> <td align="left"><img class="middle" src="img/99.gif" alt="..." width="54" height="43" /></td> <td class="right" align="right"> <img class="bottom" src="img/09.gif" alt="..." width="47" height="15" /> <a href="" id="0001_2008_003-03" name="0001_2008_003-03"><img src="img/a3.gif" class="right" alt="..." width="20" height="33" /></a> </td> </tr> </tbody></table> </div> </div> </body> </html>
- Yanch
- ベストアンサー率50% (114/225)
画像のサイズはわかっているはずなので、 テーブルを入れ子にして、外側のテーブルの左に文章。右に画像を配置。 画像を配置した列の幅を指定してあげると、残った幅を文章用に出来るはずです。 ---------------------------------------------------------------------- <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <title>画像を右側、文章を左側サンプル</title> <style type="text/css"> <!-- --> </style> </head> <body> <table border="0" width="100%"> <tr> <td> <table border="1" width="100%"> <tr> <td>左側に文章</td> </tr> </table> </td> <td style="width: 256px;"> <img src="bbb.png" alt="gazou_bbb"/> </td> </tr> </table> </body> </html>
お礼
Yanch様、複数の質問に回答いただきありがとうございます。 こちらの質問もCSSで解決したいのです。 テーブルを使ってレイアウトするのは、XHTML的にはよろしくないかと・・・。 説明がもれていましたが、画像の下枠の部分まで空白が空いた後にテーブルが表示される （画像とテーブルが横に並ばない）ため、 テーブルを <div style="text-align:center"> と </div> でくくっています。 方法がありましたら教えてください。
関連するQ&A
- 回り込みについて(間隔が空く）
下記のような内容(1)のhtmlをcssのfloatを利用して回り込みさせていますが、画像の縦幅より文字が多くなると画像の下にはみ出てしまいます。 tableタグは利用せずに、どのようにcssを指定することで回避できました。（２）既に一度質問をしています。 http://okwave.jp/kotaeru.php3?qid=2419373 しかし画像と文字の間に間隔が入ってしまい困っています。 間隔をあけないようにするにはどうしたら良いでしょうか。 marginやpaddingやwidthをいじりましたがその場しのぎのようでブラウザによってはうまく表示できません。 (1) <img src="■">aaaaa ↓結果 ■aaa aa (2) imgはfloat:left textはfloat:right <img src="■">aaaaa ↓結果 ■＿＿aaa ＿＿＿aa （アンダーパーはスペースを示す） ■とaaaにあるスペースを、10pxほどにしたい。
- ベストアンサー
- HTML
- テーブル内の画像を上寄りにしたい
こんにちわ、質問させてください。 <td width="300" height="300"><img src="img/#####.jpg" width="300" height="100" /></td> 上記のように300×300のテーブルの中に300×100の画像を表示させたのですが、上下側の中央に表示されてしまいます。 この画像を上寄りにさせたいのですが、やり方が何かありませんでしょうか？ 左右側では左・中・右の表示させ方は分かるのですが・・・ 現在は画像の下部に改行を入れて画像を無理矢理上へ寄せています。 もっと良いやり方があればと思いご相談します。 CSSを使ったやり方とかあればそちらの方でもお願いします。 よろしくお願いします。
- ベストアンサー
- HTML
- float:ritghtした画像の左側いっぱいに表を表示する
float:right を指定し画像を右側に表示します。 その左側にtableで表を表示します。 この表を画像の左側いっぱいに表示したいのですが、 width:100%を指定すると画像の上まで広がってしまいます。 画像の大きさは画像ごとに異なるため、 widthで幅を直接できることはできません。 どのように指定したら、画像の左側いっぱいに テーブルを表示できますか？
- ベストアンサー
- HTML
- テーブル内に画像を表示したい。
テーブル内に画像を1枚表示したいです。 下記のようにIMGタグを用いると、画像が表示されますが、 横幅が100％の時の大きさで枠が表示 されます。横に余白があります。 この余白を無くして、テーブルの枠線が画像をピッタリ 囲む様にしたいです。 どなたか、ご教授願います。初心者なので詳しくお願い します。 ---------------------------------------------- <table border=1> <tr> <td > <img src='./test_size/image2.jpg' width='50%' > </td> </tr> </table>
- ベストアンサー
- HTML
- CSSでfloat指定した画像に隙間
floatの指定をすると並べた画像に隙間ができます。 div aで外を囲み、幅を400px固定し、 その中にli(幅200px）を放り込んでいます。 （幅400pxの入れ物に200pxの小箱を2列に並べていく） 画像をfloatさせなければ隙間は出ないのですが、下記cssのようにfloatさせると幅400pxにIEだけ収まりません。 WinXP・irefox1.0やOpera7.5では意図通り表示されます。。 どなたか解決策お持ちの方よろしくおねがいします。 <html> <head> <title></title> <style type="text/css"> <!-- #a{ width:400px; margin: 0 auto; padding:0; } li{ width:200px; padding:0; list-style:none; float:right; display: inline; } img{ border:none; margin:0; padding:0; vertical-align:top; float:left; ←これの有無で不具合 } --> </style> </head> <body> <div id="a"> <dl> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="100" /><img src="xxx.jpg" width="50" height="100" /></li> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="200" /></li> </dl> </body> </html>
- ベストアンサー
- HTML
- 画像を使ったテーブルで隙間ができてしまいます
画像を枠に使ったテーブルをHTMLで作成し、FC2ブログに載せています。 Chrome上ではうまく表示されるものの、IE、Firefoxでは Rowの上に隙間ができてしまい、枠画像が正しく表示されません。 ----------Tableの基本構造---------- <table cellspacing="0" cellpadding="0" border="0" width="x" height="y" bgcolor="#FFFFFF"> <tr><td><img src="左上角"></td> <td><img src="上部"></td> <td><img src="右上角"></td></tr> <tr><td width="15"><img src="左１列目"></td> <td style="color:# … ;"> 内容1</td> <td width="15"><img src="右1列目"></td></tr> <tr><td width="15"><img src="左2列目"></td> <td style="color:# … ;"> 内容2</td> <td width="15"><img src="右2列目"></td></tr> <tr><td><img src="左下角"></td> <td><img src="下部"></td> <td><img src="右下角"></td> </tr></table> -------------以上-------------- 上記のものよりも実際は行と列を増やしておりますが、基本的に増殖しているだけです。 1行目と2行目の間に隙間ができて縦の画像枠が細切れになっています。 隙間ができているのは行の下ではなく、上の部分のように見えます。（背景色の見え方などから） テーブルのみの上記コードは、ローカル環境ではIEでも正しく表示されるため、 ブログにアップした際乱れるのは、スタイルシートの影響かと考えております。 自分でそれらしいところをいろいろ設定をいじりましたが改善しません。 ということで、 ≪スタイルシートの設定で、画像を枠に使ったテーブルの隙間に影響を与えうる要素≫ が何が考えられるか教えて頂ければと存じます。 なお、使っているStyle Sheetは以下のものですが、 http://blog-imgs-30-origin.fc2.com/w/m/k/wmks/wm_gienah_R.html TableにかかわるStyle部分はコメントアウトしましたので、テーブル自体のスタイルは 適用されていないはずです。
- ベストアンサー
- CSS
- cssで商品を並べる時、テーブルを使わないでできる？
cssとっかかったばかりの初心者ですのでわけのわからない質問ばかりしてしまいますが、よろしくお願いします。 cssを使ったページに商品を並べる場合、テーブルを使ってレイアウトするのが楽と思いますが、テーブルを使わないで2列、3列というようにできますか？ 普通にテーブルを使ったら <table> <tr> <td>item1</td> <td>item2</td> <td>item3</td> </tr> <tr> <td><img src="img/01.jpg" width="100" height="100"></td> <td><img src="img/02.jpg" width="100" height="100"></td> <td><img src="img/03.jpg" width="100" height="100"></td> </tr> </table> ですが、テーブルタグをつかわず、cssで列を指定ってできますか？ それとも、商品ラインナップの場合はテーブルで入れるのが普通ですか？？？ いろいろやってみたんですが、わからなくなったので、質問します。 よろしくお願いします。
- ベストアンサー
- XML
- インラインフレーム内でのテーブル位置指定が上手くいきません
インラインフレームを使用したホームページ作成中なんですが 一箇所だけどうしても解決できないことがあったので質問させていただきます フリー素材サイトのメニューテーブルを左上フレームに使用しているんですが htmlとスタイルシートを上手く使いこなせてないせいで メニューテーブルの位置指定ができずにいます テーブルは縦につなげるタイプのものです 左上フレーム内のright bottomに指定したいのですが上手くいきません 大変見苦しい点が多いとは思いますが どなたか解決策、アドバイス等ありましたらよろしくお願いいたします 【index.html】 <html><head>～</head> <frameset cols="220,*" frameborder="no" border="0"> <frameset rows="90%,10%" frameborder="no" border="0"> <frame src="menu.html" name="menu" scrolling="no"> <frame src="sita.html" name="sita" scrolling="no"> </frameset> <frame src="top.html" name="main" scrolling="auto" > </frameset> <body>～</body> </frameset> </html> 【menu.html】 <html><head>～</head> <body> <table id="left" cellpadding="0" cellspacing="0"> <h2>サイト名</h2> <tr><td><img src=".gif" width="80" height="47"></td></tr> <tr><td><img src=".gif" width="80" height="4"></td><tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><img src=".gif" width="80" height="16"></td></tr> </table> </body> </html> 【スタイルシート】 ～ #left{ width:180px; text-align:right; vertical-align:bottom; }
- ベストアンサー
- HTML
- テーブル高さ指定タグについて
テーブル高さ指定タグについて サイズがバラバラの４枚の画像をテーブルを使って同じ幅・高さ縦横各２枚並べて表示したいと思っています。 下記のとおり高さ・幅300と指定をしているにもかかわらず、400×400pixの画像が高さを超えて目いっぱい表示してしまいます。 <table border="1" width="600" height="600" cellspacing="0" cellpadding="0"> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_1.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_2.jpg"></td> </tr> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_3.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_4.jpg"></td> </tr> </table> どうすれば、すべて300×300pixの範囲内におさめることができるのでしょうか？
- ベストアンサー
- HTML
- tableの幅が指定幅になりません
外部ＣＳＳを使用して、下のようにtableの幅指定をしているのですが、幅が指定どおりのサイズになりません。windowsXPのIE7で確認しています。 ●ＨＴＭＬソース---------------------------- <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>***</title> <link rel="stylesheet" type="text/css" href="style.css" media="all" /> </head> <body class="otoiawase"> <div id="main"> <div class="recipie_space_large"> <table> <tr> <td rowspan="2" class="flow_ph"><img src="image/1.jpg" width="140" height="94" /><br /><img src="image2" alt="next" width="140" height="50" /></td> <th><img src="image3.gif" alt="" width="27" height="27" /><b>text</b></th> <td class="freespace" rowspan="2"></td></tr> <tr> <td>comment</td> </tr> </table> </div> </div> </body> </html> ●ＣＳＳソース（外部）---------------------------- *{ margin: 0; padding: 0; } #main .recipie_space_large{ width:730px; } #main .recipie_space_large table{ width:730px; } #main .recipie_space_large table{ border:1px solid #000000; } #main .recipie_space_large table th{ height: 27px; border:1px solid #000000; } #main .recipie_space_large td{ border:1px solid #000000; } #main .freespace{ width:80px; } #main .flow_ph{ width: 150px; } --------------------------------------------- http://www5a.biglobe.ne.jp/~satomi-h/test.html 表示結果↑ 画像が切れていますが、同じ現象です。 textと書いてある部分のセルの幅の高さを27pxにしているのですが、とても大きくなります。class指定にするなどしてみましたが、どれもこのサイズになってしまいます・・・ また、tdにボーダーの指定をしていますが、一番右側のclass="freespace"のセルにボーダーが表示されません。ＣＳＳの表記の仕方が悪いのでしょうか？わかる方がいらっしゃいましたらよろしくお願いします。
- ベストアンサー
- HTML
お礼
ご回答ありがとうございます。 蛇足でいただいた内容も承知しております。 このテーブルはレイアウトのための使用ではなく、 テーブル上に画像を表示しているだけのものです。 （この辺りの解釈については、ここでもめても仕方ないので、 そういうものだと思っていただければありがたいです） 提示していただいたマージンを設定する方法ですが、 同じようなhtmlをいくつも生成しておりまして、そのhtmlごとに 表示する右寄せ画像の横幅が異なるのです。 ですから、マージンの値を直接していすることなく適切なマージンを取る方法か、 右側に画像をあることを考慮して横幅いっぱいにテーブルを表示する方法 が必要になると思いますが、どちらの方法も分かりません。 なお、自分で試行錯誤してみていたところ、 <div class="center"> をやめて、テーブルに display:inline を指定したところ、 右寄せ画像の左側に表が入りました。 （FireFoxのみ、IEではやっぱり画像の下端まで空白になります） が、幅いっぱいに、というのが実現できず、各列が最小の幅になってしまいます。 解決策がありましたら、教えていただけないでしょうか？ <a href="img/e9.png"> <img style="float:right" src="img/5f.gif" alt="..." width="184" height="164" /></a> あああああああああああああああああああああああ いいいいいいいいいいいいいいいいい, <table cellpadding="0" width="100%"> <tbody><tr valign="middle"> <td align="right"><img class="middle" src="img/51.gif" alt="..." width="68" height="35" /></td> <td align="left"><img class="middle" src="img/57.gif" alt="..." width="85" height="35" /></td> <td class="right" align="right"> <img class="bottom" src="img/09.gif" alt="..." width="47" height="15" /> <a href="" id="0001_2008_003-01" name="0001_2008_003-01"><img src="img/a1.gif" class="right" alt="..." width="20" height="33" /></a> </td> </tr> </table>