DreamweaverMXのデザインビューが一部表示されなくなる

質問

DreamweaverMXのデザインビューが一部表示されなくなってしまい困っています。

どうして表示されなくなったのか具体的に言うと、

3カラムのレイアウトをdivを使いCSSで作成していました。firefoxで見るとフッターがメインコンテンツの上部にきてしまっていたので、高さを指定してあった「右メニュー」や「左メニュー」、また「メインコンテンツ」の部分のdivの高さをすべて「auto」にし、フッター部分のCSSに「clear: both;」を記入し、修正を図りました。

これでその問題は解決されましたが、その後、DreamweaverMXのデザインビューの一部（メインコンテンツ、3カラムの真ん中部分です。）が途中から真っ白になってしまっていて、そこに書かれていたテキストや画像等すべて真っ白で、デザインビューで作業できなくなってしまいました。

真っ白でも、その部分に書いたテキストはマウスで反転させたりすると黒くその部分が反転するので、テキスト等はそこにあるようですが、真っ白ですから、作業ができません。

コードビューで作業できますが、それではDreamweaverMXを使う意味がありません。デザインビューで作業できれば、非常にスピーディーに出来るので、こうなってしまい非常に困っています。

「すべてのビジュアルエイドを非表示」にしたら直ったこともあり、そうして見ましたが、今回は駄目です。

CSSコードの書き方に問題があるかもしれません。

以下が、そのCSSコードです。

/* container */

#container {
width: 900px;
margin-right: auto;
margin-left: auto;
text-align: left;
height: auto;

}

#incontainer {
width: 700px;
float: left;
height: auto;

}

/* メイン */

#main {
float: right;
width: 480px;
padding: 10px;
height: auto;

}

/* 左メニュー */

#ml {
float: left;
width: 200px;
height: auto;

}

#box-ml {
padding: 0px 0px 10px;
width: 200px;
float: left;
height: auto;

}

#ul-ml {
margin: 0px;
padding: 0px;
display: inline;
text-indent: 0px;
list-style-type: none;
text-align: left;
}

#li-ml-kg {
margin: 0px;
list-style-type: none;
padding: 0px;
display: block;
line-height: 26px;
background-image: none;
text-indent: 20px;
background-color: #66CC00;
border: 1px solid #CCCCCC;
color: #FFFFFF;
font-size: 13px;

}

#li-ml a {
margin: 0px;
list-style-type: none;
padding: 0px;
display: block;
line-height: 25px;
background-image: url(buttons/li-bg.gif);
text-indent: 20px;
font-size: 13px;

}

#li-ml a:hover {
margin: 0px;
list-style-type: none;
padding: 0px;
display: block;
line-height: 25px;
background-image: url(buttons/li-bg-m.gif);
text-indent: 20px;
color: #FF0000;
font-size: 13px;

}

/* 右メニュー */

#mr {
width: 200px;
float: right;
text-align: left;
height: auto;

}

#box-pick {
width: 180px;
padding: 10px;
border: 1px solid #CCCCCC;
margin: 0px 0px 5px;
display: block;
float: right;
height: auto;

}

#box-koshin {
display: block;
width: 180px;
padding: 10px;
border: 1px solid #CCCCCC;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
float: right;
height: auto;

}

#box-saishin {
display: block;
width: 180px;
border: 1px solid #CCCCCC;
padding: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
float: right;
height: auto;

}

#box-toiawase {
display: block;
width: 180px;
border: 1px solid #CCCCCC;
padding: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
float: right;
height: auto;

}

#box-counter {
display: block;
width: 180px;
padding: 10px;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
float: right;
height: auto;

}

/* フッター */

#footer {
background-color: #66CC00;
height: 50px;
width: 900px;
margin-right: auto;
margin-left: auto;
color: #FFFFFF;
padding-top: 18px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
　　　 clear: both;
}

何が原因なんでしょうか？
宜しくお願いいたします！

回答No.3

abril · ベストアンサー

> ご指摘通り、その辺りの記入方法が違っているから、ドリームウィーバーでメインカラムが途中から白くなってしまうようなバグ？らしき状態になっているのかもしれません。

いえ、あれは本件のトラブルとは関係があるものとして指摘したわけではなく、単に文法上の間違いや妥当でない箇所をリストアップしてみただけです。ご期待に添う様なものではなくて申し訳ありませんが、勿論修正するにこした事はないです。

> この問題の原因が、カラムを作っているdiv要素の高さを削除したことによりますから、もう一度、高さを指定すれば元に戻りますが、そうすると、真ん中のメインカラムのコンテンツが長いとコンテンツがフッターまで突き抜けてしまいます。

heightを指定するなら、実際の内容がその高さを超えてしまった時の対処も併せて指定しておかないとなりません。対処というのは、「はみ出す量に達したらスクロールバーを出して表示／はみ出させる／はみ出した分を隠す」の何れかです。ただし、本件は多くのコンテンツと同じく、それぞれのカラムの高さは成り行き（内包する要素が可変であるテキストの為）という仕様ですから、各カラムに高さを指定した場合は、対処として妥当なのは「スクロールバーを出して表示」しかない事になります。でもそれはおそらく質問者様が望まれるデザインの状態ではないでしょう。
ということで、#containerに指定してある"height: 1500px;"は削除して下さい。

お役ごめんになっていたMXを復活させて、現在の最新のソースを表示させて検証してみましたら、確かに質問者様と同一の不具合が確認されました。
どうもMXではfloatを多用している事で、デザインビューでの描画が追いつかなくなっている様に思われます。
※floatを指定しているdiv要素「の高さを削除」しなければOKだという事であれば、予め具体的数値で高さを同時に指定してあればとりあえず計算できて描画してくれる、という事かもしれませんが。

試しに、incontainer、main、ml、mrのfloatの指定を全部外してみましたら、当然カラム表示ではなくなって一列になってしまいますが、内容そのものはちゃんと描画されました。
後続のMX2004では先日試した通り、右カラムのレイアウトが崩れてはいますが、mainを初めとしてそれぞれの領域の内容は選択・編集ができる様には描画されています。

MXぐらいの時代だと、ハイブリッド・レイアウト（CSSは使用するが、基本的なカラム・レイアウトの部分はtableで行う）程度をメインに据えて開発をしていたのかもしれません。

今回の不具合の原因は、このMXというバージョンの限界だと思われます。
で…

やっかいなのは、今回のご希望がブラウザでの実際の表示の不具合解消（前回指摘した通り、UAによる描画領域の解釈違いはありますが大崩れするには至ってないですし、何より質問者様はその点を修正されたいわけでもないので）ではなく、デザインビューでの描画という事なので、こちらとしてはこれ以上対処の仕様がありません。

なのでアドバイスとしては、

・Dreamweaverのバージョンをアップしてfloatを駆使したコンテンツの描画にも耐えうる様にする。
ちなみに、MX2004の更にあとの8だと、現状（floatを多用しているが高さは成り行きのまま）でもデザインビューとブラウザでの表示はほぼ同じ様になりました。

という事になってしまうのですが…
もし、どうしてもMXを使い続けるのであれば：

・floatを多用するカラムレイアウトは諦めてハイブリッド・レイアウトにする。
・デザインビュー上での作業の時だけCSSで一時的にincontainer、main、ml、mrのfloatの指定を隠す。作業が終了した時は勿論復活させる。
・デザインビューでの作業を諦め、コード編集とブラウザでの表示確認をひたすら行う。

という、まああまり現実的でないアドバイスしかできないですね。

お礼

返信ありがとうございます。

今回、色々なアドバイスをいただきたすかりました！ここまで詳細に解説していただけたこと本当に感謝しております。

私のこの質問のために相当な時間を費やしていただいたのではと本当にただただ感謝しております。良い人にめぐり合えて本当に良かったと思っております。

この「教えてgoo」のポイント制が20ポイントが限度なのが残念ですが、1000ポイントぐらいの価値あるアドバイスだと思っております。

私のこのドリームウィーバーは限界のようですね。ちょうどバージョンアップを考えようとしていたところです。早急にバージョンアップしてみたいと思います。

どうも、ありがとうございました！

回答No.2

abril

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属性の記入の仕方を調べていました。いまいちよく理解できません。今度はネットでその辺の基本情報を探して、読んで見ます。

たぶん、ご指摘通り、その辺りの記入方法が違っているから、ドリームウィーバーでメインカラムが途中から白くなってしまうようなバグ？らしき状態になっているのかもしれません。

尚、履歴から探していただいたサイトが問題のサイトです。

私の方、まだ作業の途中ですが、さしあたりお礼申し上げたくてこちらに書きました。ありがとうございます。

回答No.1

abril

デザインビューは実際のブラウザ上での表示とは同一にはならない事が多々あります。特に、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/

解決策が他にあれば、ぜひともよろしくお願いします！