ホームページのブロック配置方法と注意点

2011/10/17 16:09

このQ&Aのポイント

ホームページのブロックをFloat leftで配置する方法とは？
Float rightで回り込みがうまくいかない原因とは？
注意点を知っておきましょう

ホームページのブロック配置　Float

Float left のブロックの右に別のブロックを配置したいのですが float right 指定しても回り込んでくれません。一度は上手くいったようにみえたのですが。原因と注意点をお教え下さい。　--------------------------------------------------------------------------- | header | |--------------------------------------------------------------------------- | dspbody (menuとtopを含む) | | ------------------------------------------------------------------------- | | menu | top | |--------------------------------------------------------------------------- | footer | ---------------------------------------------------------------------------- 【テスト中のスタイルシート】 * { margin:0; padding:0; } body { /* background-color:#ffffff; *//*内容全体の背景色*/ text-align:left; /*テキストの配置を左揃えにする*/ } div#pagebody { width:1000px; margin:0 auto; /*内容全体をセンタリング*/ text-align:left; /*テキストの配置を左揃えにする*/ } div#header { height:136px; /*背景画像のサイズに合わせてボックスの高さを指定*/ text-align:center; /*テキスト・画像の配置を中央揃えにする*/ background-image: url(img/FF054_change.png); background-repeat: repeat-x; } div#dspbody { width:1000px; height:800px; background-color: #999999; } div#menu { width:152px; height:800px; margin:0; 　　　　 float:left; /*内容全体を左に配置*/ text-align:left; /*テキストの配置を左揃えにする*/ /* background-color: "saddlebrown"; */ background-image: url(img/FF085_change.png); /* background-repeat: repeat-y; */ } div#top { /* width:700px; height:600px; */ float:right; text-align:center; /*テキストの配置を中央揃えにする*/ font-size: 9pt; background-color: #ccffcc; } div#top table { margin: auto; /*テーブルの配置を中央揃えにする*/ } div#footer { clear:both; text-align:center; /*テキストの配置を中央揃えにする*/ } a:link { color: yellow} a:visited { color: yellowgreen}

kommatana
お礼率76% (35/46)

その他([技術者向] コンピューター)
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

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

ベストアンサー

naokita
ベストアンサー率57% (1008/1745)

2011/10/20 00:04 回答No.3

注意：１、カラム固定でのfloatは、widthをセットにする事２、clearは何に対してclearするのか。３、CSS内に全角スペースを混入するな。４、height:800px; とか縦を固定するのはウェブの仕様に反する・・・　　（文章が増えた場合や文字サイズや行が伸びた場合を考慮する事）５、dspbodyの設置はコンテンツやデザインによる。６、全称セレクタは使わない方が良い。７、yellowgreenなどの基本16色以外のカラー名は使わない方が良い。８、本番は、DTD標準や外部CSSにしてね。以上。以下、提示ソースを編集しただけですが・・・ <html> <head> <style type="text/css"> * { margin:0; padding:0;} body { /* background:#fff; */} div#pagebody{ width:1000px; margin:0 auto;} div#header{ height:136px; text-align:center; background: url(img/FF054_change.png) repeat-x;} div#dspbody{ background: #999;} div#menu{ width:152px; float:left; background-image: url(img/FF085_change.png); /* background-repeat: repeat-y; */ } div#top{ width:700px; min-height:600px;/* サンプルの為に設定 */ float:right; text-align:center; font-size: 9pt; background: #cfc;} div#top table {margin: auto;} div#footer { clear:both; text-align:center; background:white;} a:link{ color: yellow} a:visited{ color: yellowgreen} </style> </head> <body> <div id="pagebody"> <div id="header">header</div> <div id="dspbody"> <div id="menu">menu</div> <div id="top">top</div> <div id="footer">footer</div> </div> </div> </body> </html>

質問者

お礼 2011/10/20 15:58

回答有難う御座います。確認させて頂き、後程ご連絡致します。宜しくお願い申し上げます。

質問者

補足

有難うございました。原因は全角スペースがコメントの更に後ろに存在しておりました。それを削除した結果、思い通りになりました。頂いたサンプルも思い通りのものでした。まだまだ勉強が足りないことを実感しました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

yappe
ベストアンサー率42% (901/2135)

2011/10/19 18:35 回答No.2

<P><TABLE BORDER=1 CELLPADDING=2 CELLSPACING=2> <TR> <TD COLSPAN=2> <P><BR></P> </TD> </TR> <TR> <TD COLSPAN=2> <P><BR></P> </TD> </TR> <TR> <TD> <P><BR></P> </TD> <TD> <P><BR></P> </TD> </TR> <TR> <TD COLSPAN=2> <P><BR></P> </TD> </TR> </TABLE><BASEFONT SIZE=3></P> </BODY> とか罫線幅０　などとすれば　 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS"> <TITLE>(無題)</TITLE> </HEAD> <FRAMESET ROWS="*,*,*,*,*"> <FRAME SCROLLING="AUTO"> <FRAME SCROLLING="AUTO"> <FRAMESET COLS="*,*"> <FRAME SCROLLING="AUTO"> <FRAME SCROLLING="AUTO"> </FRAMESET> <FRAME SCROLLING="AUTO"> <FRAME SCROLLING="AUTO"> <NOFRAMES> <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080" ALINK="#800080" LEFTMARGIN="10" TOPMARGIN="15" MARGINWIDTH="10" MARGINHEIGHT="15"> <BASEFONT SIZE=3> <P><BR></P> </BODY> </NOFRAMES> </FRAMESET> </HTML> とか

質問者

お礼 2011/10/20 16:02

回答有難う御座います。後程、確認してご連絡致します。 FRAMEを使用しておりましたが、使用せずに作り変えているところです。宜しくお願い申し上げます。

ログインすると、全ての回答が全文表示されます。

yappe
ベストアンサー率42% (901/2135)

2011/10/18 21:11 回答No.1

入れ子にしないと（）（）（）（（）（））イメージですが

質問者

お礼 2011/10/19 15:19

回答、有難う御座います。 HTMLでの記述は入れ子にしております。 pagebodyは不要？かも知れませんが。 <body> <div id="pagebody">  <div id="header"> </div> <div id="dspbody">  <div id="menu"> </div>  <div id="top"> <table> </table> </div> </div> <div id="footer"> </div> </div> </body> それともCSSも同様にするのでしょうか。単純に試してみましたが駄目なようです。もう少し、具体例を頂けますでしょうか。宜しくお願い申し上げます。

質問者