- ベストアンサー
DreamweaverMXのデザインビューが一部表示されなくなる
- DreamweaverMXのデザインビューで一部表示がされなくなってしまいました。
- 問題は解決された一方で、デザインビューの一部が真っ白になってしまい、作業ができません。
- CSSコードの書き方に問題がある可能性があります。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- abril
- ベストアンサー率69% (388/560)
ANo.1です。本件のトラブル解決とは直接関係ありませんが、追記です。 過去質問文中から質問者様の実際のサイトと思われるものを拝見しました。もし、これの事であればDOCTYPEがHTML 4.01 Transitional（システム識別子なし）で、後方互換モードになるので、IE6/7とFirefox等ではボックスの幅計算が異なります。 IE6/7は後方互換モードでは、widthの中に左右のpaddingやborderの値も含めて計算してまうので、ボックス自体の幅が180px、ボックスの内部の要素（テキストなど）は、180－10×2＋1×2＝158pxとなり、一方のFirefox等は後方互換モードでも標準準拠モードの時と同じ様に描画しますので、描画領域は202pxで変わりません。依って、IE6/7とFirefox等とでは右のカラムの見え方はかなり異なる事になります。 ただ、この実際のソース（と思われるもの）をMX2004上のデザインビューで見ても、やはり「（メインコンテンツ、3カラムの真ん中部分です。）が途中から真っ白」という状態にはなりませんでした。追記した右カラムの部分がメインカラムの下に落ちて更に崩れて表示される、という状態が確認されたのみです。 あと、このソースを見て修正すべき点を二つ。 ・左カラムのメニュー等で使用しているコメントの記述が正しくありません。ハイフン1つではいけません。 ×<!-ml-> ○<!-- ml --> ・カウンター表示部分の記述だけがXHTMLの形式になっています。HTML4.01 Transitionalでは空要素タグimg、br等を<img～ /><br～ />とは記述できあｍせん。 ・<li><a href="～" align="right">サイトマップ</a></li>となっていますが、a要素にalign属性はありません。テキストを右寄せしたいのであれば、親要素のliに適用を。
お礼
追記ですが、 回答者様の回答にMX2004とありますが、私のドリームウィーバーはMX2004ではなくMXです。MXでもMX2004でも表示が同じかどうかわかりませんが、一応、お知らせしたほうが良いかなと思い、大変恐縮ですが書きました。 よろしくお願い申し上げます。
補足
すばらしい回答、ありがとうございます！ 非常に詳細な回答で、本当にたすかっています！ とりあえず、一回目に回答いただいた点の修正を終えたところです。 しかし、まだドリームウィーバー上のデザインビューではメインカラムが途中から真っ白く表示されてしまっています。 現在、2回目の回答いただいた修正点を修正し、もう一度チャレンジしています。 本屋に行ったり、自分が持っている本を読んだりして、ご指摘のidとclass属性の記入の仕方を調べていました。いまいちよく理解できません。今度はネットでその辺の基本情報を探して、読んで見ます。 たぶん、ご指摘通り、その辺りの記入方法が違っているから、ドリームウィーバーでメインカラムが途中から白くなってしまうようなバグ？らしき状態になっているのかもしれません。 尚、履歴から探していただいたサイトが問題のサイトです。 私の方、まだ作業の途中ですが、さしあたりお礼申し上げたくてこちらに書きました。ありがとうございます。
- abril
- ベストアンサー率69% (388/560)
デザインビューは実際のブラウザ上での表示とは同一にはならない事が多々あります。特に、CSSでfloatやpositionなどを複雑に組み合わせて使っていたりハックが入っていたりすると、デザインビュー上では表示が追いつけない傾向にある様です。なので拘っても仕方のない面もあるのですが、今回はデザインビューがきちんと見える事をお求めだという事ですのでその点は言及しません。 ただ、質問者様のソースでダミーファイルを作ってMX2004上で見る限りでは、 > （メインコンテンツ、3カラムの真ん中部分です。）が途中から真っ白になってしまっていて、そこに書かれていたテキストや画像等すべて真っ白で、デザインビューで作業できなくなってしまいました。 という症状は起こらないのです（他の問題は起きてますが）。 > 何が原因なんでしょうか？ 多分ですが、原因は一つではないのかもしれません。数々の間違いや不適切な指定が重なった上で生じている場合もあるので…失礼ながら、最近の質問者様の他の質問を拝見させて頂くと(X)HTMLとCSSの基礎の基礎を理解しておられない部分が見受けられます。 --------------------------------------------------------------------- http://oshiete1.goo.ne.jp/qa4985612.html →一見解決してる様に思われたかもしれませんが、同じファイル（ページ）内に同一idが重複して出てくる事は文法違反です。 上記の場合、<li id="li-ml-kg">～</li>や<li id="li-ml">～</li>はidではなく、classとして定義されるのが正解（セレクタを見直せばclassすら不要にできる可能性もあり）です。 http://oshiete1.goo.ne.jp/qa4985584.html →こちらは既にご回答が付いている通りです。文字コードはファイル内の文字コード指定の”記述”部分を変更すれば変わるわけではありません。”ファイル自体の”文字コードを変換しなければ、ファイル内での文字コード指定とファイル自体の文字コードが食い違う事になり、文字化けは必須となります。 --------------------------------------------------------------------- なので、本件についてはトラブルの実際の原因となる情報が不足している可能性がある為、CSSを見て気になった点のみ挙げておきます。 ・idとclassの違いを理解して、決まり事に沿って使用。 ・#footerに付け加えた"clear: both;"の前に全角スペースが入っています。このままだとこの部分の指定は無効です。 ・heightの初期値はautoですので、このCSSを見る限り"height: auto;"指定は全て不要です（記述を省略して良いという事です。ちなみにこのautoの値は、ボックス内の内容量に応じて伸び縮みするだけで、内容量が少なくてもフッター部分まで自動的に伸ばしてくれるという役目はしてませんのでご注意を。） あとは、(X)HTML側のマークアップはbody直下は以下の様な感じになっているのではないかと思いますので、その前提で話をしますが： <!-- container開始 --> <div id="container"> <!-- incontainer開始 --> <div id="incontainer"> <!-- main開始 --> <div id="main">メイン</div> <!-- main終了 --> <!-- ml開始 --> <div id="ml"> <div id="box-ml"> <ul id="ul-ml"> <li><a href="#">左メニュー1</a></li> <li id="li-ml-kg">左メニュー2</li> <li><a href="#">左メニュー3</a></li> </ul> </div> </div> <!-- ml終了 --> </div> <!-- incontainer終了 --> <!-- mr開始 --> <div id="mr"> <div id="box-pick">右メニューピックアップ</div> <div id="box-koshin">右メニュー更新</div> <div id="box-saishin">右メニュー最新</div> <div id="box-toiawase">右メニュー問い合わせ</div> <div id="box-counter">右メニューカウンター</div> </div> <!-- mr終了 --> <!-- footer開始 --> <div id="footer">フッター</div> <!-- footer終了 --> </div> <!-- container終了 --> ・右メニュー#mrの幅が200pxなら、子要素の#box-pickなどは実際には 180（内容量のwidth）＋10×2（左右paddingの幅）＋1×2（左右borderの幅）＝202px となる為、子要素の方が描画領域が親要素より幅広くなってはみ出す為、レイアウトが崩れます。#box-counterだけはborderがないのでOKですが。 ・#box-pick等は上記の様にdiv等のブロック要素でマークアップしているのであれば、 "display: block;"は不要です（span等インライン要素でマークアップしているのであれば、この指摘は無視して下さい）
補足
色々試しましたが、結局わかりませんでした。 これ以上、修正のしようがないですし、手の打ちようがないように思えます。 この問題の原因が、カラムを作っているdiv要素の高さを削除したことによりますから、もう一度、高さを指定すれば元に戻りますが、そうすると、真ん中のメインカラムのコンテンツが長いとコンテンツがフッターまで突き抜けてしまいます。 一応、問題のサイトのURLを書いておきます。 URL http://www.hoken-johokyoku.com/ 解決策が他にあれば、ぜひともよろしくお願いします！
お礼
返信ありがとうございます。 今回、色々なアドバイスをいただきたすかりました！ここまで詳細に解説していただけたこと本当に感謝しております。 私のこの質問のために相当な時間を費やしていただいたのではと本当にただただ感謝しております。良い人にめぐり合えて本当に良かったと思っております。 この「教えてgoo」のポイント制が20ポイントが限度なのが残念ですが、1000ポイントぐらいの価値あるアドバイスだと思っております。 私のこのドリームウィーバーは限界のようですね。ちょうどバージョンアップを考えようとしていたところです。早急にバージョンアップしてみたいと思います。 どうも、ありがとうございました！