- ベストアンサー
CSSで1つのボックスの中に2つのボックスを横に並べて両サイドをピッタリ表示したい
CSSをちょこっと勉強している者です。 どうしてもうまくいかないところがあるので質問させてください。 先に参考イメージを載せておきます。 http://www.geocities.jp/shinopo/sample.gif 一番外枠になる１つのボックス(Aとする)の中に２つのボックス (左をB、右をCとする)を横に並べてAの横幅一杯ぴったりに表示 されるようにしたいと思っています。(参考イメージの下を参照) 参考イメージ下のようにAのborderを無くすとBとCが横に並んで ぴったりと表示されるのですが、Aに1pxのborderを設定すると CがBの下段に表示されてしまい、Cの右側とAのborderの間に 少しの隙間ができてしまいます。（参考イメージ上参照） この隙間を無くすにはどのようにすれば良いのでしょうか？ この隙間がなくなればBとCは横にぴったりと表示されると思うのすが。 自分なりにCのmargin-rightやpadding-rightに0pxなどを設定して 試してみましたがうまくいきません。 以下にコードを載せておきます。 ご教授よろしくお願い致します。 ============== index.html ============== <html> <head> <title>ホームページのタイトル</title> <link rel="stylesheet" href="./css/style.css" type="text/css"> </head> <body> <div id="centermain"> <div id="container"> <div id="banner"> <h1>見出し1</h1> </div> <div id="content"> <br> <h2>見出し2</h2> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="menu"> <br> <dl> <dt>メニュー</dt> <dd>カテゴリ１</dd> <dd>カテゴリ２</dd> <dd>カテゴリ３</dd> </dl> </div> <div id="foot"><p>Copyright (C) 2009 Test All Right Reserved.</p></div> </div> </div> </body> </html> ============== style.css ============== body{ margin:0px; } #centermain{ text-align:center; } #container{ width:780px; margin-left:auto; margin-right:auto; text-align:justify; border-top:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; } #banner{ background-image:url(../img/sima.gif); width:780px; height:60px; } #banner h1{ margin-top:0px; margin-bottom:0px; padding-top:15px; padding-left:20px; } #content{ float:left; background-color:#cccccc; width:540px; height:100px; padding-left:20px; } #menu{ float:right; background-color:#999; width:240px; height:100px; padding-left:10px; } #foot{ clear:both; text-align:center; font-size:12px; color:#ffffff; background-color:#cccccc; width:780px; height:25px; padding-top:7px; }
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
この見た目だとIE6あたりでしょうか？ もしそうだとすると、 #containerのborder 2px分も含んでwidthが780pxになります。 なので、内部領域は778pxです。 そこで#banner・#content+#menu・#footといった、 各780px分を詰め込もうとするのでずれが生じます。 解決するには、#containerのwidthを782pxにする、 もしくは各内部コンテナの幅を778px以内にするだけです。 ここからはまた別の話になりますが、 現状のままだと、他のブラウザでは総崩れになるかと思います。 （添付画像はFirefoxで閲覧した場合です） なぜなら、今回のように「border 2px分も含んでwidthが780px」というのは、IE特有のものだからです。 通常の幅は、指定があれば border幅 + padding + width になるので、 他のブラウザも視野に入れる場合は、 こちらを考慮した上で制作しなおすと良いでしょう。 簡単な考え方では、コンテナのwidthを指定したら それ自体に borderとpaddingのleft / right（※1）は併用せず、 内部ボックスのborderやpadding or margin で対応する。 height もまたしかりで、※1が top / bottomになります。 他には各ブラウザに合わせた「CSSハック」という方法もあります。 検索等で詳細サイトが出てくるので、そちらを参考にしてください。
その他の回答 (2)
- abril
- ベストアンサー率69% (388/560)
No.2です。No.1様のご回答と一部被りますが、ご容赦下さい。 とりあえず、IE6を含め主要モダン・ブラウザが標準準拠モードになる”HTML4.01 Strict／システム識別子有り”【A】とIE6が後方互換モードになる”XHTML 1.1／XML宣言有り”【B】とで実際に検証してみました。 今のままでは【A】【B】どちらであってもIE6を含む主要モダン・ブラウザのいずれにおいても、右のカラム落ちが発生します。 【A】の場合、各ブラウザでのボックスモデルの計算方法は： #containerがwidth: 780px＋border-width: 1pxなので782pxとなりますので、#container内で左右カラムとして並ぶには子要素の幅の合計は780px以下でなければなりません。 ですが、#contentがwidth: 540px＋padding-left: 20pxで560px、#menuがwidth: 240px＋padding-left: 10pxで250pxですから、560px＋250px＝810pxとなり、親要素の#containerの描画領域を30pxも超えてしまいますので、結果として後から描画される#menuの方が幅に収まりきれず#contentの描画が終わった次の位置から描画される事になり、カラム落ちが発生します。 一方【B】の場合は、IE6以外のブラウザの挙動は【A】と同じですが、IE6のでのボックスモデルの計算方法は： #containerがwidth: 780pxに対し、その内部でborder-width: 1pxなので左右2px分をボーダーの描画領域として差し引く為、#container内で左右カラムとして並ぶには子要素の幅の合計は778px以下でなければなりません。 ですが、#contentがwidth: 540px（padding-left: 20pxの値を含む）＋#menuがwidth: 240px（padding-left: 10pxの値を含む）＝780pxとなり、こちらの場合でも親要素の#containerの描画領域を2px超えてしまいますので、やはりカラム落ちが発生します。 No.2でアドバイスさせて頂いた通り、もし質問者様のHTML文書が【A】の様に各ブラウザを問わず標準準拠モードになる書式なのであれば、単純です。 (1)親要素の#containerの実際の内容の描画領域を780px（ボーダーの太さを足して782pxに）にするのか、778px（ボーダーの太さを足して780pxに）にするのかを決める。 (2a)前者なら、#containerの指定は現在のまま。 (2b)後者なら、#containerの指定はwidth: 778pxに、同じ理屈で#bannerの指定もwidth: 778pxに変更する。 (3a)(2a)なら、#contentの指定はwidth: 520px;に、#menuの指定はwidth: 230px変更する。 (3b)(2b)なら、#contentの指定はwidth: 519px;に、#menuの指定はwidth: 229px変更する。 ですが、【B】の様にIE6のみが後方互換モードになる書式だとCSSハック等による振り分けをするか、あるいは文書構造自体を変えるなどの対応が必要になります。 【B1】HTML側の文書構造を変えず、CSSハックによってIE6の解釈を振り分ける場合 (1)上記と同様。以後の考え方は同じなので、ここでは仮に前者（ボーダーの太さを足して782px）の場合とする。 (2)#containerの指定は現在のまま。 (3)widthと左右paddingの値が同時に指定されている#contentと#menuの指定に、IE6のみ有効なアンダースコア・ハックを使用して適用される数値を振り分ける。 #content{ width: 520px; _width: 540px; padding-left: 20px; （他のプロパティは省略） } #menu{ width: 230px; _width: 240px; padding-left: 10px; （他のプロパティは省略） } ※アンダースコア"_"を先頭に付けたプロパティはIE6のみバグにより有効と解釈される為こちらの値で上書きされるが、IE6以外は記述が不正の為無視される。 【B2】CSSハックを使用せず、HTML側の文書構造を変えて対応する場合 ※構造については一例です。 ＜HTML＞ （省略） <div id="centermain"> <div id="container"> <div id="banner"> <h1>見出し1</h1> </div> <div id="content"> <div id="inner_content"> <h2>見出し2</h2> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </div> <div id="menu"> <dl> <dt>メニュー</dt> <dd>カテゴリ１</dd> <dd>カテゴリ２</dd> <dd>カテゴリ３</dd> </dl> </div> <div id="foot"><p>Copyright (C) 2009 Test All Right Reserved.</p></div> </div> </div> （省略） ＜CSS＞ ※変更したセレクタのみ。他は同じ。 #centermain{ width: 782px; text-align: center; } #container{ margin: 0 auto; border: 1px solid #ccc; text-align: justify; } #content{ float: left; width: 540px; height: 100px; padding-top: 1em; background-color: #ccc; } #inner_content{ margin-left: 20px; } #menu{ float: right; width: 240px; height: 100px; padding-top: 1em; background-color: #999; } #menu dl{ margin-left: 10px; } ※ちなみに余白を作りたい為だけに<br>（強制改行）を使っているならそれは推奨されないので、適切な要素に上下マージンやパディングを設けてスタイルを調整するべきです（#footで既にやっておられる様に）。本件であれば、#contentと#menuにpadding-topで1emなどの値を設定すれば一行空きぐらいの余白が設けられますので、上記サンプルCSSにはその点も盛り込んであります。
お礼
abrilさん、ご返答ありがとうございます。 abrilさんが教えてくださったサイト様が非常によいキッカケに なりました。(http://2xup.org/log/2007/07/27-2111) 標準準拠・後方互換モードというものすら知らない状態でしたので、 このサイト様で掲示されている『各ブラウザの DOCTYPE スイッチ 対応表』などを見ても初めはよくわかりませんでしたが、それが 調べるキッカケとなり、今は何となくぼんやりとどういうものか 分かってきました。 またそれを調べる過程で『Web Standards Design』という本に 出会い、まだ読みかけではありますが『Web標準』というもの があることも知ることができました。 PhotoshopやIllustratorなども使ったことがないので、 早く綺麗なカッコイイHPを作りたいと思いから、そちらを 早く勉強してみたいという思いが出てくることもありますが、 まずは、Web標準とXHTMLとCSSの基礎をしっかりやりたい と思います。 「余白のためだけに<br>を使わない」という点も以後気をつけます。 ありがとうございました！
補足
余談ではありますが、当方Webデザイナーになりたいとか、 そんな高望みはしてないのですが、それなりのサイトを 自分で作れるようになってみたいと思って勉強を始めてみた Web初心者です。 (簡単なhtmlを組んでgeocitiesで簡単な自分のHPを作って みたりしたことがあるくらいの低レベルです) 一応IT関連の仕事（システム開発）をしているのですが、 VCやVBAでのクラサーバなどばかりで、Web系のシステムは ほとんど触ったことがありません＾＾； （あっても、できているソースをちょっと触る程度） 今年（09年）4月に知り合いが個人居酒屋店のようなものを 開店したのですが、現在お店のHPが1ページものの簡単なもの しかないので、それなりのものを作ってあげたいなと思って おります。と同時にそれが自分の勉強になればよいと思い、 HPを作ってあげることが現在の目標でもあります。 もちろんすぐにという訳ではなく、一年後や一年半後にでも 「こんなHPどう？」と見せれればよいと思っています。 （それが採用されるかされないかは関係なく） でも自分にできるかなと少々不安でもあります＾＾； できたらいいなぁ。。長々とすみません・・・
- abril
- ベストアンサー率69% (388/560)
補足的な事ですが… 以前から同様の質疑のやりとりを見ていてちょっと気になっていたのですが、この現象は正確には「IE6だから」無条件で起こるわけではないんですよね。後方互換モードでボックスモデルの計算方法の解釈が違ってしまう場合に起こります。 以下のサイトには非常にわかりやすい比較検証の一覧があります。 http://2xup.org/log/2007/07/27-2111 上記からそのまま関連する説明を以下に抜粋しておきます。 （抜粋ここから） 指定した幅 (width) と高さ (height) の外側に border と padding が足される content-box (正しい解釈) と、指定した幅と高さが border と含めてしまう border-box があります。Internet Explorer では後方 (過去) 互換モードで border-box で解釈するので、Windows IE 6 では注意が必要です。 （抜粋ここまで） つまり、IE6であっても、標準準拠モードとなる書式（HTML 4.01 Strict、XML宣言無しのXHTML等）を選択していれば、この解釈違いは起こりません。 ＃IE6の場合に突出して後方互換モードになる条件が揃いやすいというのは事実ですし、XHTMLの場合はXML宣言をする事が強く求められているのですから、IE6が「困った存在」である事には疑いようもないところです。 なので、先ずは、質問者様が現在トラブルを抱えてらっしゃるHTML文書が標準準拠モードになっているのか後方互換モードになっているのかを、上記一覧などと照らし合わせて確認する事です（それによって場合によっては今後の対応が違ってきますので）。 ＃floatしたコンテナのカラム落ちが起きているところを見ると、No.1様ご指摘の通り十中八九IE6で後方互換モードになるDOCTYPEスイッチに切り替わっているとは思いますが…
お礼
atseさん、ご返答ありがとうございます。 イメージまで付けて説明してくださり非常に助かります。 ブラウザの情報を載せるのを忘れておりました。 言われているようにIE6 SP3にて動作確認しております。 Firefoxでの表示はバラバラですね^^; 説明いただいた内容を試してから改めてご報告させていただきます。
補足
返事が遅くなり申し訳ございません。 標準準拠になるように下記のように書き加えることで、 正常に表示されることを確認しました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> 自分でも実際にFirefox3.5にて以前のコードで試して みましたが見事に崩れておりました＾＾; その表示も上記と同対応で崩れず表示されることを 確認しました。 IE6にそのようなバグがあることを初めてしりましたし、 そもそも標準準拠・後方互換モードというもの自体 初めて知りました。 そのような事をもっと勉強しようと、某サイトでオススメ していた『Web Standards Design』という本を購入して 読み始めました。 まだ読み始めて少々ですが、がんばってそれなりのHPが 作れるようにがんばりたいと思います。 ありがとうございました！