- ベストアンサー
<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 をきちんと表記しましょ、今のソースで検討しても意味はありません。
お礼
ありがとうございました（＾＾） また何かありましたら、教えて下さいね。
補足
質問文を読んで頂ければ質問内容は分かるかと思います。 画像はオマケです。（画像のようにならない という意味で添付しています。質問文で理解できます。）
関連する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
- DIVで表示が崩れる。
こんにちわ。 お願いします。 TABLEから脱出してDIVで整理整頓しようとおもっているのですが なかなかうまくいきません。 ソースはっちゃいますね <DIV style="width : 780px;height : 100%;z-index : 0;"> <DIV style="width : 780px;clear : both;z-index : 1;"></DIV>(2) <DIV style="width : 200px;float : left;z-index : 2;"></DIV> <DIV style="width : 380px;float : left;z-index : 2;"></DIV> <DIV style="width : 200px;float : right;z-index : 2;"></DIV>(1) </DIV> といった感じでベースになっているDIVがデカデカとあり その中に一段目のDIV(回り込み解除/ヘッダー的役割です)があってその下にDIVが3つ回りこみで並んでる。 という。 で、問題が、HBビルダーで作っているのですが、 ３つならんでるDIV、 一番左は「左に廻り込み」 真ん中は「左に廻り込み」 で、問題は一番右です。 ここを「右に廻り込み」にしなきゃ３つ並ばないのですが、（廻り込み設定しない場合一段下がってしまいます）このままだと、(1)の部分に文章やらTABLEやら画像やらいれると(2)の位置へ表示されてしまいます。(ソースは変わらないのですが)。 ならばとおもってDIVを入れると、右のDIVの下に来てしまいます。 ならばとおもい３つのDIVをDIVで囲み、その外に書いても右のDIVの下へ… 俺がしたいのは、 とにかく一段下げたいのです。TABLEでいえばTRを作りたい。 わかりますでしょうか？
- ベストアンサー
- HTML
- [携帯]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で動作確認しています。
- 締切済み
- HTML
- div入れ子の背景画像
【CSS】 #layout{ width:755px; margin:auto; background-color:#ffff00; background-image:url(img/back.gif); background-repeat:repeat-y;} #menu{ width:168px; margin:0px; padding:0px; float:left;} #main{ width:570px; background-color:#ffffff; padding:0px 0px 0px 10px; float:left;} 【html】 <div id="layout"> <div id="menu">メニュー</div> <div id="main">メイン</div> </div> レイアウトで指定した背景画像を縦に繰り返し表示させたいのですが、 上記のCSSだとIEはOKなのですが、foxが表示されません。 メニューidにはデザイン上背景画像は設定できません。 また、 <div id="layout"> あああ </div> を試したら背景画像が表示されましたので、パスの間違いはありません。 どうすれば良いでしょうか？ 知恵をお貸しいただけますでしょうか。 宜しくお願い致します。
- ベストアンサー
- HTML
- レイヤーを背景だけ透過させたい
お世話になります。 レイヤーを背景だけ透過させたく、質問させていただきます。 レイヤーを透過させたい場合、よくスタイルシートのfilterが使われると思います。 たとえば <div style="width:100; height:20; color:#ff0000; background-color:#0000ff; filter:Alpha(opacity=60);"> フィルター適応</div> のようにすると、レイヤー全体が透過されます。 しかし、今回やりたいのは、背景のみが透過し、文字は透過させたくありません。 1つ考えた方法として、 <div style="width:100px; height:20px; top:0px; left:0px; position:absolute; background-color:#0000ff; filter:Alpha(opacity=60);"> </div> <div style="width:100px; height:20px; top:0px; left:0px; position:absolute; color:#ff0000;"> フィルター適応 </div> のように、無理やりレイヤーを2つ重ねて表示できないこともないのですが、もっとスマートな方法はないでしょうか。 ご存知の方がいらっしゃいましたら、ご教授お願いいたします。
- ベストアンサー
- HTML
- divで作成したレイアウトに背景画像を付けたいが付けられない
divでレイアウト作り背景画像を入れたいのですが背景画像が思うように適用されません。 以下のようなサイトのように、作成したレイアウトのコンテンツ部分（真ん中白い背景色部分）に背景画像をつけたいのですが、色々やってみたのですが背景画像が適用されません。 参考サイト：http://www.realbit.net/rb_results/index.html 私のソースコードは以下です。 HTML <body> <div id="header"> <p>ヘッダー</p> <p>あああ</p> </div> <div id="container"> <div id="incontainer"> <div id="main"> <p>メイン</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> <div id="leftMenu"> <p>左メニュー</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> </div> <div id="rightMenu"> <p>右メニュー</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> </div> <div id="footer"> <p>フッター</p> <p>あああ</p> <p>あああ</p> </div> </body> CSS #header { background-color: #FF3; width: 920px; margin-right: auto; margin-left: auto; } #container { background-color: #F00; width: 920px; margin-right: auto; margin-left: auto; } #incontainer { float: left; width: 720px; } #main { float: right; width: 520px; background-color: #900; } #leftMenu { background-color: #00F; float: left; width: 180px; margin-left: 20px; } #rightMenu { float: right; width: 180px; background-color: #FF9; margin-right: 20px; } #footer { background-color: #F0F; clear: both; width: 920px; margin-right: auto; margin-left: auto; } 参考サイトのようにコンテンツ部分に背景画像を入れたい、私の場合container部分にフォトショップで作成した背景画像をいれたいのですが、まずは実験的に、上記のように背景画像を入れる前に赤い背景色を入れて見ましたが赤い背景が出てきません。背景画像もためしに入れてみましたが適用されません。 なにが間違っているのでしょうか？
- ベストアンサー
- HTML
- ホームページの背景画像が表示されない。
ホームページ作成を行っておりますが、どうしても背景画像が表示しなくて困っております。 構成としては、ものすごく単純な構成なのですが・・。 構成は図に記載させていただきました。 大枠を【Contents】というDiv要素で囲み、 その中に【mainArea】【subArea】をDiv要素配置しております。 【mainArea】はFloat：Left【subArea】はFloat:Rightを設定し左右に配置しております。 【subArea】の中にさらに【6Support】というDiv要素を作り、その中に背景画像を設置したところブラウザにて表示されません。 色々試してみたのですが、どうしても表示されずにお手上げ状態です。詳しい方にアドバイス・ご教授いただければ幸いです。 ※ちなみに、上記構成にて【subArea】に背景を設定すると問題なく表示されます。 【HTML】 <div id="contents"> <div id="mainArea"> id "mainArea" の内容がここに入ります</div> <div id="sideArea"> <div class="6support"> 背景画像をおきたい。</div> </div> </div> 【CSS】 #contents { height: 1000px; width: 960px; margin-right: auto; margin-left: auto; } #mainArea { float: left; height: 800px; width: 700px; } #sideArea { float: right; height: 800px; width: 250px; } #sideArea .6support { height: 400px; width: 240px; background-repeat: no-repeat; margin-left: 7px; background-image: url(images/6supportBack.jpg); } 一応、原状を「 http://soltsuger.web.fc2.com/test.html 」にアップさせていただいております。参考になればご覧ください。 ご教授よろしくお願いいたします。
- ベストアンサー
- HTML
- 【CSS】横３カラム：左右は固定pxで中央カラムはが残り幅となるにはどうすれば？
http://www.amazon.co.jp/ のように、 横３カラムで、全体は１００％、一番左カラムと一番右カラムは固定px、真ん中のカラムは100%-左カラム固定pxー右カラム固定pxで、 ウィンドウをリサイズしても、この状況が変わらない・・・ というようなCSS（JSもからむのでしょうか？）は、どのようにすればつくれるのでしょうか？ <div style="float:left;"> 左カラム </div> <div style="float:right;"> 右カラム </div> <div> 中央カラム </div> 。。。だと、中央カラムが縦長になるとはみ出してしまいますよね・・・。 どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- 枠がスクロールさせると消える
ブログのような日記調記事をいくつも縦に並べて表示したいと思っています。 例） <div 大枠> <div 記事（float: leftにしている）></div> <div 写真></div> </div> 上記<div 大枠>から繰り返し・・・ 最初ぱっと見はそれらしい形になるのですが、IEの場合のみ下の記事を見ようとスクロールさせると、大枠の左右の枠線が一部消えます。 （上下は問題なく、角部分も表示される） 上の記事に戻ると、最初見えていた上部記事の枠も左右とも消えてしまいます。 画面から見えない位置にある記事の枠を表示させる時に異常が生じるようです。 IE以外では問題なく、どうしても直すことができません。 枠を常時表示させるにはどうしたらよいでしょうか。 枠の設定 <div class="waku" style="border-style:solid; border-width:thin; border-color:#CCCCCC; padding:10px 20px 0px 0px;">
- 締切済み
- 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
お礼
補足回答には「添付画像を載せる機能」はないようなので、 簡易ホームページを作ってみました。 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」には色を指定しません。 はい、この方法は知っているのですが、ページビューが重くなりそうなので、背景画像を使わずに表現できないかと模索していました。 でも、私のしたいことが正確に伝わっていることが感じられて嬉しく思いました。 まさに、そういうことをしたいのです！ ありがとうございます。