- ベストアンサー
DIVの崩れを防ぐには
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
「floatで」組んだ場合ですよね？<div>は何もしませんので。 結論から言うとそのとおりです。 カラム落ちがかっこ悪いというだけでなく、ウィンドウサイズを変えることでレイアウトが変わってしまうのはユーザビリティの観点から見てもよくないですので、ぜひ囲ってください。Aも一緒に入れるかどうかはAの意味にもよりますのでご自身の判断でお願いします。
その他の回答 (8)
- DrFell
- ベストアンサー率55% (305/551)
#7様 足し算が出来なくって、お恥ずかしい限りです。ストンと落ちました。ありがとうございました。 #8様 仕様書に合わない！何故だ？と思ったのが誤解でした。お調べいただきありがとうございました。 kami222 様 妙な割り込み失礼しました。
お礼
解決したようで、なによりです。 参考になりました！ みなさま回答ありがとうございました！
- k0021
- ベストアンサー率26% (32/120)
No5ですがテンプレートの記述を参考に作成しましたがうまくいきませんので色々調査して作成しましたので通論なのチェックしていません。 なんせ老化予防にホームページを勉強していますので、真に申し訳有りませんが回答出来ません。 参考の対象部分は、 http://ryuso.info/me/se1/tp_p1.htm#a_b7 ですが、下の「左側表示・左側写真・右側写真・注意書き表示(プラウザ表示状態)」の方が良いと思いますが。ウィンドウの幅を100ぐらいに狭めても対応していますが。(参考の対象部分も同じですが) 35%＋64%＝99%ですが、どこで発生したか忘れました100%でしたらおかしく表示してので99%にしていますが、実際現時点では、100%でもかまいません。 <div style="width:90%;float:left;margin-left:1.25em;">だとおかしくなる？(IE8以降とmac系ブラザ)ではないですよね。
- naokita
- ベストアンサー率57% (1008/1745)
NO.2ですが、ちょっと横道に逸れますが 失礼 DrFellさん 誤解を誤解してるよ。 101％って何の話？ 83+4+4＝91％
- DrFell
- ベストアンサー率55% (305/551)
#4です。#5さん、ご指摘ありがとうございます。当方でも、おっしゃる操作を確認いたしました。101％なのに落っこちていないです。腑に落ちないので教えていただきたいのですが、 今回私が思い込んでいた親要素に対して100％以内ならおさまるという認識は、ｃｓｓ仕様書の9.5.1 浮動体を配置する（Positioning the float: the 'float' property） でfloatの配置の箇所、 7.自身の左側に更に別の左浮動ボックスを持っている左浮動ボックスの外右辺は、包含ブロックの右辺より右にきてはならない（簡潔に言うと、左浮動体は、できる限り左に寄せられていなければ、右辺を突き抜けてはならない）。右浮動ボックスも同様の規則に従う。 に反して配置されているように思います。すべてのブラウザが誤解釈をしているとも思えず、私の理解に誤解が生じているのでしょうか。ご提示されている例では、フロートされている右辺が包含ブロックの右辺より右に来てると思われるのですが、どのように理解すればいいのか、教えていただけないでしょうか？ 便乗質問で申し訳ありませんが、どうぞよろしくお願いします。
- k0021
- ベストアンサー率26% (32/120)
私の場合、A・B・CもしくはB・Cをさらにブロックで囲む方法を推薦します。 行の開始位置か判るし まわしこみの解除をしないとブラザーより おかしくなりますので。 なお「著作権について」の行は、まわしこみの解除は、必ず指定しないとIEでは、良いですがMac系では、おかしくなります。 ％指定でもある程度ウィンドウの幅を狭めた場合発生します。 なお、No.4さんの回答の「paddin,border,marginが0と仮定します。それらがある場合は、50％から引き算してください。」は誤りですよ。 親要素に対してですよ。 添付写真の「注意書き等」の下の行「写真説明一・写真説明二・写 真」は、「注意書き等」が親要素ですよ。 <div style="width:44%;float:left;"> <div style="width:4%;float:left;">写真説明一 <div style="width:4%;float:left;">写真説明二 <div style="width:83%;float:left;;">写真 で作成実際作成しています。 表示上100％にしていません。
お礼
やっぱり囲むのが一番安全ですよね。 ありがとうございました！
- DrFell
- ベストアンサー率55% (305/551)
Ｂ+Ｃ<100% を保てば下に回りこまないです。 例えば、 div{display:inline-block;width:50%;} をB/Cに適用では、どうでしょうか？ もしくは、 div{float:left;width:50%;} ただし、paddin,border,marginが0と仮定します。それらがある場合は、50％から引き算してください。
お礼
できれば％指定は使いたくなくて・・・すみません； ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
「ウィンドウの巾を狭めたとき」に、「floatが解除されないように」という矛盾した要望をもたれても、無理です。 そもそも、floatは、画像などの周囲に文章を【回り込ませるため】のプロパティですから、『表示しきれないときは下側に回りこませる』のですから、floatでブロックを並べること自体、すでに「ウィンドウ巾に合わせて」を否定しているのです。 --よく見かける方法ですが、どこかのオーサリングツールか、誰かが流行らせたのでしょうね。 floatさえ使わなければ、いとも簡単に実装できます。しかも本文中ではfloatを使ったり、解除したりが自由に出来ます。詳しくは下記サンプルをご覧ください。 [HTML4.01strict+CSS2.1] ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み ※タブは、＿に置換してあります。 <!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>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;background-color:gray;} div.section p{ ＿text-indent:1em; ＿margin:0 1em; ＿line-height:1.6em; } div.header,div.article,div.footer{ ＿width:70%;margin:0 auto;/* センター配置IE5,非対応 */ /* min-width:400px; */ /*あまり小さくならないようにしたいときは */ ＿border:solid 1px rgb(255,200,200);background-color:rgb(255,200,200); } div.article{ ＿position:relative; ＿background-color:lime;border-color:lime; } div.article div.section img{ ＿float:left; ＿margin: 5px; ＿border:1px solid gray; ＿background-color:white; } div.article div.section{ ＿margin-left:42%;margin-bottom:200px;/* 見本のため */ ＿clear:left;/* clearがこのブロック内で使える */ } div.article div.contentTable{ ＿position:absolute; ＿top:0;left:0;width:40%;height:100%; ＿background-color:aqua;border-color:aqua; } div.footer{background-color:yellow;border-color:yellow;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿＿<div class="abstract"> ＿＿＿<h2>要約</h2> ＿＿</div> ＿</div> ＿<div class="article"> ＿＿<div class="section"> ＿＿＿<h2><a name="QUESTION">質問</a></h2> ＿＿＿<p> ＿＿＿＿図のように<div>で段組を作った場合、このままだとウィンドウの幅を狭めた時に、CのブロックがBの下に回りこんでしまうと思うのですが、これを防ぎたい場合はやはりA・B・CもしくはB・Cをさらにブロックで囲うしか方法はないでしょうか？ ＿＿＿</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h2><a name="ANSWER">回答</a></h2> ＿＿＿<p> ＿＿＿＿<img src="./images/sample.gif" width="100" height="60" alt="画像"> ＿＿＿</p> ＿＿＿<p> ＿＿＿＿floatさえ使わなければ、実に簡単に実装できます。floatをブロックの配置に使いませんから、本文中でfloatを使ったり、解除したりが自由に出来ます。floatはそのためにとっておきましょう。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿本来はabsoluteを使うべきです。特にリキッドスタイルの場合は、floatではなくabsoluteでなければなりません。 ＿＿＿</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h2><a name="SAMPLE">方法</a></h2> ＿＿＿<p> ＿＿＿＿IE6以前の古いブラウザに対応させるなら、必ず長くなるほう(多くは本文section)を基準にして、短いほうをabsoluteさせる。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿IE7以降の新しいブラウザは、min-widthやmax-widthプロパティが使えるのでそれを活用して、ある程度より小さなウィンドウには横幅を固定してしまうとよいかもしれません。 ＿＿＿</p> ＿＿</div> ＿＿<div class="contentTable"> ＿＿＿<ol> ＿＿＿＿<li><a href="#QUESTION">質問</a></li> ＿＿＿＿<li><a href="#ANSWER">回答</a></li> ＿＿＿＿<li><a href="#SAMPLE">見本</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>
お礼
ありがとうございました。
- naokita
- ベストアンサー率57% (1008/1745)
floatのみの場合は、 外枠で囲んでwidthを設置すると崩れませんが、 positionで固定したり、 その他のプロパティで配置する事も出来ます。
お礼
positionで固定・・・そういうのもありですね！ なるほど、参考になりました。ありがとうございます！
関連するQ&A
- HTMLのdivについて
HTMLで質問です。 DIVについて質問です 下の図で <body> <div="c"> <div id="a"> --------------- </div> <div id="b> ああああああああ いいいいいいい </diｖ> </div> ＜/body> という場合 <div＝”ｃ”> は全体のbody範囲でありますが divそのものを idで指定しなくても divだけでも全体を範囲しいた事にはならないのでしょうか？ ホームページ全体が範囲であり セレクタ範囲を後にCSSで装飾する場合 やはりIDで指定するのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- floatで並べた２つのdivの高さを揃えるには？
コーディング初心者です。 以下の内容のcssがかけなくて困っています。 内容は <p id="a">A</p> <div id="b">B</div> <p id="c">C</p> 今はこの3つをfloatで横並びにします。 #a {float: left;} #b {float: right;} #c {float: right;} ここで、BとCに入る内容が変わる場合でも2つの高さが揃うようにしたいのですが、 MTを使用し、Bを表示させないこともあるので、 BとCを<div>で囲み幅を指定することができません。 何か方法はありますでしょうか？ 参考のURL等を教えていただけるだけでもたすかります。 よろしくお願いします。
- 締切済み
- CSS
- divインラインボックスの改行を制御する方法
皆さん、こんにちは。ちょっと質問させてください。 HTML+CSSでWEBページを作っています。DIVタグで作ったブロックをdisplay:inline-blockでインライン化して表示させているのですが、ウィンドウを小さくするにともなってネストしたインラインボックスが改行されるとき、先に改行されるインラインボックスを強制したいのですが、方法はありますでしょうか？ ちょっと分かりにくいので図を書きました。 ブロックAとブロックBがインラインブロック化されて同じ行に配置されているとします。 更に、そのブロックB内にブロックB1とB2がネストしてインライン化されています。 ここでブラウザのウィンドウを小さくしたとき、chromeではまずブロックAとブロックBのインライン表示部分で改行されて、右下の図のようになりました。 期待しているのはそうではなくて、左下の図のように改行して欲しいのです。 これを強制する記述はありますでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- DIVでの段組でhight属性の設定方法
DIVでの段組でhight属性の設定方法 添付画像のような段組を外部CSSをつかってしています。 ●BとCにhightを設定しなかった場合 Cに色々コンテンツを入れていき、BよりCの縦の長さが長くなった場合、 BとDの間に隙間ができてしまいます。 ●BとCにhight[100％]を設定した場合 この場合もCの長さがBより長くなった時点で、BとDの間に隙間が発生します。 ●BにCよりも明らかに長い数値を入れた場合 Bのhightを[1000px]とかにしてCよりBを長くした場合、 BとDの間はきっちりとつながります。 ★質問 Cの縦の長さに関係なく、Bの縦の長さを連動させてBとDの間をあけないようにするにはどのようにしたら良いでしょうか？ ちなみに、BとCはEの中に入れています。 ------------------------- <div class="E"> <div class="B"></div> <div class="C"></div> </div> ------------------------- よろしくお願い致します。
- ベストアンサー
- HTML
- DIVブロックを画面をはみ出して配置するには
┌───┐ │Ａ │ ├─┬─┤ │Ｂ│Ｃ│ └─┴─┘ 上のようなレイアウトです。 Ａ、Ｂ、Ｃとも<DIV>です。 Ｂ、Ｃ を float=left にしているのですが、 Ｃの中身が大きくなるとＣがＢの下に来てしまいます。 ひとまず、table で横並べにしているのですが、 div と css で、Ｃが下に行かないようにする方法はありますでしょうか。
- ベストアンサー
- HTML
- float divの関係
ブロックdiv（Pとします）の中に、２つのブロックdivがあります。それぞれA、Bとします。 floatでA、Bを左寄せに並べた場合、Pに適用したスタイルシートがA、Bに反映されません。（文字サイズなど） 何が問題でしょうか？ よろしくお願いします。 <div id="P-style"> <div id="A-style">aa</div> <div id="B-style">bb</div> </div>
- ベストアンサー
- CSS
- floatさせたdivタグを折り返させたくない
Javascriptで開いた子ウィンドウ内のページについて レイアウトで困っております。 以下のようなブロック要素の配置について <div> <div style="float; left"> コンテンツA </div> <div style="float; left"> <div> コンテンツB </div> <div> コンテンツC </div> </div> <div style="clear: both"> </div> 以上のような配置になっており、 コンテンツ３の中身をJavascriptで書き換えています。 その際、コンテンツCの横幅が変動し右に大きく広がる場合があります。 それにより、ウィンドウサイズによってはコンテンツBCがコンテンツAに回りこんでしまいます。 何故こうなるかは理解出来るのですが、対策が思い浮かびません。 ●思いついたが避けたい対応策 ・親のdivタグに想定出来る最大値のwidthを設定する ・tableタグによるレイアウト 良い対応策はございませんでしょうか？ よろしくお願いします。
- 締切済み
- HTML
- CSS適用ページで余分なDIVタグが要求される
CSS初心者です、質問させてください。 XHTMLに外部CSSを添付させています。 headerは３ブロック、 contentsは３ブロックに分けてから各ブロックに複数ブロックをいれています。それら複数ブロックはそれぞれ幅と高さを指定しています。 contentsとfooterには「clear: both;」をいれています。 ソースは以下の通りです。 <?xml version="1.0" encoding="Shift_JIS"?> <!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=Shift_JIS" /> <title>無題ドキュメント</title> <link href="affiliate.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <div id="a_Left"> <div id="a1">A1</div> <div id="a2">A2</div> </div> <div id="a_right"> <div id="a3">A3</div> </div> </div> <div id="contents"> <div id="conLeft"> <div id="b1">B1</div> <div id="b2">B2</div> <div id="b3">B3</div> </div> <div id="conCenter"> <div id="c1">C1</div> <div id="c2">C2</div> <div id="c3">C3</div> </div> <div id="conRight"> <div id="d1">D1</div> <div id="d2">D2</div> <div id="d3">D3</div> <div id="d4">D4<div> </div> </div> </div> </div> <div id="footer">E1</div> </body> </html> 明らかにid="footer"の上にある</div></div>は不要なのですが、入れないと表示がおかしくなります。 なぜかさっぱりわかりません。 どうすればいいのでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- DIVを選択すると一部のDIVを僅かに大きくする？
画像のようにDIVで要素を構成しているとします。 DIV（B）の中にあるDIV（C)～（G）の要素に触れた場合、DIV（A)が僅かに大きくなるようにしたいのですが、jQueryとかでどのようなメソッドを使ったりすればいいでしょうか？
- ベストアンサー
- JavaScript
- レイアウトが崩れないようにするための、<div>を<div>で囲む理由
<div class="a">で一度幅や高さの指定をしているのに、ウインドウサイズを変更しても、レイアウトが崩れないようにするために、その<div>からさらに<div>で囲むのはなぜなんでしょうか？ <div id="wrapper"> <div class="a"></div> </div> div.a { width:900px; } #wrapper{ width:900px; }
- ベストアンサー
- HTML
お礼
やっぱりそれが一番ですか～ ありがとうございました！