- ベストアンサー
DreamweaverCS2でのfloat
最近DreamweaverCS5習いました。 家にあるのはCS2です。 ずっと使っていなくてホームページを作ってみようと思いやりはじめるとCS5と同じ様にはいきません。 今、floatと、text-align:center;ができなくて困っています。 cssに記入したのですが、htmlのデザインビューをみても全部左よりになってしまします。 どなたか解決方法をご存知のかたいらしたら教えてください。 よろしくお願いいたします。
- suzu1122
- お礼率71% (20/28)
- ホームページ作成ソフト
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
<head> <style type="text/css"> #wrapper{ background: red; width:900px; margin: 0 auto;} #left-box{ background: yellow; height: 200px; width:205px; float:left; margin-bottom:30px;} #right-box{ background: lime; height: 200px; width:695px; float:right; margin-bottom:30px;} #footer{ background: silver; width:900px; height:34px; margin-bottom:30px; clear:both; text-align:center;} </style> </head> <body> <div id="wrapper"> <div id="left-box">left-box</div> <div id="right-box">right-box</div> <div id="footer">footer</div> </div> </body> <!-- １、wrapperなどで全体を囲いセンター配置に。margin: 0 auto; ２、幅900だからそれ以上pxのブラウザ幅を確保しないとセンターにはならない。 ３、ドリのデザインビューなんて使わない事。 ４、footerの中身が真ん中になるのは、text-align:center;があるから。 ５、background: 背景色; を付ければ一目瞭然。 ※ 例では、heightを指定したが本来は不要。 ※ CS2でもCS5でもHTML,CSSは同じ。 ※ NO.1さんの回答を理解できないならHTMLから勉強し、 DW無しで練習をする事。 -->
その他の回答 (3)
- Yama-tani
- ベストアンサー率44% (13/29)
#1です。おそらく#2さんの回答で上手くいくと思うのですが、もしCs2で上手くいかない場合は、文書宣言をきちっとされているかな？と思います。例えば、<html>を <!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"> に変えてみてください。Cs2でも、上手く表示されるはずです。 他の方もおっしゃっていますが、ｃｓｓのバージョンやブラウザの対応状況とプレビュー表示は違うので実際にサイトにアップされる場合は、ターゲットにするブラウザで実際に表示させてみて確認する必要があります。これは、Cs5でも同じことです。同時進行にいくつものブラウザがありますが、デザインビューは1つしかありませんので、どれかをアドビさんが選ぶことになります。もれたブラウザはデザインビューで確認できません。デザインビューはあくまで、目安にしかすぎません。
お礼
Yama-taniさんありがとうございます。 文書宣言は <!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"> でやっていました。 Yama-taniさんのアドバイスを参考に変えてやってみましたが、変わりませんでした。。。 safariしかブラウザで見れないからでしょうか。。 ターゲットブラウザを表示出来る様に設定しないといけませんね。 ありがとうございました！とても勉強になりました。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
CS2とCS5はHTMLのレンダリングエンジンが違うので、 CS2のプレビュー画面でサポートしていないスタイルシートを書いても、プレビューで反映されません。 たとえば、IE6、Safari1.0、Firefox0.8などの古いブラウザで、 角丸のボーダーなどができないのと同じです。 スタイルシートだけ作成して、プレビューはSafariかChromeで行うとCS5と同じ描画になることを確認できると思います。
お礼
talooさん そうなんですね。反映されないとは、、知らなかったです。 プレビューのブラウザはsafariバージョン3.0.4(523.12)のみなので、ブラウザで確認した際も崩れて見えていたんですね。 アドバイスありがとうございました。
- Yama-tani
- ベストアンサー率44% (13/29)
Cｓ2でも同じようにできます。floatとcenterくらいなら。cssの知識が少々足りないことが原因です。 まず、右に表示させる。仮にセレクタはpとします。 p{text-align:center;margin:0 auto;width:500px;float:right;} 塊としては左に、文字列としては中央揃えになる筈です。 続いて塊としても真ん中に配置するには、上のfloat:rightを消してみてください。 インライン要素にしかtext-align:center;は効きません。ブロックライン要素を左右中央にするには、要素の幅を決めて、左右のマージンをautoにします。 どうです？Cｓ2では上手くいきませんか？ 道具のせいにするより、最低限のhtmlやcssを学ぶことが、Dreamweaverを使えることに結びつくと思いますよ。 そして、この手の質問はおそらく満足いく回答が得られないと思います。なぜなら、suzu1122さんのソースがわからないため、セレクタや局所化を図るアドバイスが的外れで、コピペで使えないことが多いためです。仮にセレクタをpとしましたが、他のセレクタに置き換えられるなら、こんな質問はしないかな？と思います。今度はp全部;が真ん中になってしまったと焦るのが関の山で…… もし、解決できない場合は、html側のソースとどこが上手くいかないのかを具体的に質問されるといいです。回答者はエスパーではないのですから。
お礼
説明不足な質問にお答え頂きありがとうございます。 書きの様に記述しましたが、デザインビュー、ブラウザで確認すると文字も、画像も左寄りになってしまいます。 以前同じソースでCS5で作った所できたのでCS2のせいにしてしまいました。 ・htmlソース <div id="left-box"></div> <div id="right-box"></div> <div id="footer"></div> ・cssソース #left-box{ width:205px; float:left; margin-bottom:30px; } #right-box{ width:695px; float:right; margin-bottom:30px; } #footer{ width:900px; height:34px; margin-bottom:30px; clear:both; text-align:center; } なにが違ってできないのかがわかりません。。。 もしアドバイスがありましたらお聞かせください。 よろしくお願い致します。
お礼
naokitaさんご丁寧な説明ありがとうございます。 とってもわかりやすかったです。 スタイルシートの添付でなくhtmlにnaokitaさんのソースを参考にタイプしたらデザインビューでもブラウザでもばっちりできました。 DWなしで練習していきます。 ありがとうございました！