• ベストアンサー

DreamweaverCS2でのfloat

最近DreamweaverCS5習いました。 家にあるのはCS2です。 ずっと使っていなくてホームページを作ってみようと思いやりはじめるとCS5と同じ様にはいきません。 今、floatと、text-align:center;ができなくて困っています。 cssに記入したのですが、htmlのデザインビューをみても全部左よりになってしまします。 どなたか解決方法をご存知のかたいらしたら教えてください。 よろしくお願いいたします。

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

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.2

<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無しで練習をする事。 -->

suzu1122
質問者

お礼

naokitaさんご丁寧な説明ありがとうございます。 とってもわかりやすかったです。 スタイルシートの添付でなくhtmlにnaokitaさんのソースを参考にタイプしたらデザインビューでもブラウザでもばっちりできました。 DWなしで練習していきます。 ありがとうございました！

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (3)

  • Yama-tani
  • ベストアンサー率44% (13/29)
回答No.4

#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つしかありませんので、どれかをアドビさんが選ぶことになります。もれたブラウザはデザインビューで確認できません。デザインビューはあくまで、目安にしかすぎません。

suzu1122
質問者

お礼

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しかブラウザで見れないからでしょうか。。 ターゲットブラウザを表示出来る様に設定しないといけませんね。 ありがとうございました！とても勉強になりました。

全文を見る
すると、全ての回答が全文表示されます。
回答No.3

CS2とCS5はHTMLのレンダリングエンジンが違うので、 CS2のプレビュー画面でサポートしていないスタイルシートを書いても、プレビューで反映されません。 たとえば、IE6、Safari1.0、Firefox0.8などの古いブラウザで、 角丸のボーダーなどができないのと同じです。 スタイルシートだけ作成して、プレビューはSafariかChromeで行うとCS5と同じ描画になることを確認できると思います。

suzu1122
質問者

お礼

talooさん　そうなんですね。反映されないとは、、知らなかったです。 プレビューのブラウザはsafariバージョン3.0.4(523.12)のみなので、ブラウザで確認した際も崩れて見えていたんですね。 アドバイスありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  • Yama-tani
  • ベストアンサー率44% (13/29)
回答No.1

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側のソースとどこが上手くいかないのかを具体的に質問されるといいです。回答者はエスパーではないのですから。

suzu1122
質問者

お礼

説明不足な質問にお答え頂きありがとうございます。 書きの様に記述しましたが、デザインビュー、ブラウザで確認すると文字も、画像も左寄りになってしまいます。 以前同じソースで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; } なにが違ってできないのかがわかりません。。。 もしアドバイスがありましたらお聞かせください。 よろしくお願い致します。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • [CSS]floatを使う理由

    CSSの初心者です。 http://yoppa.org/taumedia10/1695.html　というページに例として挙げられているスタイルシートで、 以下の記述があります。 nav { float:right; width:236px; } section { float:right; width:620px;} footer {clear:both !important; text-align: center;} ここでSectionをfloatさせる理由は何でしょうか？F loatさせなれければ、わざわざClearを使う必要もないし、以下のように記述したほうが簡単だと思います。 nav { float:right; width:236px; } section {width:620px;} よろしくお願いします。 footer {text-align: center;}

    • ベストアンサー
    • CSS
  • CSSのfloatについて教えてください。

    商品紹介のページを作成したいのですが、★どうクラスをつけて★どうfloatしたらいいのか　分かりません。（DreamweaverCS3, CSS1,Win）画像添付してます。 いろいろ試してはみたのですが・・・・・↓ 商品紹介は４シリーズに分けて各間にボーダーをつけて商品ブロックを左右に２列ずつ表示していこうと考えています。 ○各シリーズにクラスを設定してborder-Bottomをつける ○商品ブロックを1つづつ定義リストでマークアップして<dl class="floatL"><dl class="floatR">をつけていく。（cssに.floatL {float:left} .floatR {float:right}と記述してます。） 参考書を見ながらこの方法ですると何回やってもErrorがおきてしまいました。 次に１つづつ<dl>にidをつけて１つずつfloatしていくと★2が右に寄った状態になってしまいレイアウトが崩れてしまいました。 ちなみにfloatではなくabsoluteでするとデザインビューでは回りこんで表示するのですがブラウザでは表示できませんでした。 どの方法も間違った感じがするのですが独学中のためアドバイスをいただけたらうれしいです。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • DreamWeaverCS＊でCSSを外部に書き出したい

    DreamWeaverCS4を購入予定で、現在試用版を使っています。 簡単なタグ打ちはできるのですが、DreamWeaverは使い初めてまだ数ヶ月です。 新規にホームページを作成していて、 HEAD内の内部CSSを外部CSSにしたいのですが、いろいろ調べたのですがそういうメニューを見つけられません。 どのメニューから行えばできるのか教えていただけないでしょうか。 CS３の場合の操作でもokです。 CSSを新規に作ってコピーする方法ならわかりますが、DreamWeaverから書き出す方法が知りたいのです。 宜しくお願いいたします。

    • ベストアンサー
    • CSS
  • GoLiveCSとDreamweaverCS4

    質問させて下さい。OSはWindows7です。 今までGoLiveCSでホームページを作成しており、今後DreamweaverCS4で ホームページを作成しようと思っております。 そこでご質問なのですが、今までGoLiveCSで「コンポーネント」という保存（ヘッダ、フッタ等同じデザイン（html）を他のページにも使う時、一度直すと配置した全ページが反映）をしておりました。 DreamweaverCS4でこれとほとんど同じ機能は「スニペット」に価するのでしょうか。 ただ「スニペット」はソース（結局はソースなのですが）で保存され、直感的（デザインビューで修正）に編集する事ができませんでした。 当然違うソフトなのでしょうがないですが、こういった機能は「スニペット」なのでしょうか。

  • CSS/float内のセンタリング

    下記の記述でsideconteをsideWrap内にセンタリングしたいのですが、うまくいきません。sideWrap内に記述したテキストはセンタリングされるのですが、sideconteは思った通りに、配置できません。どのように記述すれば、よいでしょうか？ <html lang="ja"> <head> <style type="text/css"> #sideWrap { width:220px; float:right ; background-color: #fec000; text-align:center; } .sideconte { width:175px; background-color:red;text-align:center;} </style> </head> <body> <div id="sideWrap">text1 <div class="sideconte"> text2 </div><!-- /sideconte --> </div><!-- /sideWrap --> </body> </html>

    • ベストアンサー
    • HTML
  • floatを使用すると中央寄せにならない

    CSSについて質問があります。 floatを使って2段組のレイアウトにしたのですが、 MacのIE5.2で見ると、floatを使ったdiv（container）だけ中央寄せではなく 左寄せになってしまいます。MacのSafariやFirefoxでは正常に見れました。 URL：http://fuma.xrea.jp/ /* CSSソース*/ html{height : 100%; width : 100%;} body{width : 100%; text-align : center; margin : 0px auto; padding : 0px;} #container{ margin : 0px auto; padding : 0px; width : 720px;} div#main{ text-align : left; width : 490px; margin : 0px; padding : 8px 0px; float : left;} div#side{ margin : 0px; padding-bottom : 8px; text-align : left; width : 230px; float : right;} div#copyright{ text-align : center; margin : 0px auto; padding : 10px 0px; clear : both; width : 720px;} /* HTMLソース */ <div id="container"> <div id="side">てすと</div> <div id="main">てすと</div> </div> <div id="copyright">test</div> <div align="center">を使っても中央寄せになりませんでした。 どうすれば、MacのIEでも中央寄せにできますか？

    • ベストアンサー
    • CSS
  • legendの属性alignをCSSに変更する・・・

    legendの属性alignをCSSに変更する場合 調べたら text-align ではなく float で左右が配置できることがわかりましたが、top や bottom に関しては無かったので教えてください。 それと、なぜ text-align ではなく float なのでしょうか？

  • floatについて

    ■ □ と並んでいた場合■にスタイルシートでfloat:leftとすると□が右にきますよね。( ■□となる) それで私はfloat:leftは『次に来る要素を自分の右に移動させる』と 解釈してました。 それで質問なのですが以下のタグの場合どうして最後に(.set1)にfloat:leftが必要なのでしょうか？ 次に要素がきていないからあっても意味がないと思ったのですが、実際 はずしてみると間に幅ができてデザインが崩れてしまいます。 また全体の枠を見えるよう最初のdivに.wakuで設定したのですがfloat:leftがあるときには長い一本の線になってしまいます。 どうしてこうなるのでしょうか？ <html> <head> <style type="text/css"> .waku{border-color:#cccccc;border-style:solid;border-width:3px;} .set1{border-color:#cccccc;border-style:solid;border-width:1px; width:150px;height:500px;background-color:white;color:#ffffff; margin:0 2.5;float:left;} .main{border-color:#cccccc;border-style:solid;border-width:1px; width:500px;height:500px;background-color:white;color:#ffffff; margin:0 2.5;font-weight:bold;float:left;} .set2{border-color:#cccccc;border-style:solid;border-width:1px; width:150px;height:500px;background-color:white;font-weight:bold; color:#ffffff;margin:0 2.5;float:left;} </style> <div class="waku" align="center"> <div class="set1"> <div>左1</div> <div>左2</div> </div> <div class="main">真ん中</div> <div class="set2">右</div> </div>

    • ベストアンサー
    • HTML
  • float と text-indent について

    floatを利用して、画像を右か左に寄せたとき、ネットエスケープ7.1でインデント2emが反映されない。(IE6は、OK) 同じく背景を画像に合わせて付けたいのですが、何かいい方法はありませんか。 2つの疑問についてお願いいたします。 <HTML> <HEAD> <TITLE>無題ドキュメント</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <STYLE type="text/css"> <!-- p { background-color: #99CC00; 　　text-indent: 2em; 　　font-size: 12px} img { float: right} --> </STYLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000"> <p><IMG src="test.jpg" width="100" height="75">floatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについて</p> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • floatの挙動について

    いつもお世話になっております。 次のコードで#sidebody内に#a～cboxを左側に縦に並べ、#dboxを右側に配置したいのですが、 #dboxのfloatが#sidebodyに対して効きません。 原因を教えていただけませんでしょうか。 シンプルな構造なのに、何が問題なのか分かりません。 何卒よろしくお願いいたします。 <html> <head> <link href="test.css" rel="stylesheet" type="text/css" media="screen"> <body> <div id="content"> <div id="sidebody"> <div id="abox">a</div> <div id="bbox">b</div> <div id="cbox">c</div> </div> <div id="dbox">d</div> </div> </body> </head> </html> #content { width: 200px; height: auto; border: red solid; } #abox { width: 100px; height: 20px; background-color: blue; text-align: center; color: white; } #bbox { width: 100px; height: 100px; background-color: pink; text-align: center; color: white; } #cbox { clear: both; width: 100px; height: 100px; background-color: darkblue; text-align: center; color: white; } #dbox { width: 100px; height: 250px; float: left; background-color: green; text-align: center; color: white; }

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する