ホームページのブロック配置方法と注意点
- ホームページのブロックを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）
- 専門家の回答
質問者が選んだベストアンサー
注意： １、カラム固定での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>
その他の回答 (2)
- yappe
- ベストアンサー率42% (901/2135)
<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> とか
お礼
回答有難う御座います。 後程、確認してご連絡致します。 FRAMEを使用しておりましたが、使用せずに作り変えているところです。 宜しくお願い申し上げます。
- yappe
- ベストアンサー率42% (901/2135)
入れ子にしないと （） （） （） （（）（）） イメージですが
お礼
回答、有難う御座います。 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も同様にするのでしょうか。 単純に試してみましたが駄目なようです。 もう少し、具体例を頂けますでしょうか。 宜しくお願い申し上げます。
補足
有難うございました。 本当に回答が得られるのか半信半疑でしたが、 思ったより早い回答を頂き救われる思いがしました。
関連するQ&A
- CSS floatについて教えて下さい。
【html】 <div id="wrapper"> <div id="top"></div> <div id="middle"> <div id="a"></div> <div id="b"></div> </div> </div> 【css】 * { margin:0; padding:0; } body { background:url(../img/common/bg.gif) repeat} #wrapper { width:800px; margin:0 auto;} #top { background:url(../img/common/contents-flame-top.gif) no-repeat; height:30px;} #middle { background-color:#FFF; padding:0 50px 100px 50px;} #a { float:left; width:360px; height:100px; background-color:#009966;} #b { float:left; width:340px; height:150px; background-color:#CC0033;} ------------------------------------- 上記でdivのaとbにfloatの設定をしないと#middleの中にaとbが入るのですが、floatの設定を入れると#middleの外にaとbが出てしまいます。 どこが間違っているのか教えて頂けますか？初心者ですので、よろしくお願い致します。
- ベストアンサー
- HTML
- IEだけで配置したボックスがずれて困っています。
DIVでボックスを配置してレイアウトをしています。 IE以外では、問題なく中央に配置されるのに、 IEのバージョン関係なく、上のボックスがずれてしまいます。 スターハックなどを使ってもダメでした。 問題箇所を下記に明記しますので、解決策を教えてください。 宜しくお願いします。 .top p{ background-image:url(../img/basis/br.gif); background-repeat:repeat-x; width:720px; height:35px; z-index:2; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 0px; padding-right: 40px; padding-bottom: 0px; padding-left: 40px; text-align: center; float: left; position: relative; border: 1px solid #0033FF; } .h2-img{ width:800px; padding:0px; margin:0px auto 0px auto; border: 1px solid #009900; background-color: #009900; } /*---メニュー類---*/ .m-bar { border: 0; padding:0; overflow:hidden; height:35px; width:720px; position:relative; margin-top: 60px; margin-bottom: 0px; margin-right: auto; margin-left: auto; text-align: left; right: 0px; float: left; display: block; background-color: #333399; }
- 締切済み
- CSS
- float解除直後のborderつき文章の配置方法
floatを使って複雑にボックスを配置し、その一番下にborderで囲った文章を配置したいのですが、 Coment4で設定したborderと文章が、borderはPhot1のすぐ下に表示され、 文章はphot4の下から表示されてしまいます。 phot1と同じ左隅からborderで囲まれた文章を配置するにはどうしたらいいのでしょうか？ <style type="text/css"> #phot1{ width: 750px; height: 50px; /*ここからはgoo質問用(実際は入れない)*/ background-color: #48637e; color: #fff; } #left{ float: left; width: 450px; margin: 10px; /*↓goo質問用*/ border: 1px solid #39f; } #Coment1{ font-size: 16px; color: #fff; line-height: 110%; /*↓goo質問用*/ width: 400px; height: 60px; background-color: #8493bb ; } #Coment2{ font-size: 12px; color: #000; /*↓goo質問用*/ width: 300px; height: 60px; background-color: #777; } #phot2{ padding-left: 60px; background: url("sample.jpg") 0 0 no-repeat; float: left; margin: 0;/*バグ？余白を削除*/ /*↓goo質問用*/ background-color: #ff0; width: 140px; } #phot3{ float: left; overflow: hidden; /*↓goo質問用*/ border: 1px solid #e37615 ; width: 200px; } #right{ float: left; width: 270px; margin-top: 10px; overflow: hidden; /*↓goo質問用*/ border: 1px solid #7c4b15; } #Coment3{ float: left; font-size: 12px; width: 180px; /*↓goo質問用*/ border: 1px solid #000; height: 140px; } #phot4{ float: left; overflow: hidden; margin: 5px; width: 70px; /*↓goo質問用*/ border: 1px solid #ff3cb9; } #phot4 ul{ display: inline; text-align: center; line-height: 18px; } #Coment4{ /*ここからはgoo質問用(実際は入れない)*/ border: 10px solid #f00; width: 750px; height: 50px; } </style> ---------------------- <div id="phot1">画像1</div> <div id="kono_div_hituyoukana"> <div id="left"> <div id="Coment1">coment1coment1coment1</div> <div id="Coment2">coment2coment2</div> <div id="phot2">横50px背景画像</div> <div id="phot3">画像3</div> </div> <div id="right"> <div id="Coment3">coment3coment3coment3coment<wbr /> 3coment3coment3coment3comen<wbr /> t3coment3coment3</div> <div id="phot4"><ul><li><img src="sample.jpg" width="65" height="80">画像4</li></ul></div> </div></div> <div id="Coment4">Coment4Coment4</div>
- ベストアンサー
- HTML
- 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横並びにしたブロックの中のul/liを縦並びにさせたい
float leftで横並びさせている中でul/liを縦並びにさせたい。現在はすべて横並びしてしまう。 （html） <div class="base"> <div class="box1"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> （css） ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; display: inline; } .base { width: 618px; height: 100px; margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1 { width: 130px; height: 97px; margin: 0; padding: 0; float: left; outline: solid 2px black; } .base .box2 { width: 2px; height: 100px; margin: 0 5px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3 { margin-left: 157px; padding: 0; font-weight: bold; text-align: left; } .list-y{ clear: both; } CSSに疎いのでよろしくお願いいたします。
- ベストアンサー
- CSS
- 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
- inline-blockを上下中央揃えにする方法
以下のhtmlで、内容に合わせてブロックの大きさが変わる状態での 上下の中央揃えができず悩んでいます。 html ------------------------------------------------------------------------------------------ <div id="box1"> <div id="box2"> <div id="box3"> <div>あああああああああああああああああああああああ</div> <div>いいいいいいいいいいいいいいいいいいいいいいい</div> <div>ううううううううううううううううううううううう</div> <div>えええええええええええええええええええええええ</div> <div>おおおおおおおおおおおおおおおおおおおおおおお</div> </div> </div> </div> ------------------------------------------------------------------------------------------ css ------------------------------------------------------------------------------------------ body { text-align:center; } #box1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width:700px; height:400px; background:#666666; } #box2 { position: absolute; left: 0; right: 0; margin: auto; width:500px; height: 300px; background:#FFF; } #box3 { display: inline-block; text-align: left; vertical-align: middle; background:#CCCCCC; } ------------------------------------------------------------------------------------------ #box2に対して#box3の内容が、縦に伸びても短くなっても常に上下が中央に配置されるようにしたいのですが、どうにもうまくいきません。 ブロック内のテキスト自体は左揃えで、ブロックそのものが中央です。 どなたか、ご教授お願い致します。 inline-blockを上下中央揃えにする方法
- 締切済み
- CSS
- cssによる配置の計算が合いません
cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSのpositionでフッターが最下に配置されてくれない
CSSの配置がどうにもうまくいきません。 フッターをWebページの最下に配置したいのですが、どうしてもWindowsIE7だと中央くらいの場所にきてしまいます。どうやったら治りますでしょうか？ WindowsのIE6やFirefoxではOKなんですが・・・・・ 以下、ソースです。 ●CSS ------------------------------------------------------ div#hdr-wrap { position:absolute; background:url(../img/cmn/hdr_bg.gif) repeat-x; top:0px; width:100%; height:120px; text-align:center; } div#hdr { width:900px; _width: 902px;/*IE対策*/ height:120px; margin-left: auto; margin-right: auto; text-align: left; } div#hdr-vi{ padding-top:71px; padding-left:0px; } div#gbnavi-wrap { position: absolute; background:url(../img/cmn/gbnv_bg.gif) repeat-x; top: 120px; width:100%; height: 51px; text-align:center; } div#gbnavi { width: 900px; _width: 902px;/*IE対策*/ top: 120px; height: 51px; margin-left: auto; margin-right: auto; text-align: left; } div#main-wrap{ position: absolute; top:171px; width:100%; height:100%; background: url(../img/cmn/bg_cts_sdw.gif) repeat-x; text-align:center; } div#main{ position: static; padding-top:0px; width: 900px; _width: 902px;/*IE対策*/ height:100%; margin-left: auto; margin-right: auto; text-align: left; } div#ftr-wrap { clear: both; background:url(../img/cmn/ftr_bg.gif) repeat-x; width:100%; height:151px; text-align:center; } div#footer{ clear: both; color: #415880; width: 900px; _width: 902px;/*IE対策*/ height:151px; margin-left: auto; margin-right: auto; text-align: left; } ------------------------------------------------------ ●以下、HTMLソースです ------------------------------------------------------ <div id="hdr-wrap"> <div id="hdr"> <div id="hdr-vi">コンテンツ入る</div> </div> </div> <div id="gbnavi-wrap"> <div id="gbnavi"> <ul> <li>コンテンツ入る</li> </ul> </div> </div> <div id="main-wrap"> <div id="main"> <!--RIGHT AREA--> <div id="right">コンテンツ入る</div> <!--/RIGHT AREA--> <!--LEFT AREA--> コンテンツ入る。サイドバーが。 <!--/LEFT AREA--> <!--/MAIN AREA--> <!--/MIDDLE AREA--> </div> <!--FOOTER AREA--> <div id="ftr-wrap">コンテンツ入る</div> <!--/FOOTER AREA--> </div> ------------------------------------------------------ なぜかIE7だけ、ftr-wrapというフッターエリアの一番外側のDIVから中身が全部画面の中央あたりにあたかもレイヤーで上にのっているがごとく、ミドルエリアのコンテンツの上に乗っかるかたちで配置されてしまいます。 宜しくお願いいたします。
- 締切済み
- 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
お礼
回答有難う御座います。 確認させて頂き、後程ご連絡致します。 宜しくお願い申し上げます。
補足
有難うございました。 原因は全角スペースがコメントの更に後ろに存在しておりました。 それを削除した結果、思い通りになりました。 頂いたサンプルも思い通りのものでした。 まだまだ勉強が足りないことを実感しました。