- ベストアンサー
<div>レイヤー３層構造の、背景色表示についての疑問。
まずは下記 HTML を見て下さい。 <body> <div style=背景:赤 幅：100px> <!--大枠（１階）開始タグ--> <div style=背景:青 幅：100px> <!--中枠上（２階）開始タグ--> <div style=背景:緑 幅：40px> <!--小枠左（３階）開始タグ--> スタイル：float:left </div> <!--小枠左（３階）終了タグ--> <div style=背景:黄 幅：40px> <!--小枠右（３階）開始タグ--> スタイル：float:right </div> <!--小枠右（３階）終了タグ--> </div> <!--中枠上（２階）終了タグ--> <div style=背景:紫 幅：100px> <!--中枠上（２階）開始タグ--> clear:both </div> <!--中枠下（２階）終了タグ--> </div> <!--大枠（１階）終了タグ--> </body> 奥が１階で、手前が３階とします。 ２階には、上下に<div>が並び、上側の<div>にはさらに2つの<div>があります。 ３階では、左と右にfloatで分けて<div>を配置しています。 左の<div>幅40pxと右の<div>幅40pxを足した幅80pxは、１階と２階の幅100pxと比べると、 20px小さいので、左と右の間には、隙間ができます。 そこで問題です。 この隙間の色は何色でしょうか。 私は２階の色が出ると思うのですが、１階の色が出てしまうのです。 その原因はなんでしょうか。 floatが関係しているのでしょうか。 私の希望としては、左右の隙間の色は、２階上側の<div>背景色である青色であってほしいのですが、実際には１階背景色である赤が出てしまいます。
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
#３です。 補足ありがとうございます。 >つまり、私が質問で「２階の色が出ない」と言っていたことが、実際には出てしまったのです。 ご解決おめでとうございます。 >どうやら、原因はfloatには無かったようです。 ？補足のコードと質問のコードでは「clear: both;」の位置が違っていますよね。＃２の方も私も「原因はFloatである」として、補足のコードのように「clear: both;」の位置を変更することを勧めているんですが。^^; >テストパターンでは出たということで、サイト上では出ていない状態のままです。 もしかして、プラウザのキャッシュや一時ファイルが残ったままではありませんか？ IEならば一度、ツールから「インターネットオプション」を開けて、一時ファイルなどを削除してみてください。 >clearfixというスタイルがどういった内容なのか分かっていない あれはよくあるおまじないです。スタイルではありません。^^; 別に .footer { clear: both; } でも良いんですが、その人が何をコンテンツに入れたいのかが判らない時に、Floatを解除するクラス定義としてよくあるパターンなんです。 ですので、色々なプラウザにも応用できるように、回避要素を含めています。 >本来、知りたかったことは、 NO2さんの補足の所で書いたことなので、それが出来る方法がもしありましたら、教えて頂けると嬉しいです。 これは質問とは全く求める物が違う内容ですね。ここを締め切られて、別に質問をされる方がもっとよい回答がつくと思いますが、自分ならば「div#main」に背景画像（高さの狭い物：添付画像）を指定してしまいます。それで、中の「div#lefter」「div#righter」には色を指定しません。
その他の回答 (6)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
図の左上の形は、HTMLに使われるスタイルシート(CSS)では、無理です。 CSSには、親要素以外の他の要素サイズを参照する手段が用意されていないからです。 ただ、CSS2がすべてのブラウザで完全に実装されていれば、本来は可能な方法もありますが、実際、IE以外の他のブラウザ(firefox,Opera,Safari, Chrome)以外では可能です。(display:table-cellわ使う) ただ、右下のように、本文とノートに、一周するボーダーを設けないなら、方法はあります。
お礼
ありがとうございました（＾＾） また何かありましたら、教えて下さいね。
補足
発展的な回答をありがとうございます。 回答を読み、私がしたいことは「簡単にはできなそうなんだな」ということが分かりました。 これは私にとって、大きな前進と言えます。 ありがとうございます。 これから、自分なりに妥協案を模索したいと思います。 本質問において、大変ためになるお話を色々とありがとうございました。 また質問することがありましたら、よろしくお願いします。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ORUK1951です。 ≫背景色の回り込みを防ぐ方法を探しています。 これは前回も説明したように、floatを使う限り無理なのです。 なぜなら、floatは【回りこみの指示】なのですから。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 9.5 浮動体 浮動体は，現在の行において左又は右にずれるボックスとする。浮動体(すなわち，"浮動される"ボックス又は"浮動する"ボックス)の最も興味深い特徴は，内容が辺に沿って流し込まれてもよいこと(又は'clear'特性によってそれが禁止されてもよいこと)である。内容は，左浮動ボックスの右側の下，及び右浮動ボックスの左側の下に流し込まれる。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Visual formatting model( http://www.y-adagio.com/public/standards/tr_css2/visuren.html#floats )］より ですから、「floatを使う限り、必ずそうなります。(No.2)」 今回、「各ブロックの内容が、どのように増減するか」によると、それをフロートさせる方法もなくはないですが・・・ 裏技的にすべてのブロックをフロートさせる手もあるけど、そうすると「IE7以前の間違った解釈のため、すべてのブラウザで同じ表示にすることは出来ません。」が関わり、最下段のブロックとの間隔が調整できません。それでもよければ・・ いくつかの方法がありますが、そのすべてを説明する労力は期待しないでください。 せいぜい、「各ブロックの内容が、どのように増減するか」だけは教えて・・・
お礼
ありがとうございました（＾＾） また何かありましたら、教えて下さいね。
補足
回答ありがとうございます。 ＞これは前回も説明したように、floatを使う限り無理なのです。 そうでしたね、すみません。 他の方法でも構わないので、もしあれば教えて下さい。（＞ ＜; ＞せいぜい、「各ブロックの内容が、どのように増減するか」だけは教えて・・・ すみません（笑 情報提供を求められていたことに気付きませんでした。（苦笑 簡単に説明すると、 添付画像の緑ボックスには、文章（メインコンテンツ）が、 その右の黄色ボックスには、メニューと、新着の項目が、 下の紫には、増減無しのフッターメニューが配置されます。 よくあるブログレイアウトと同じです。 ポイントは、 常に緑ボックスの方が黄色ボックスよりも長くなるわけではない、 ということです。 もし、常に緑が長くなるようでしたら、自分でもなんとかなりそうなのですが、必ずしもそうではないので現在困っています。 背景画像などの画像を使わない方法で、なんとかなればなと思っています。 ちなみに、緑と黄色の間のスペースは、境界線という位置づけです。 幅は10px以下です。 緑ボックスと、黄色ボックスの背景色は同じ色で、境界線は別色、という感じのデザインにしたいと思っています。 当初、境界線の色を、２階のdivの背景色で設定しようと考えていたわけですが、floatによる回り込みで、それがうまくいかなかったのです。 （私の悩みの核はここにあります。本件の質問文とズレが生じてきている点については、どうしようか迷っている所です。汗）
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.2で回答したORUKA1951です。 ≫通常、緑のコンテンツが伸びると、緑の高さが増し、青の下部分に 赤がどんどん回り込みます。 ≫これを阻止、緑の高さが伸びるのと一緒に青も一緒に伸びてほしいと 考えています。 新情報ですね。(^^) ポイントは、各ブロックの内容が、どのように増減するかです。最初の質問では明示されていなかったのですが、私は質問を十分内容のある記事を５コマに分割配置すると想定して以下のサンプルを提示しました。内容を追加すると・・ <body> <h1>title</h1> <h2>subTitle</h2> <div id="Main"> <p>本文・・・・・・・・・・・・・・・</p> <div class="note head"><!-- 頭注 --> <p>頭注・・・・・・・・・・・・・・・</p> </div> <div class="note foot"><!-- 脚注 --> <p>脚注・・・・・・・・・・・・・・・</p> </div> <div class="memo"><!--メモ--> <p>メモ・・・・・・・・・・・・・・・・・・・・</p> </div> </div> </body> これに似たようなものなら、例のように、class/id名が内容を示すようにしていただくとよいでしょう。 「各ブロックの内容が、どのように増減するか」 常に、Main直下の内容は多いとか、・・ また、背景色は必要なのかとかも
お礼
ありがとうございました（＾＾） また何かありましたら、教えて下さいね。
補足
度々ありがとうございます。 私が未熟であるために、説明頂いている内容を私は今一つ理解できていないように思います。 http://www.geocities.jp/march4_photo/ こちらのページを見て頂けると分かりますが、 今回の質問の本題である背景色の問題はひとまず解決したとして、 次の問題として、 （上記リンク先ページの）矢印右側の出力結果の図で、 黄色いdiv（四角）の下に、背景色が回り込んでいるのを、 なんとかしたいわけです。 その方法を、NO５の回答でして頂いているのかもしれませんが、 私にはその内容を理解することができませんでした。汗 すみません。 今回書いて頂いたコードを、前回書いて頂いたコードの<body>～</body>と交換し、出力してみました所、 やはり、右側のdiv下に背景色が回り込んでいたので、 一体この追加コードはどういう意味なのだろうか？？と悩んでしまいました。汗 NO4さんに提示して頂いた方法、つまり、NO4さんオリジナルの添付画像のような背景画像を用意し、それを繰り返し表示させて目的を達成するという方法ではない方法で、背景色の回り込みを防ぐ方法を探しています。 もし、良い方法がありましたら、教えて下さい。 よろしくお願いします。 ※リンク先ページの説明 本件の質問用に簡易的に作ったページ（Yahoo!ジオシティーズ）です。 左側の図が、div構成を表す図で、 右側が、それを出力した結果を表す図です。
- suzuko
- ベストアンサー率38% (1112/2922)
オーソドックス（それとも古い？）方法ならば、外部CSSに .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } として、 </div> <!--小枠右（３階）終了タグ--> <div class="clearfix"></div> </div> <!--中枠上（２階）終了タグ--> と紫に「clear: both;」を入れないで、Floatの直後に入れれば、Firefoxでもちゃんと真ん中に青が見えますよ。 あなたのコードだと３階は全てfloatさせたままになり、「２階に物がない」とプラウザによっては判断するからではないでしょうか？
お礼
ありがとうございました（＾＾） また何かありましたら、教えて下さいね。
補足
NO2さんの回答を改造して、試してみました。 スタイルの名前等を多少変えています。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Untitled</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- div#all{ width:800px; background-color:#FF0000; } div#main{ width:800px; background-color:#0033CC; } div#lefter{ width:200px; background-color:#009933; float:left; } div#righter{ float:right; width:300px; background-color:#FFFF66; } div.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } div.footer{ clear:both; height::100px; background-color:#CC99CC; } --> </style> </head> <body> <div id="all"> <div id="main">あ <div id="lefter">い<br>い<br><!-- 頭注 --> </div> <div id="righter">う<!-- 脚注 --> </div> <div class="clearfix"></div><!--メモ--> </div> </div> </body> </html> ＜返答＞ <div class="clearfix"></div> のclearfixのところをfooterに変えた場合でも、２階の青は表示されました。 つまり、私が質問で「２階の色が出ない」と言っていたことが、実際には出てしまったのです。 テストパターンでは出たということで、サイト上では出ていない状態のままです。 どうやら、原因はfloatには無かったようです。 本来、知りたかったことは、 NO2さんの補足の所で書いたことなので、それが出来る方法がもしありましたら、教えて頂けると嬉しいです。 今回提示して頂いた、clearfixというスタイルがどういった内容なのか分かっていない私ですが、どうぞよろしくお願いします。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
floatを使う限り、必ずそうなります。 また、IE7以前の間違った解釈のため、すべてのブラウザで同じ表示にすることは出来ません。 また、レイヤーという考え方をするとはまってしまいます。CSSの場合は、カスケードと詳細度。いわゆる優先順位で考えるようにしましょう。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>Untitled</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- div#Main{ width:800px; border:red 1px solid;background-color:pink; position: relative; } div#Main div{ border-style:solid; border-width:1px; } div#Main div.head{ width:200px; border-color:green; background-color:rgb(200,255,200); height:200px; float:left; } div#Main div.foot{ float:right; width:300px; border-color:blue; background-color:rgb(200,200,255); height:100px; } div#Main div.memo{ clear: both; height: 100px; border-color:orange; background-color:rgb(255,255,100); } --> </style> </head> <body> <h1>title</h1> <h2>subTitle</h2> <div id="Main"> <div class="note head"><!-- 頭注 --> </div> <div class="note foot"><!-- 脚注 --> </div> <div class="memo"><!--メモ--> </div> </div> </body> </html>
お礼
ありがとうございました（＾＾） また何かありましたら、教えて下さいね。
補足
回答ありがとうございます。 早速、提示頂いたソースコードを表示し、確認してみました。 赤バックに、左上に緑、右上に青、下に黄色という配置になっていますね。 以後、この図で説明させて頂きます。 私がしたいことは、 左上の緑と右上の青を常に、同じ高さにすることです。 図だと、青の下に赤が回り込んでいますよね。 この回り込みを阻止したいわけです。 通常、緑のコンテンツが伸びると、緑の高さが増し、青の下部分に赤がどんどん回り込みます。 これを阻止、緑の高さが伸びるのと一緒に青も一緒に伸びてほしいと考えています。 （緑も青も、どちらもheight:1000pxなどのように固定する方法は無しで。） 何か方法はありますでしょうか。
- nori_007
- ベストアンサー率35% (369/1048)
予想通り <div style=背景:青 幅：100px><!--中枠上（２階）開始タグ--> の色が出ているだけではありませんか？ それとも添付画像のようにならないと言うご質問ですか？ それなら、html ソースと、CSS をきちんと表記しましょ、今のソースで検討しても意味はありません。
お礼
ありがとうございました（＾＾） また何かありましたら、教えて下さいね。
補足
質問文を読んで頂ければ質問内容は分かるかと思います。 画像はオマケです。（画像のようにならない という意味で添付しています。質問文で理解できます。）
お礼
補足回答には「添付画像を載せる機能」はないようなので、 簡易ホームページを作ってみました。 http://www.geocities.jp/march4_photo/ 補足文中の、添付画像なんたら という箇所は、このページを見てご理解下さい。 よろしくお願いします。
補足
さらなる回答ありがとうございます。 ＞ご解決おめでとうございます。 んー、まだスッキリしてません。（＾＾； ＞？補足のコードと質問のコードでは「clear: both;」の位置が違っていますよね。 あ、補足で書いたコード（＃２さんのコードを拝借して書いたコード）と質問で書いたコードで、「clear:both」の位置が違っていましたね！すみません！ これに気づけていませんでした。 この違いがどう影響するのかについて、実際に試してみました。 その結果が添付画像です。 見方は、左側の図形がHTML上でのdiv配置で、右側が出力結果です。 要するに、 <div class="footer">あ</div> の置き場所の違いで、背景色が異なるという結果を示しています。 ＞＃２の方も私も「原因はFloatである」として、補足のコードのように「clear: both;」の位置を変更することを勧めているんですが。^^; そうだったのですか～。気づいていませんでした。（苦笑） コードを見て、ふむふむと読み、それをブラウザに出力して、ほぉ～と思っただけでした。（汗） ＞プラウザのキャッシュや一時ファイルが残ったままではありませんか？ その可能性は薄そうです。 実際のサイトのdiv配置が例１のタイプなので、まず間違いなく、それが原因であると思われます。 ＞あれはよくあるおまじないです。スタイルではありません。^^; おまじないでしたか。。。汗 って、なんだそりゃーと突っ込みたくなりますが、この際、脇に置いておきます。 ＞ここを締め切られて、別に質問をされる方がもっとよい回答がつくと思います そうですね。検討してみます。 ＞自分ならば「div#main」に背景画像（高さの狭い物：添付画像）を指定してしまいます。それで、中の「div#lefter」「div#righter」には色を指定しません。 はい、この方法は知っているのですが、ページビューが重くなりそうなので、背景画像を使わずに表現できないかと模索していました。 でも、私のしたいことが正確に伝わっていることが感じられて嬉しく思いました。 まさに、そういうことをしたいのです！ ありがとうございます。