• ベストアンサー
  • 困ってます

divが思うように使いこなせず困っています。

divが思うように使いこなせず困っています。 下記のようにした場合、背景色や、width:100; height:100の指定は無視されてしまいます。 (動作確認はfirefox3でしています) width:100; height:100と指定していてもサイズが小さければ小さくなってしまうのでしょうか。 サイズの固定方法と、一番外のdivを効かせる方法をどなたか教えていただけますか? <div style="min-height:50; width:200; background-color:#FFFF00;"> <div style="width:200; height:100; float:left"> <p>testtest</p> <p>testtest</p> </div> <div style="width:100; height:100; float:left"> <p>testtest</p> <p>testtest</p> </div> </div>

共感・応援の気持ちを伝えよう!

  • 回答数2
  • 閲覧数223
  • ありがとう数54

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

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

<div style="min-height:100px; width:200px; background:#FF0; overflow: hidden;"> <div style="width:50%; float:left;"> <p>testtest 1</p> <p>testtest 2</p> </div> <div style="width:50%; float:left; background:red;"> <p>testtest 3</p> <p>testtest 4</p> </div> </div> 何をしたいのかわかりませんが、 上記例で良いと思いますが、 わかり易く background:red;(右側が赤色)としている。 旧IEでは背景色が出ると思いますが、 Fxなどは正しく解釈してくれるので、背景色が出ない。 基本的な指定や利用法が間違っているからです。 -------------------------------------------- サイズにpxなどの値を入れる事。 フロートしてあるから左右に分けたいと思いますが、 親DIVの幅が200pxなのに、その下が200なら枠内にしか収まらない。 width:200px;+width:100px;=width:300px; その枠が200で良いのならフロートも枠幅も不要。 左右にフロートで分けたいのなら、 width:100px;+width:100px;=width:200px; width:200px;割2なら=width:50%; 縦min-height:50pxって意味分かりますか? 最小幅ですから、その中がheight:100pxなら意味が無い。 普通は、heightは利用しません。 (フロートを揃えたり背景画像がある場合には使う) 理由は、フォントサイズだけを特大に拡大すればわかります。 必要ならheight:100px;としましょう。 モダンブラウザ用にmin-heightt:100px;でも良いし、併用でも良い。 親DIVは、フロートだけのDIVを解釈しないので、 (IEは解釈する)clearで解釈させる。 (今回は意図がわからないので、 overflow: hidden;で対応) 例の数値は質問者さんの意図通りに設定してみましょう。 枠幅の設定はモードによっても違うので気をつける事。 全面的に制作していると思いますが、基本な部分を覚えないと後から何度も苦労しますよ・・・

共感・感謝の気持ちを伝えよう!

質問者からのお礼

今開発環境にいないので実際のソースがないのですが、 外のdivを突き破って中身が出てしまうので仕方なくheightで中身分の高さを設定したり 中身分をmin-heightで設定すればいいのかな…?と思って設定してみましたがうまくゆかず困っておりました。 (中身は両方100pxにするつもりだったのを間違って片方200pxと書いてしまいました、すみませんorz) →min-heightもそういえばそうですねすみません。。 自宅環境はIE6のみですが 書いていただいたコードをhtml文書にしてプレビューすると 確かにちゃんと外のdivにおさまってます。 すみません、親切ついでにもうひとつよろしいですか? divの使い方がよくわかるサイトを教えていただけませんか。 (質問内容と若干ぶれてしまいますがorz) divを使い始めたのはここ最近でtableでページ構成するのに慣れてしまっているので divについてはかなり疎いと自分でも思います。 とほほの…とかで端的な情報はみるんですがdivの基本についてズバリ解説されてるサイトが あれば見て勉強したいのですが、ご存じではないでしょうか。。。

関連するQ&A

  • divの背景を高さ100%表示

    以下のように、divをつかって背景色を設定した際、 右のピクセル指定の背景は、スクロールバーが出た場合でも 指定された高さまで背景色が表示されるのですが、 左の100%表示指定の方はウィンドウで隠れた部分で切れてしまいます。 色々調べたのですが、 過去にも同じような内容で質問があり、min-heightを追加する事で解決するとありました。 同じように試してみたのですが、思ったように表示がされません。 指定している場所が間違っているのでしょうか? <style type="text/css"> html{ height:100%; } body { height:100%; } #test1 { height:auto !important; height:100%; min-height:100%; float:left; width:400px; background-color:black; } #test2{ float:right; height:800px; width:400px; background-color:black; } body > #test1 { height: auto; } </style> </head> <body> <div id="test1"></div> <div id="test2"></div> </body> </html>

    • ベストアンサー
    • HTML
  • スタイルシートでのデザイン

    HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。

    • ベストアンサー
    • CSS
  • このcssをIEで見ると?

    お世話になります。 下記のように書くと、div#bの左からのマージンがIEで見ると、なぜか倍の20pxになってしまいます。FirefoxやOperaはちゃんと表示されるのですが、原因はなぜなんでしょうか? ご存知の方、よろしくお願いします。 <html> <head> <style type="text/css"> <!-- div#a { width:748; height:200px; background-color:#cccccc; } div#b { margin-left:10px; float:left; width:354px; height:100px; background-color:red; } div#c { float:left; margin-left:20px; width:354px; height:100px; background-color:#0000ff; } --> </style> </head> <body> <div id="a"> <div id="b">b</div> <div id="c">c</div> </div> </body> </html>

    • ベストアンサー
    • HTML

その他の回答 (1)

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

NO.1の回答者です(お礼拝見済み) 誤 min-heightt:100px; 正 min-height:100px; 失礼。 DIVではなく、ブロック要素を学べばDIVが理解出来ます。 DIVは、他のブロック要素と違って中身の無い単なる入れ物ですからズバリの解説も何もありません。DIVの中身をどうするかによって、DIVを使い分ければ良いだけです。 通常は、横幅100%で表示されるので、 必要ならwidthを設定したり、IDやclassを付与してCSSを設定します。 これだけです。 今回のfloatは、初心者なら必ずぶつかる壁で、 ここで諦める初心者が多いようです。 float + width + clear の3点セットが基本です。 レイアウトが崩れたり、背景が出なかったりするのは、この基本を学ばずに進むからでしょう。 HTML,CSSは、基礎から順に覚えなければ、後々苦労します。 IE6環境なら、Firefoxかchromeでも入れて表示確認した方が良いでしょう。 あとは、覚えたHTML,CSSをどう応用するかが問題なのです・・・ あ、サイトですが特にはありません。その都度調べましょう。 その前に、(X)HTML,CSSの分厚い参考書を買えば1冊で十分役立ちます。 人それぞれの手法があるので、 各々色んな応用方法から自分に合う方法を見つけていますので。 今回のfloat,clear方法ですら、数種類あるんですよ・・・

共感・感謝の気持ちを伝えよう!

質問者からのお礼

遅くなってしまいすみません。 ブロック要素ですか、了解です。 持ってる分厚いhtml書をもういちど読み直して見ます。 ありがとうございます~。

関連するQ&A

  • 左右の高さを揃えたいんですが

    css.divのみでレイアウトする勉強中です。 テーブルのように表示内容によって変化する左右の要素の高さを 揃えるにはどうすればいいのかで悩んでいます。 <html> <head> <style type="text/css"> html{height:100%;} body{height:100%;text-align:center;magin:0;} .head{width:800;background:#f8ffff;border:1px solid #000;} .main{height:100%;width:800;} .left{height:100%;width:20%;float:left;background:#f8f8ff;border:1px solid red;} .right{height:auto;width:75%;float:right;background:#aaaaaa;padding:5px;} .center{height:1500;width:200;background:#00ffff;} .foot{clear: both;background:#444666;color:#fff;} </style> <title>test</title> </head> <body> <div class="head">title</div> <div class="main"> <div class="left"> left <br> <font color=red> ※この要素を右と揃えたい</font> </div> <div class="right"> right <div class="center"> この要素の高さが変わる </div> </div> <div class="foot"> foot </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • htmlを組んでいるのですが、DIVを使用した階層の作り方がわからず困

    htmlを組んでいるのですが、DIVを使用した階層の作り方がわからず困っています。 2レベルまでの階層ならば、まだわかるのですが、3レベル以上になった場合に思い通りに動作させることができなくなってしまいます。 具体的には、下で記述した場合、 <div id="test"> テスト </div> が、右寄せにならないのですが、何がいけないのでしょうか? 【-------------html-------------】 <DIV id="wrap"> <div id="head"> <div id="logo"> ロゴ配置予定 </div> <div id="test"> テスト </div> </div> <div id="menu"> メニュー </div> <div id="left"> レフト </div> <div id="right"> メインコンテンツ </div> <div id="foot"> フッタ </div> </dib 【-------------css-------------】 /* レイアウトの設定*/ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:600px; background-color:#FFFFCC; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:600px; height:350px; background-color:#CC9999; div#logo{ position: absolute; float: left; width:200px; height: 30px; } div#test{ width:100px; height: 30px; float: right; } } /* ヘッダーの設定*/ #menu{ width:600px; height130px; background-color:#CC9900; } /* 左側の設定*/ #left{ width:150px; height:300px; float:left; background-color:#FFAC99; } /* 右側の設定*/ #right{ width:450px; height:300px; float:right; background-color:#CCCCFF; } /* フッターの設定*/ #foot{ position:relative; width:100%; height:30px; background-color:#CCFFCC; clear:both; }

  • [携帯]divで指定した背景色から画像がはみ出す。

    携帯用サイトを制作しているのですが、 <div style="clear:both;background-color:red;">    <img src="./images/icon.gif" width="64" height="64" align="left" style="vertical-align:middle;float:left;margin:5px;" />    <br />こんにちは </div> <div style="clear:both;~ と画像の横に文字が回りこんだとき、背景色が文字の部分にしかつかず、画像がはみ出した状態になってしまいます。 今回は1*1の透明なgif画像を使い、 <div style="clear:both;background-color:red;">    <img src="./images/icon.gif" width="64" height="64" align="left" style="vertical-align:middle;float:left;margin:5px;" />    <br />こんにちは       <div clear="all" style="clear:both;">          <img src="./images/space.gif">       </div> </div> <div style="clear:both;~ とすることで解消できたのですが、 参考にしていたサイトではどうやら画像を使わずに背景内に収めているようです。 後学のために、画像を使わず、背景から画像をはみ出さないように見せる方法を教えてください。よろしくお願いします。 docomoで動作確認しています。

  • clear: bothの事で質問です。

    XHTML+CSSを勉強してる初心者ですが。 この場を借りて質問させてもらいます。 判らない事は (1) <div style="background: #CCCCCC; height: auto; width: 700px;"> <div style="background: #888999; height: 100px;width: 300px;float:left;">画像</div> <div style="background: #999999; height: 300px;width: 400px;float:left;">画像の説明</div> <br style="clear: both;" /> (2) <div style="background: #CCCCCC; height: auto; width: 700px;"> <div style="background: #888999; height: 100px;width: 300px;float:left;">画像</div> <div style="background: #999999; height: 100px;width: 400px;float:left;">画像説明</div> <div style="clear: both;"></div> (1)と(2)では、 (1)は<br style="clear: both;" />と記入してますが (2)は<div style="clear: both;"></div>と記入してます。 この(1)と(2)は同じなのでしょうか? それと使うとするならどちらのほうが有効的なのでしようか? 教えていただければ光栄です。

    • 締切済み
    • CSS
  • div領域をウインドウサイズに合わせる

    divタグで生成された3つの領域を横に並べたいのですが、 左2つは幅をピクセル指定で固定し、3つめをウインドウサイズに合わせて残りの幅全てを使う、という指定はどうすればいいでしょうか? 高さもやはりウインドウサイズにあわせるようにしたいです。 また、左2つの領域は固定したまま、3つめの領域のみスクロールができるようしたいです。 現在下記で試していますが、うまくいきません。 お分かりになる方、知恵をお貸しくださいo(_ _*o) 【HTML側】 <div id="left">1</div> <div id="center">2</div> <div id="right">3</div> 【CSS側】 html,body{   height:100%;   width:100%;       } div#left{   width:150px;   height:100%;   float:left; } div#center{   width:160px;   height:100%;   float:left; } div#right{   width:100%;   height:100%;   float:left; }

    • ベストアンサー
    • 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
  • <div>この余白は・・・

    <div>で作ったボックスの中に、さらに<div>のボックスを二つ(box、box2)並べたいのですが、float:leftでboxを左に寄せると、次に回り込んで表示されるbox2との間にかなりの余白があります。 CSSでbox、box2にmarginは指定していないのですが、この余白は何なんでしょうか? また、このbox、box2をある程度間に余白を持たせた上でセンタリングしたいのですが、これもなぜかうまくいきません・・・。 ▼HTML <div class="out">  <div class="title">   <img src="img/title.jpg" width="700" height="75" border="0">  </div>  <div class="main">   <img src="img/main.jpg" width="700" height="375" border="0">  </div>  <div class="menu">   <img src="img/home_a.jpg" width="100" height="35" border="0">   <img src="img/first.jpg" width="100" height="35" border="0">   <img src="img/info.jpg" width="100" height="35" border="0">   <img src="img/order.jpg" width="100" height="35" border="0">   <img src="img/support.jpg" width="100" height="35" border="0">   <img src="img/link.jpg" width="100" height="35" border="0">   <img src="img/question.jpg" width="100" height="35" border="0">  </div>  <div class="area">   <div class="box">    <h5>AAAAAAAAA</h5>    <img src="img/kari.gif" width="250" height="100" border="0">   </div>   <div class="box2">    <h5>BBBBBBBBB</h5>    <img src="img/kari2.gif" width="250" height="100" border="0">   </div>  </div> </div> ▼CSS div.out{ width:700px; background-color:#ffffff; } div.main{ border-style:solid none solid none; border-width:10px; border-color:#666666; } div.menu{ margin-bottom:50px; } div.area{ text-align:center; padding:0.7em; border:solid; border-color:red; } div.box{ float:left; width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } div.box2{ width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } h5{ margin-bottom:0px; padding:0.5em; }  どなたか知恵をお貸しください。よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • floatをfooterに指定すると正しく表示ができない。

    floatをfooterに指定すると正しく表示ができない。 画像の(3)のようにfooterにfloat:leftを指定しなければ綺麗に表示されるのは分かります。ところが、画像の(1)や(2)のように、footerにfloat:left;を指定して、次の行で<div style="clear:left"></div>と指定して、footerにfloat:leftを指定しなかったのと同様の処理をすると、(1)や(2)のようにwidthに対して様々な現象が起きてしまいます。 (1)はwidthを指定しない場合、width:auto;を指定した場合に見られ、(2)はwidth:100%;とした場合にwrapperよりはみ出すという現象が起きます。なぜ、floatを指定しないのと指定後解除するのとで同様の結果が得られずに違った結果になるのでしょうか?わかる方いらっしゃいましたら回答宜しくお願い致します。 以下はソースでそのままエディタに貼り付けると表示できます。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>サンプル</title> <style type="text/css"> <!-- /* default.css */ #container { background:red; border:10px solid fuchsia; padding:10px; } #left { float: left; width: 200px; height:100px; background:yellow; } #right { float: left; border:5px #000 solid; width: 200px; height:200px; background:black; color:#FFF; } #footer { float: left; height:200px; background:blue; border:5px #000 solid; color:#FFF; } --> </style> </head> <body> <div id="wrapper">WRAPPER <div id="header">HEADER</div> <div id="container">CONTAINER <div id="left">LEFT </div> <div id="right">RIGHT </div> <br style="clear:left"/> </div> <div id="footer">FOOTER </div> <div style="clear:left"></div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • ieとfirefoxでdiv枠に2pxのズレ

    宜しくお願い致します。 現在下記のHTMLを作成致しましたが、CSSにてfirefoxとchomeに合わせると ieではdiv枠が2px程左右にズレが生じてしまいます。ieに合わせると逆の現象が生じます。 何が原因なのか判りません。宜しくご教示下さい。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <style type="text/css"> .clear {clear:both; } .clear hr {display:none;height:0px;font-size:0pt; } #wrap {width:810px; text-align:center; margin:0px auto;} #header{font-size:70%;color:green;margin-top:5px;text-align:center;} #menu {width:200px;height:auto; float:left;margin:0;position: relative;} #goods {width:600px;height:auto; float:right;margin:0;position: relative;} #top-title { width:200px;height:70px; float:left; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #336600;position: relative;} #top-menu { width:600px;height:70px; float:right; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #336600;position: relative;} /* position: relative削除したり widthの値を%にしたり色々試してみましたが??? */ .col_01_l{width:295px;height:310px;position: relative; float:left; margin-bottom: 5px;background-color:#ffffee;border:solid 1px #336600;} .col_01_r{width:295px;height:310px;position: relative; float:right;margin-bottom: 5px;background-color:#ffffee;border:solid 1px #336600;} .col_05 {width:200px;height:auto; float:left; margin-bottom: 8px;background-color:#ffffee; border:solid 1px #336600;} .col_06a {width:600px;height:auto; float:right; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #000000;position: relative;} </style> </head> <body> <div id="wrap"> <div id="header"> </div><!-- /header --> <div id="goods"> <div id="top-menu"> </div><!-- /top-menu --> <br style="clear:both;"> <div class="col_06a"> <br><br> </div> <br style="clear:both;"> <div class="col_01_l"> <p>ブラウザieではずれませんが、 chrome、firefoxで、この枠が 右に2pxにずれる。 どのように直せば良いか具体的にご教示下さい。</p> </div> <div class="col_01_r"> <br> </div> <br style="clear:both;"> </div><!-- /goods --> <!-- ################################################################################## --> <div id="menu"> <div id="top-title"> <br> </div> <br style="clear:both;"> <div class="col_05"> <br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br> </div><!-- /col_05 --> <br style="clear:both;"> </div><!-- /menu --> <br style="clear:both;"> <!-- ################################################################################## --> </div><!-- /wrap --> </body> </html>

    • ベストアンサー
    • CSS
  • <div>でレイアウトすると上下に空白が出る

    現在cssを独学で勉強中です。 どなたか解るか方、教えてください。 <div>の中にまた<div>でBOXをつくりcssでは"float"を使ってレイアウト しようとしています。 下記の内容でHTMLとcssを記述していますが、入れ子にした<div>要素の 上下に20pxくらいの空欄ができます。 これを出ないようにする方法はありますでしょうか? というか、記述としては合っているのでしょうか? 一応いろんなサイトを参考にして記述してはいます。 また、IEとfirefoxでは空欄の出方が違います。 たぶんIEのバグなんでしょうが、対処の方法も含めて教えていただけると ありがたいのですが... 空欄は"margin-top"を「-20px」とかにするとなくなるのですが 今度はSafariでその分要素自体が小さくなってしまいます。 宜しくお願いします。 ---HTML(一応DTDの部分から載せておきます)--------- <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <link rel="stylesheet" type="text/css" href="test3.css" /> <title></title> </head> <body> <div id="container">  <div id="boxA">  A(ヘッダ)  </div>  <div id="wrapper">   <div id="boxB">   B(メインカラム)   </div>   <div id="boxC">   C(サイドバー1)   </div>  </div>  <div id="boxD">  D(サイドバー2)  </div>  <div id="boxE">  E(フッタ)  </div> </div> </body> </html> --- css ----------------------- body { text-align:center; margin-top: 0px; } #container { width:800px; height: 800px; margin-top: 0px; margin-left:auto; margin-right:auto; text-align:left; background-color: #33FF66; } #boxA { width:100%; height: 150px; background-color: #9999CC; } #wrapper { width:620px; height: 200px; float:right; background-color: #33CC00; } #boxB { width:440px; height: 200px; float:left; background-color: #999933; } #boxC { width:180px; height: 200px; float:left; background-color: #FF9966; } #boxD { width:180px; height: 200px; float:right; background-color: #996699; } #boxE { width:100%; height: 150px; clear:right; background-color: #33CCCC; }

    • ベストアンサー
    • HTML