- ベストアンサー
table周辺の隙間をなくしたい。
ヘッダーのバーとすぐ下のtableの間の隙間を無くしたいのですが、どうすれば良いのでしょう。 margin属性を調整すれば隙間を無くせるブラウザもあるようですが、ＩＥはどうしてもダメなのではないでしょうか。なによりも、ブラウザ次第で隙間の大きさが違うのに困っています。 ***** test_06.html ***** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>只今お勉強中！</title> <link href="test_06.css" rel="stylesheet" type="text/css"> </head> <body> <img class="header" src="header_01.jpg" alt=""> <table class="main"> <tr class="logo"> <td class="01"> <img class="logo" src="logo.jpg" alt=""> </td> <td class="02"> <div></div> </td> </tr> </table> </body> </html> ***** test_06.css ***** body { margin-top: 0px; text-align: center; background: url("header_back.gif") repeat-x; background-color: #CBE5FF; } img.header { margin: 0px auto; width: 820px; display: block; } table { margin: 0px auto; width: 860px; background: url("wrapper_01.gif") repeat-y; } td { margin: 0px; padding-left: 20px; width: 352px; float: left; } img.logo { width: 352px; margin: -3px 0px -3px -3px; }
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
もしかしてマイナスマージンを指定していることと関係あるのでしょうか？ テーブルのセルの間隔などを指定するプロパティが用意されているので、それを使えば解決するのではないでしょうか。 imgのマイナスマージンを消してtableにborder-collapse:collapse;を追加します。
その他の回答 (8)
- abril
- ベストアンサー率69% (388/560)
ANo.7-8です。ANo.7のお礼を読みました。 現在の http://makoji.web.fc2.com/test/test_06/test_06.html も拝見させて頂きました。 その上で、おせっかいかなあとも思ったのですが、2点だけ気になる箇所があったのでもう一度だけレスさせて頂きます。 img.logoとdiv.comentの"float: left;"との指定の意図は何でしょうか？ この指定だとimg.logoとdiv.comentは「左に浮いた」状態になっているので、もしも親要素の同じセル内でそれぞれに続く要素があった場合、続く要素（例えばテキストなど）は回り込む事になり、想定しているレイアウトは崩れます。以下の様に試しにテキストを入れて見たりすると現在どういう状態になっているかがよくわかるのではないかと思います。 --------------------------------------------------------------------- 【http://makoji.web.fc2.com/test/test_06/test_06.html】 --------------------------------------------------------------------- （省略） <tr class="logo"> <td class="logo"> <img class="logo" src="logo.jpg" alt="">ロゴに続く要素 </td> <td class="coment"> <div class="coment">コメント</div>コメントに続く要素 </td> </tr> （省略） --------------------------------------------------------------------- 内容からして、上記の様に要素が続く事は考えておられないとは思いますが、質問者様が現在のヴァージョンで実現したかった事は： (1)<img class="logo"～>を<td class="logo">～</td>のセルに隙間無くぴったり収めたい (2)<div class="coment">～<div>を<td class="coment">～</td>のセルの左端にぴったり寄せたい という事だけなのではないでしょうか？img.logoとdiv.comentの"float: left;"だけ削除した状態にしてみた時にIEで起こる表示結果から想像したのですが。 もしそうであるなら、IEでは"float: left;"の追加で「一見」問題が解決している様に見えたかもしれませんが、先述の説明とサンプルの通り（「浮かせる」必然性がある様には見えないので）適切な解決にはなっておりません。(1)(2)の状態を求めるだけならば、一例としてCSSを以下の様に変更すれば解決します。 --------------------------------------------------------------------- img.logo { width: 352px; height: 55px; vertical-align: bottom;←追加 （"float: left;"を削除） } td.coment { padding: 0px; background-color: red; text-align: left;←追加 } div.coment { background-color: green; margin: 0px; padding: 0px; height: 55px; width: 468px; （"float: left;"を削除） } --------------------------------------------------------------------- 最後に。 > 画面の真ん中に全ての要素を綺麗にならべるのに、tableを使ったらどうなるか試してみたかったのですが、tableをそういう用途で使用することがあまりお薦めでないなら、このくらいの段組全体にtableを用いるべきではなさそうですね。 そうですね。あくまでtableは論理的意味は「表」であり、段組レイアウトをする為に用意されている性質のものではありませんので、この場合であればやはりtableでのマークアップは相応しくないと思われます。 > それにtableを使ってみて、divブロックを並べていくのと比べて、それほどコードが簡便になるということではなさそうですし。 適切なマークアップ（「ブロックを並べ」るのに相応しいのはdivとは限らない場合も多いです）をした上で、適切なスタイルを与えられれば、大概のレイアウト（(X)HTML向きのデザインを大きく逸脱したものでなければ）は解決できますので、頑張ってみて下さい。
お礼
左の画像を下げたら右の画像を含めて全体が上に締まるという発想は今の私にはありませんでした。text-alignとfloatの違いも今まであまり意識していませんでしたし、とても勉強になりました。 ありがとうございます。
- abril
- ベストアンサー率69% (388/560)
ANo.7です。 今改めてやりとりを見直していたら、ANo.5様が「テーブルの内部の画像って logo.jpg のことですね？」とおっしゃってますが、ANo.4の補足でレスされていた「ＩＥではやはり隙間が残ったまま」「テーブルの内部で、画像との間に隙間が生じている」というのは、ヘッダー画像<img class="header" src="header_01.jpg" alt="">ではなく、セル内のロゴ画像<img class="logo" src="logo.jpg" alt="">の事だったでしょうか？ もしそうなら、その件は本来のご質問内容とはまた別の現象ですので特に触れませんでしたが、先程の修正版のサンプルで見る限り、IEと他のブラウザとの差は、<img class="logo" src="logo.jpg" alt="">の水平方向の位置が<td class="01">のセルの領域に対して”左寄せ”になっているか”センタリング”になっているかの差だけですが（ただこの現象であればむしろ、IEの方が「隙間がない」という状態に相応しいので、ちょっとレスの字面と矛盾してしまうのですが）。 仮にこの事であるなら、tdのスタイルとして"text-align: left;"を追加すれば一律で（paddingで設定された様に）セルの左端から20pxの位置で揃います。 追記："td.01"の様に数字で始まるクラス・セレクタは無効になりますので、このクラス・セレクタに某かのスタイルを別途用意（提供されているCSS内には見当たらないので…）されているならば"td.data01"などの様にアルファベットで始まるクラス名を付けて下さい。
お礼
コードは次のURLのソースのように直しました。 http://makoji.web.fc2.com/test/test_06/test_06.html 確かに「border-collapse: collapse;」で隙間が小さくなりました。一度試してダメだったんですけど、多分スペルミスでもしていたのでしょう。 でも、それでも１pxほどの隙間が残ったので、div.comentを「padding: 0px;」としたら隙間がなくなりました。 ありがとうございます。 今、練習で既にあるサイトを勝手に真似ているのですが、その元のサイトが次のURLです。 http://gshop2.com/main/ 画面の真ん中に全ての要素を綺麗にならべるのに、tableを使ったらどうなるか試してみたかったのですが、tableをそういう用途で使用することがあまりお薦めでないなら、このくらいの段組全体にtableを用いるべきではなさそうですね。 それにtableを使ってみて、divブロックを並べていくのと比べて、それほどコードが簡便になるということではなさそうですし。 お手数をおかけしました。 ありがとうございます。
- abril
- ベストアンサー率69% (388/560)
ざっと質問と回答の経過を見たところ、各回答者様からのアドバイスを「正しく組み合わせた修正」さえしていれば、既に解決に至っていたのではないかと思われますが… 現状がどうなっておられるのかわからないので、とりあえず今回はANo.5の補足で質問者様が書かれているHTML（test_06.html）＆CSS（test_06.css）が最終ヴァージョンと仮定した上で、HTMLのサンプルはそのままで、CSSの方のみ修正を加えてみました。あくまで現在のHTML（test_06.html）の文書構造に手を加えないで…という事なら、CSSを下記の様に変更すればお悩みの症状は改善されると思います。 検証環境はIE6/7、Firefox2/3、Safari3、Opera9.61、Google Chromeです。 --------------------------------------------------------------------- 【test_06.cssの修正版】 --------------------------------------------------------------------- body { margin-top: 0px; background: url("header_back.gif") repeat-x #CBE5FF;←（特に分ける意図がないのであれば）background-color属性もまとめた方がすっきりします } div.main { margin: 0px; padding: 0px; text-align: center; } img.header { display: block;←★ブロック要素化 width: 820px; margin: 0px auto; } ※"padding: 0px;"は（初期値が0なので）不要。 table { margin: 0px auto; width: 860px; border-collapse: collapse;←★このプロパティを指定しないと、初期値が分離モデル"separate"の為、セルの間隔が0ではなくなり（tdとtdとの間に更に見えない隙間の様なものができる仕様と思っておいて下さい。paddingとは別物です。）、今回のスタイルには不都合と思われます。 background: url("wrapper_01.gif") repeat-y; } ※"padding: 0px;"は（元々paddingは与えられていないので）不要。 ※"border-spacing: 0px;"は、border-collapseプロパティの値が"separate"の時だけ有効であり、またIEでは実装されていないので今回は不要。 ※tr {～}の指定部分は丸ごと削除。trはmargin及びpaddingプロパティの適用対象にならないので、無効。 td { padding: 0px 0px 0px 20px; width: 352px; } ※tdはmargin及びfloatプロパティの適用対象にならず無効なので、それらを削除。 img.logo { width: 352px; } ※"margin: 0px;"、"padding: 0px;"は（それぞれ初期値は0なので）不要。 --------------------------------------------------------------------- 本件の現象の直接の原因は、★の部分のみですが、←や※で示した箇所は、オリジナルのCSSに不足していた指定及び不要（無効を含む）な指定ですのでこの際修正された方が宜しいでしょう。 > ＩＥでは、ヘッダーの画像とテーブルの間の隙間は解消されているようです。テーブルの内部で、画像との間に隙間が生じているようです。 ANo.4様の「3 <img class="header" src="header_01.jpg" alt=""><table class="main"> と続けてみる。(間に空白も改行も入れない)」をHTML側に適用したのだとしたら、<img>と<table>の2要素間に改行コードが入らないので、その結果「ヘッダーの画像とテーブルの間の隙間は解消」されたのでしょうが、border-collapseプロパティが指定されていなかったのでIEでは初期値である"border-collapse: separate;"と実装されていない"border-spacing: 0px;"の組み合わせとなってしまっていた為、セル間の隙間が全くの0ではなくなり「テーブルの内部で、画像との間に隙間が生じて」いたのでしょう（ANo.2様とのやりとりで疑問に思われていた問題は、これに依るものです。）。 ちなみに、上記の★で追加した様に、img.headerをdisplayプロパティでブロック要素化しておけば、最初のサンプルの様に<img>と<table>の2要素間に改行コードが入ったHTMLソースであっても「ヘッダーの画像とテーブルの間の隙間」はできません。 何故か…という説明は省略させて頂きますので、ご興味があったら「ブロック要素／インライン要素」などのキーワードで調べてみて下さい。(X)HTML文書を正しく理解する為の最も重要なポイントの一つです。 「ブラウザ次第で隙間の大きさが違うのに困っています。」については、確かにそういう場合もないわけではないすが、「隙間をなくす」というこの程度のスタイルであれば、指定が適切であれば主要モダン・ブラウザブラウザ間の差は吸収できます。本件においてはやはりCSSの各プロパティの指定が適切ではなかった事が原因です。 それから、CSSに対する正確な理解がかなり不足しておられる（例えば質問者様のオリジナルの指定の様に、実際にtdがfloatできたりしたら大変な事になってしまいますよ…）様に見受けられますので、ちょっと混乱されてしまったのではないでしょうか。一度CSSの仕様を段階を踏んで学ばれておく事をお奨めします。覚えるまでは、各プロパティがどの要素の適用対象になっているかを確認しながらスタイルを設定して行く習慣を付けておく方がいいですよ。 あとは補足というか蛇足です。ANo.1様とANo.3様の”bodyの直下にimgは置けない”というご指摘は、質問者様の現在のHTML文書がANo.5の補足にある通りのDOCTYPEであるならば、質問者様が「文法チェックもしてみましたが、これでエラーは出ない」とレスされた通り、違反ではないですね。Another HTML-lint gatewayでもパスします。ただし、これよりより厳密な文法を必要とするDOCTYPEでは違反ですので、今からでもimgに対して某かの子要素として位置づけられるマークアップを意識されておいた方がベターかとは思いますが（例えばこの場合であれば、画像のネーミングからして「見出し（タイトル）」の様に思えますので、もしそうであれば<h1><img class="header" src="header_01.jpg" alt=""></h1>という様に。）。 それから、現在のロゴを収めるテーブルのマークアップについて色々やりとりがある様ですが、実際にこのtable部分に入る他の要素の情報が不足している以上、このマークアップが（少なくとも現段階の情報では）適切か否かは判断できません。ただ、もし真実「表」が相応しい内容でなかった場合は…次の機会にでも見直されてみるのがいいですね。勿論、「表」が相応しい内容であるならそのままで結構です。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
≫heder.jpgとlogo.jpgの間に『<h2>見出し</h2>』だの『<p>文章</p>』だの入れて、どうやって二つの画像の間の隙間をなくそうと言うのか・・・ ちゃんとしたHTMLなら、いとも簡単に出来ることを、HTMLがおかしいから、苦労するのです。 実際に使用されている画像のPATHとサイズ、そして、文章構造にしたがってマークアップしたHTMLを例を参考に示してください。すなわち、文章なり画像が意味を持つものなら、それを含めてということ。 携帯で画像なしで表示して意味が取れるということ ≫本を読んで分からないから相談しているんです。 わたしも本は書きますが？tableでもないのに、tableを使って説明してある本なら捨てなさい。
- zxcv0000
- ベストアンサー率56% (111/196)
テーブルの内部の画像って logo.jpg のことですね？ td のスタイルに left 以外の padding が見当たらないのですが、私の見落しでしょうか？ # IE ではデフォルトがゼロで無かった様な記憶が...
補足
コードを以下のように書き換えてみてもやはりＩＥではだめですね。 どうしてなのでしょう。 ***** test_06.html ***** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>只今お勉強中！</title> <link href="test_06.css" rel="stylesheet" type="text/css"> </head> <body> <div class="main"> <img class="header" src="header_01.jpg" alt=""> <table class="main"> <caption align="bottom"></capion> <tr class="logo"> <td class="01"> <img class="logo" src="logo.jpg" alt=""> </td> <td class="02"> <div></div> </td> </tr> </table> </div> </body> </html> ***** test_06.css ***** body { margin-top: 0px; background: url("header_back.gif") repeat-x; background-color: #CBE5FF; } div.main { margin: 0px; padding: 0px; text-align: center; } img.header { margin: 0px auto; padding: 0px; width: 820px; } table { margin: 0px auto; padding: 0px; width: 860px; border-spacing: 0px; background: url("wrapper_01.gif") repeat-y; } tr { margin: 0px; padding: 0px; } td { margin: 0px; padding: 0px 0px 0px 20px; width: 352px; float: left; } img.logo { margin: 0px; padding: 0px; width: 352px; }
- zxcv0000
- ベストアンサー率56% (111/196)
私なら、以下の試行錯誤をすると思います。 1 TABLEのstyleに padding-top: 0px; を追加。 2 TABLEタグの直後に <caption align="bottom"></capion> を追加 3 <img class="header" src="header_01.jpg" alt=""><table class="main"> と続けてみる。(間に空白も改行も入れない) # 以前、<caption align="top"> を持ったテーブルで、 caption の上の余白・下の余白を Firefox と IE6 で同一にするのにえらい苦労しました。
補足
captionの件は失念していたので、<caption align="bottom"></capion>は助かりました。 でもＩＥではやはり隙間が残ったままです。 ＩＥでは、ヘッダーの画像とテーブルの間の隙間は解消されているようです。テーブルの内部で、画像との間に隙間が生じているようです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
いやはや・・。 W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/ )のにあるように、 「メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。」 <body>要素には、 <!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body --> と、ブロック要素およびins,dellしか含まれないと書かれている。 ≪7.5.1 BODY要素/HTML 4.01 仕様書 (邦訳) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) 最低限、仕様書くらいは目を通さなきゃ・・ そこには、＿＿_＿＿(以下引用) こうしたテクニックは、・・・【中略】・・・すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。 ・・・【中略】・・・ * テキストを画像に置き換えて表現する。 ・・・【中略】・・・ * ページレイアウトの目的で表を用いる。 ・・・【中略】・・・ こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで なら、このようなHTML(文字を画像で置き換えたり、tableで配置したり)にはならないはず。 ≫mgタグはインライン要素なので、display属性を使ってブロック化しました。 スタイルシートでdisplay:blockとしても、HTML構文の不正を直せるわけじゃない。 ≫文法チェックもしてみましたが、これでエラーは出ないようです。 Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )ですか?。ありえません。 ★正しいHTMLを書きましょう。 検証システムは、構造的解析は出来ても、内容的に正しくマークアップされているかについてはチェックできない。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 単純にDTD的にValidだというだけじゃつまらない。構造的にというか、文書として真に妥当たりえているかって辺りまで、とりあえず意識だけでも常々したいところだ。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Valid HTML/XHTML - I'll sleep on it.( http://homepage1.nifty.com/VET06031/web/lint100.html )］より よって、わたしの回答はあなたの求めている回答ではありませんが・・・ あなたはとっても回り道をしているようなので、あえて・・ ≫table周辺の隙間をなくしたい。 の方法はありますが、このHTMLの場合はその技術は不要です。 まず、 「CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTML」に書き直しましょう。 たとえば、 <body> <h1><img class="header" src="header_01.jpg" alt="****のページ"><span>****のページ</h1> <h2>見出し</h2> <p>文章</p> ・・・・・・・・・・・【中略】・・・・・・・・ <div class="Logo"> <p><<img class="logo" src="logo.jpg" alt=""></p> </div> </body> </html> とか・・・。 【正当なHTMLが出来てから、CSSをどう書くか】 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
補足
ご忠告、ありがとうございます。 ただ正しいHTMLを、として例示された記述が 『 例えば <body> <h1><img class="header" src="header_01.jpg" alt="****のページ"><span>****のページ</h1> <h2>見出し</h2> <p>文章</p> ・・・・・・・・・・・【中略】・・・・・・・・ <div class="Logo"> <p><<img class="logo" src="logo.jpg" alt=""></p> </div> </body> </html> 』 heder.jpgとlogo.jpgの間に『<h2>見出し</h2>』だの『<p>文章</p>』だの入れて、どうやって二つの画像の間の隙間をなくそうと言うのか・・・ 上記の例えは純粋なる一般論でHTML文を例示しただけですよね。 そうすると、全体として、本でも読んだら・・・という程度の内容にしかなっていないんですよ。本を読んで分からないから相談しているんです。
bodyのすぐ下にimg要素は置けませんp要素などを使った方が良いです。 <p><img class="header" src="header_01.jpg" alt=""></p>
補足
imgタグはインライン要素なので、display属性を使ってブロック化しました。文法チェックもしてみましたが、これでエラーは出ないようです。 一応divタグで囲んでみましたが、ＩＥでは隙間がなくならないようです。firefox、safari、opera、chromeではmarginの調整で隙間がなくなるようです。 全てのブラウザに共通する解決方法はないものでしょうか。
補足
border-spacing:0px;とやると、マイナスマージンを指定しなくてもsafari、firefox、opera、chromeでは問題なく表示されるようです。 デザイン上の根拠が無いのに、ブラウザの都合でマイナスマージンを使うというのは、ブラウザも星の数ですので、知らないところでおかしな表示を生じてしまう可能性があります。こちらの記述の方がスッキリしていいですね。 ありがとうございます。 ただＩＥだけはまだ隙間が残っているんです・・・