- ベストアンサー
CSSを勉強中の初心者が、要素を分割する方法とfloatの必要性について質問
- CSSを勉強中の初心者が、ページの要素を分割する方法についての質問です。特に、floatの必要性について疑問を持っています。
- floatを使って要素を分割するとき、片方のクラスにのみfloatを指定すれば良いのかどうかについての質問です。
- 実際に試した結果、片方のクラスにのみfloatを指定すると少し位置がずれることがありますが、問題がないのかどうかわからないという疑問があります。
- makiko3300
- お礼率4% (2/48)
- HTML
- 回答数3
- ありがとう数12
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
関連するQ&A
- CSSでのセンタリングができません。
CSSでのセンタリングができません。 こちらのページを参考にCSSで下記のようにCSSを設定したのですが センタリングされません。設定方法がまずいのでしょうか? それともWEB上で確認せずローカルで確認していることに問題があるのでしょうか? 宜しくお願い致します。 (CSSの記述はヘッダーに入れておりHTMLはBODYに記述しております) http://desperadoes.biz/style/dan/ +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ * { margin : 0 ; padding : 0 ; } body { width : 100% ; float: center; } #my_body { position : relative ; margin-left:auto ; margin-right:auto; } #my_main { width : 950px ; } #my_header { width : 950px ; } #my_navigation { float : left ; width : 190px ; } #my_contents { float : left ; width : 750px ; } #my_contentsM { float : left ; width : 550px ; } #my_contentsS { float : right ; width : 190px ; } #my_contentsB { float : left ; width : 750px ; } HTML部分は <body> <div id="my_body"> <div id="my_header"> </div> <div id="my_main"> <div id="my_navigation"> </div> <div id="my_contents"> <div id="my_contentsM"> </div> <div id="my_contentsS"> </div> <div id="my_contentsB"> </div> </div> </div> </div> </body>
- ベストアンサー
- ブログ
- StyleSheet：float 使用時、テキストが指定幅を超える
お世話になります。 スタイルシートの設定について、質問させてください。 下記のようなページを作ったところ、 main_left内のテキストが指定した400pxを超え、 main_rightがmain_leftの次の段落に回り込んでしまいます。 テキストが400を超えないようにするには どうすればよいでしょうか？ もっと具体的に言えば、 http://www.geocities.jp/multi_column/float/sample/float.html このサイトのようにしたいだけなのですが、 どこが間違っているのかがわからず困っています。 --------------------------------------- index.html --------------------------------------- <html><head><link rel="stylesheet" href="main.css" type="text/css" /></head> <body> <div id="main"> <div id="main_left"> 123456789012345678901234567890123456789012345678901234567890</div> <div id="main_right"> 12345678901234567890123456789012345678901234567890</div> </div> </body></html> --------------------------------------- main.css --------------------------------------- #main { width:600px; } #main_left { float:left; width:400px; background-color:#CCFF99; } #main_right { float:right; width:190px; background-color:#FFCC99; } --------------------------------------- 以上、ご回答よろしくお願いいたします。
- ベストアンサー
- HTML
- CSS-paddingが反映されません
入れ子にしたCSSなのですが中にいれた方のボックスのpaddingが反映されません。 CSS---------------------------- #main { width:540px; float:left; background-color: #FFFFFF; padding-right: 25px; height: 100%; } #main2 { width:500px; background-color: #FFFFFF; padding-right: 20px; padding-left: 20px; } HTML---------------------------- <div id="main">□□□□□□□□□□□□□ <div id="main2">□□□□□□□□□□□□□</div> </div> 「main2」というボックスの左右に余白を作りたいのです。 ご教授ください。
- 締切済み
- HTML
- CSS(初歩的）な質問です…floatの解除
大変初歩的な質問でごめんなさい。 フローとの解除について教えて下さい。 例） <div id="main"> <div id="left"> </div> <div id="right"> </div> </div> とあり、 #main{ width : 1000px ; } #left , #right{ width : 500px; float : left ; } と、指定するとします…（ＣＳＳ、ＨＴＭＬは最低限しか書いていませんが。。。 ＨＴＭＬは4.01か、ＸＨＴＭＬあたりでお願いします。ＨＴＭＬ5はまだまだ…… このあと、#leftと#rightの次には</div>がありますが、この場合、clear : left (both);はどこに指定すればよいのでしょうか？もしくは、指定する必要が無いのでしょうか？ 大変初歩的ですがよろしくお願いいたします。
- ベストアンサー
- CSS
- perlで3カラムにしたい (css)
perlでcgiのアンケートのページを作っていますが、ページの最上部をヘッダー、ページの両端にメニューや広告、中央にコンテンツを配置する3カラム（三段組み）、最下部をフッターにしたいと考えています。 ページ幅 755pxでセンタリング、両端のメニュー、コンテンツともに幅固定で、以下のようなcssファイルを作りましたが、cgiのページを見ると、cssファイルの設定がうまく反映されません。 どうすれば良いのか、ぜひ御指導、アドバイス頂けると助かります。 ｍ（＿ ＿）ｍ 当方初心者のため、もし以下のcssファイルの書き方に間違えがありましたら、ご指摘ください。 よろしくお願い致します。 ----------------------------- <HTML> <BODY> <div id="wrapper"> <div id="header"> ヘッダー部分 </div> <div id="main"> <div id="menu"> メニュー部分 </div> <div id="contents"> コンテンツ部分 </div> <div id="affiriate"> アフィリエイト部分 </div> </div> <div id="footer"> フッター部分 </div> * { margin: 0; padding: 0; } #wrapper { width: 755px; margin: 0 auto; /* 幅固定（755px）でセンタリングします。*/ } #header { width: 755px; height: 50px; } #main { width: 755px; /* 両端ブロックとコンテンツを囲んでいるセレクタです。*/ } #menu { float: left; width: 150px; /* floatに、width 指定は必須です。*/ } #contents { float: left; width: 505px; #affiliate { float: left; width: 150px; } #footer { clear: both; /* float をクリアしています。*/ width: 755px; height: 50px; } #menu ul { list-style: none; } </div> </BODY> </HTML>
- ベストアンサー
- CSS
- CSSだけで奇麗にサイトを作りたい。
Mac Golive CS2を使っています。 大体以下のような形でCSSを記述しています。（他の文字やマージン等細かい設定は省いてます） 自分のイメージとしては灰色の背景に、メインの白い箱があってその中に左右に小箱が並んで入ってる感じです。 CSS : body { background-color: #999; } #main { background-color: white; width: 700px; height: auto; } #left { width: 200px; height: auto; float: left;} #right { width: 500px; height: auto; float: right;} HTML : <body> <div id="main"> <div id="left">左の内容</div> <div id="right">右の内容</div> </div> </body> そこで質問なのですが、上記の場合、mainの縦がautoになっているdivの中にleftやright等のdivを入れるとmainからleftなどがはみ出てしまうのです。（というかmainのdivが表示すらされない。なぜ？） divは入れ子が出来ないのでしょうか？現在どうしてもこの形で作りたいのでleftとrightの箱をtableで代用していますが、tableは使いたくありません。 あとmainの箱にleftなどの箱の大きさの分だけ<br>をたくさん入れるという方法がありますがそれもやりたくありません。 わかりにくい質問かもしれないのですが助言の程頂けましたら有り難いです。
- ベストアンサー
- ホームページ作成ソフト
- CSSで全体をセンタリングしたい
navi address main footer ↑このような4つの<div>をさらにcoverという<div>でくるんだ？レイアウトにしました。 下記のようなCSSにしたのですが、中央にすることができません。 同じような質問もたくさんあり、拝見したのですがどうもうまくいきません。 coverという<div>を作ったのが間違いなのでしょうか？ ------------------------------------------- body{ text-align:center; } #cover{ width: 800px; margin-right=:auto; margin-left=:auto; text-align:left; } #navi{ float: left; width: 565px; height: 165px; } #address{ float: right; text-align: left; width: 235px; } #main{ width: 500px; clear:both; padding-right: 150px; padding-left: 150px; font-size: 10px; text-align: left; line-height: 20px; } #footer{ width: 500px; text-align:center; padding-right: 150px; padding-left: 150px; padding-top: 30px; } -------------------------------------------
- ベストアンサー
- CSS
- CSSでの幅指定・・・
CSSで、 一つのdivの中に、二つのdivがあるとき、 二つのdivの片方を310px;で指定して、 もう片方を、画面サイズにあわせて可変するようにするにはどうしたらよいですか？ 310pxで指定したところは、文章などがはみ出さないようにしたいです。(つまり、二つの文章同士がはみ出さないようにして欲しいです。) CSSのソースはこちらです。 div#content{ width: 100%; } div#1{ float: left; } div#2{ width: 310px; float: right; } HTMLは、上記の通り、一つのdivに二つのdivが入っている状態になっています。 <div id="content"> <div id="afl1"> </div> <div id="web1"> </div> </div>
- 締切済み
- HTML
- HTMLのCSS(float)の設定がよくわかりません
HTMLのCSS(float)の設定がよくわかりません 画像のように各配置はうまく表示されているのですが footerのCSSを #footer { width: 100%; float: left; clear: both; } と表記するとwrapperのCSSで表記した外枠のボーダーが footerの前で切、footerの左横に1px～2pxの隙間が できてしまうのですが、その理由をわかる方いらっしゃいますか。 宜しくお願い致します。 footerの表記を #footer { width: 100%; clear: both; } とすると、ボーダーも1pxの隙間もなく正常に表示されます。 宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000; border-left-color: #000; } #container { overflow: hidden; } #left { float: left; } #right { float: left; } #footer { width: 100%; float: left; clear: both; } わかる方いらっしゃいましたら 宜しくお願い致します。
- ベストアンサー
- HTML
- CSSでボックスのheightが0になる
http://css-happylife.com/ 上のサイト(私のサイトではないです)で、 <div id="contentsInner"> <div id="main"> </div> <div id="sub"> </div> </div> という部分があります。 CSSはだいたい下のような感じです。 #contentsInner { margin:0pt auto; position:relative; width:910px; } #main { float:left; overflow:hidden; width:500px; } #sub { float:right; margin-top:20px; padding:8px 0pt 8px 10px; width:390px; } Firebugで確認したところ、 #mainの大きさは500 x 1552 #subの大きさは390 x 1305 に対し、 #contentsInnerの大きさは910 x 0 と、高さが0になっています。 もちろん、#contentsInnnerに背景画像を設定しても 表示されることはありません。 ブラウザもheight=0と認識しているようです。 なぜ高さが0になってしまっているのでしょうか。 このバグ？の対策を教えてください。 よろしくお願いします。
- ベストアンサー
- CSS
