• ベストアンサー

DreamWeaverでテーブルをCSSにした場合にずれます。

DreamWeaverを使い始めました。 CSSの段組左にテーブルを入れると下記のようになりました。 ----------------------- <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- #wrap { width: 500px; } #content { float: left; width: 200px; background-color: #00CCCC; } #main { width: 300px; float: left; background-color: #99FF99; } #footer { clear: both; width: auto; background-color: #CCFF66; } --> </style> </head> <body> <div id="wrap"> <div id="content"> <table width="200px" border="0" cellspacing="0" cellpadding="0"> <tr> <td>1段</td> </tr> <tr> <td>2段</td> </tr> </table> </div> <div id="main">メインメインメインメインメイン</div> <div id="footer"> 下</div> </div> </body> </html> -----↑ここまでDreamWeaver そこで、CSSでテーブルにボーダー0の値を入れて、タグからborder="0"を消すと、段組右側が左の下にずれて表示されます。 ブラウザプレビューでは正常ですが、編集しにくくて困ってます。 table { border: none; border-collapse: collapse; } DWでは、このようになるものなのでしょうか。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.4

#3です。 画像を入れてみたところ、おっしゃるような表示になりました。 ここからは推測ですが、Dreamweaverの表示方法の解釈によってこうなってしまったのではないかと個人的には思います。(元々デザインビューはDreamweaver独自の表示方法ですし、何かのブラウザとそっくり同じという表示はしてくれません。) ご承知のように table の borderプロパティ は、デフォルトで 1 が設定されています。 border="0"を削除した時に、既にCSSで"0"設定されているにもかかわらず、デザインビューがそのデフォルト border="1"を確保しようと変に頑張っているのではないかと…(^_^; だからテーブルが左右で2px分大きくなり、中身の幅が画像で固定されているのでそのしわ寄せで右ボックスが落ちた… 実際、HTMLで border="0" かつ CSSで border を 1 にすると、IEで同じような表示になります。 と言いつつ本当の所は分かりませんので、こんなことを思う人もいる、程度にお考え下さい。

shizuku
質問者

お礼

たびたび、ありがとうございました。 確かにモードを「標準」から「レイアウトモード」にするとテーブルのサイズの横にカッコ書きで2px多い数字が出ています。 NowThinkingさまの説が正しいような気がします。 ずれたままではデザインビューの役目が果たせないので、とりあえずはDWの通りにして、あとから削除置換しようと思います。 ありがとうございました。

その他の回答 (4)

  • partita
  • ベストアンサー率29% (125/427)
回答No.5

DWのデザインビューは過信しないほうがいいですよ。 DW8でさえ変な表示をします。 実際にブラウザで検証することが一番です。

shizuku
質問者

お礼

プロの方が多く使っているソフトということで「こんなはずない」と過信していたのかも知れません。 ありがとうございました。

回答No.3

Dreamweaverのバージョンはいくつでしょうか? 少なくとも私の環境(WinXP、Dreamweaver8)のデザインビュー上では、ずれたりせず、問題なく表示されています。

shizuku
質問者

補足

検証をありがとうございます。 私も同じ環境です。 が、すみません、タグの漏れがありました。 各tdにはtableの横幅サイズと同じ200pxの画像を入れています。 どうでしょうか?

  • suzuko
  • ベストアンサー率38% (1112/2922)
回答No.2

デザインビューが左にずれるのでしょうか? それならば、パネルとビュー画面の間の三角をクリックすれば、パネルが閉じてビュー画面が大きくなり、きちんと表示されませんか? あれ? 違う意味?

shizuku
質問者

お礼

違うようです・・。原因はたぶんborderだと思います。 ありがとうございました。

回答No.1

 んなもんですねぇ タグ打ちのソフトではなく、画像などをマウスで直接動かして編集する(できる)ソフトですから、タグの整列の事まであまり気にしていません。

shizuku
質問者

お礼

そうだったのですか・・・。 ユーザのみなさんも、こうしたリイアウトの場合はずれたままの編集かborder0の指定をタグのほうに入れて作業されているのですね。 ありがとうございました。

関連するQ&A