ベストアンサー

cssを使って分割したページのレイアウトが崩れてしまいます

2009/04/24 02:51

はじめまして。見よう見真似でcssでページの分割を始めたのですが、ウインドウのサイズを変えるとレイアウトが崩れてしまって、何度手直ししても直らず暗礁に乗り上げてしまった為、質問させて下さい。幅780で設計しているページ内にコンテンツ(左)とサイドバー(右)で左右に分割表示している部分があります。コンテンツは幅500、サイドバーは幅260でそれぞれ高さは変動する可能性がある為、指定はしておりません。ブラウザのウインドウ幅を小さくするとサイドバーがコンテンツの下に回り込んでしまうのでサイドバーをposition:absoluteで固定してみたのですが、今度はウインドウ幅を大きくすると下段のテーブルや最下段に自動でくっついてくる広告がサイドバーに重なってしまうことになり、解決策が見出せずにいます。ウインドウのサイズを変更してもレイアウトが崩れないようになる手段をご存知の方がおりましたらご教授頂ければと思います。また、本来やりたかったレイアウトがありまして、コンテンツとサイドバーを左右で分けつつ、更に両方を幅780の一つのボックスに収めることは可能でしょうか？こちらも手段をご存知の方がおりましたら合わせてご教授下さい。以下ソース抜粋 htmlファイル↓ <body> 割愛 <table cellpadding="0" width="780" bgcolor="#ffffff" cellspacing="0"> <tbody> <tr><td bgcolor="#666666" align="left"></td></tr> </tbody> </table> <div id="content">コンテンツ</div> <div id="sidebar">サイドバー</div> <table cellpadding="0" width="780" bgcolor="#ffffff" cellspacing="0"> <tbody> <tr><td bgcolor="#666666" align="left"></td></tr> </tbody> </table> </body> 読み込んでいる外部cssファイル↓ <style type="text/css"> #container{width:780px;text-align:left;margin:0px auto;} #header{width:780px;margin:0px 0px 15px 0px;} #content{float:left;width:500px;padding:10px 2px 2px 8px;} #sidebar{float:center;width:260px;padding:2px 2px 10px 8px;} #footer{clear:both;width:770px;margin:15px 5px 15px 5px;} </style> div{ 　font-size: 10pt; 　margin: 1%; 　padding: 2%; 　line-height: 120%; 　border-style: double; 　border-color: #F5F5F5; 　background-image:url("背景画像") }

nomico
お礼率50% (3/6)

HTML
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

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

ベストアンサー

abril
ベストアンサー率69% (388/560)

2009/04/24 12:01 回答No.3

2コラムのコラム落ちの対処法としてはANo.2様の方法が基本なのですが、その前に、質問者様のCSSの導入の仕方にはかなりおかしなところがありますので、まずはそこから見直さないと根本的解決には至らないと思います。 > 読み込んでいる外部cssファイル↓ > <style type="text/css">（省略）</style> とありますが、これは「外部CSSファイル」の書き方ではないですね。これだと、そのHTMLファイル自身のhead要素の中にstyle要素で直接スタイルを記述する方法であり、そのHTMLファイルにのみ適用されます。通常、「外部CSSファイルを読み込む」といったら、CSSファイルがHTMLファイルとは別個に存在しており、HTMLファイルからはlink要素（link要素はhead要素内に記述）で参照する（呼び込む）というやり方です。【例】 <link rel="stylesheet" href="css/hoge.css" type="text/css" media="all"> この方法だと、CSSファイルが外部に独立している為、複数のHTMLファイルから共通のCSSファイルを参照して共通のスタイルを一括で適用する事が可能になります。質問者様のやりたい方法はどちらですか？メンテナンスの効率の面から見て最適なのは後者の方ですが。【参考】http://w3g.jp/css/guide/outline > コンテンツは幅500、サイドバーは幅260でそれぞれ高さは変動する可能性がある為、指定はしておりません。これは妥当ですね。大概のコンテンツは内容のボリュームが流動的ですから、高さを指定しない場合の方が多いです。ただし、 > サイドバーをposition:absoluteで固定してみたのですが、 "position: absolute"を指定したコンテナブロックは、コーディングの順番に関わらずその名の通り絶対的な位置を維持する事になりますが、その他のコンテナブロックにも位置関係に関する適切な指定がされていない限り、質問者様が遭遇された様な他のコンテナブロックと重なったり親のコンテナブロックからはみ出してしまったり、といった不具合が起きる事なります。本件に関してはサイドもメインも高さを指定できないのですから、サイドに"position: absolute"を使う事自体、適切ではありません。 > #sidebar{float:center;width:260px;padding:2px 2px 10px 8px;} floatプロパティに"center"などという値はそもそもありません。left、right、none（初期値）のみです。floatというのは「要素のボックスを左、または右に寄せて、その反対側に後続の内容を流し込ませるフロート（浮動化）を指定」するプロパティですから、"center（中央）"という概念自体持ち得ません。この部分の指定はどうしてこの様にされたのでしょうか？どこかのソースにこう記述してあったのですか？であればそのソースを参考にする事をおやめになった方が賢明です。嘘を書いているわけですから。本件の様に、メインのコンテンツが左、サイドバーが右、というレイアウトで、メインのコンテンツが"float: left;"で指定されているならサイドバーは"float: right（もしくはleft、どちらでも）;"となるのが妥当な方法の一つでしょう。あと、下記の指定ですが、 div { font-size: 10pt; margin: 1%; padding: 2%; line-height: 120%; border-style: double; border-color: #F5F5F5; background-image:url("背景画像") } これだと全てのdivに対してこのスタイル（ボックスの内側にも外側にも相対値の余白が取られ、薄いグレーの二重の枠線が引かれ、背景画像が描画されている）が適用されてしまいますよ？おそらく質問文中に出てきた#container／#header／#content／#sidebar／#footerというレイアウトの主要なコンテナブロックは全てdivでマークアップされてると思いますし、もっと細かいレベルでもdivは出てきているのでは？font-sizeやline-heightやbackground-imageはともかく、他のプロパティはコンテナブロックの幅や高さにも影響しますから、レイアウト上これらの指定を全てのdivに必要としているとはちょっと思いがたいのですが…？ …といった様に、混乱されている部分が多々ありますが、 > 見よう見真似でcssで多分、この出発点がよろしくないと思います。こういうやり方をしている限り、今後も「解決策が見出」せない状態には何度も突き当たる事になるでしょう。CSSを導入したければ、まず最低限の基礎知識（HTMLファイルへの適用の仕方、記述のルール、単位、セレクタ、継承、適用要素、各プロパティの持てる値…等々）を理解した上で、色々なサイトを参考にするべきです。じゃないと、"float:center;"みたいな嘘の記述を堂々としているソースの良し悪しも判断できないままです。ちゃんと基礎を押さえておけば、後はちょっとしたヒントを収集する事で、質問者様が「本来やりたかったレイアウト」である、 > コンテンツとサイドバーを左右で分けつつ、更に両方を幅780の一つのボックスに収めるは簡単に実現できる様になります。当然、テーブルレイアウトなどする必要は全くなくなります。以下は一例です。ただし、質問者様の(X)HTMLファイルのDOCTYPE等細かい仕様が不明ですし、マークアップ部分が省略されている#container／#header／#footerという他の主要なレイアウトのコンテナブロックが実際には本件の部分とどの様に構成されているのかわかりかねます（ネーミングから大体の想像はつきますけれど…）ので、下記はあくまで、2コラムレイアウトの部分のみをHTML 4.01 Strictで記述した場合です。DOCTYPEの違いやXML宣言の有無、実際のコンテンツの全体の構成によっては、この2コラムの指定部分のみをそちらへ移植しても違った結果になる事は充分考えられますので、ご了承下さい。あくまで2コラムレイアウトの場合の考え方の1つとしてのサンプルです。 ※各コンテナブロックの領域がわかりやすい様に、一時的にbackgroundで背景色を塗ってあります。 ※便宜上、HTMLファイルのhead要素の中にstyle要素で直接スタイルを記述する方法にしましたが、お奨めは外部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"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>サンプル</title> <style type="text/css">  </style> </head> <body> <table cellpadding="0" width="780" bgcolor="#ffffff" cellspacing="0"> <tbody> <tr><td bgcolor="#666666" align="left">上部テーブル領域</td></tr> </tbody> </table> <div id="main"> <div id="content">コンテンツ</div> <div id="sidebar">サイドバー</div> </div> <table cellpadding="0" width="780" bgcolor="#ffffff" cellspacing="0"> <tbody> <tr><td bgcolor="#666666" align="left">下部テーブル領域</td></tr> </tbody> </table> </body> </html> ----------------------------------------------------------------------

質問者

お礼 2009/04/24 21:57

頂戴しました参考ソースを元に、全て解決・自分のやりたかったレイアウトまで実現できました。細かく丁寧に、本当に有難う御座いました。とてもチグハグな内容になってしまっていたのですね。最近cssを調べたばかりで解らないことが多いので、ルールも知らずにただサンプルソースを真似てたのがおかしくなった原因だったみたいですね； >質問者様のやりたい方法はどちらですか？メンテナンスの効率の面から見て最適なのは後者の方ですが。はい、後者のほうです。head部分は割愛してしまっておりましたが、外部cssファイルと<link rel=～> タブで読み込んでおります。 >"float:center;"みたいな嘘の記述こちらはサイトではないのですが、やはり同じような質問をしている方に対する解答内にあったソースからそのまま引用させて頂いておりました。動作しない記述だったんですね…こうゆうのも自分ですぐに気付けるように基礎をしっかり学びたいと思います。問題を全て解決出来、それ以上にやりたいレイアウトまで完成したので感謝の気持ちで一杯です。また何か解らないことがあり質問させて頂いた際には、ご教授頂ければ幸いです。他にご解答して下さった方も大変参考になりました。難しいですが、cssを使いこなせるようになりたいと思います。本当に有難う御座いました。

その他の回答 (2)

noname#83877

2009/04/24 09:06 回答No.2

コンテンツとサイドバーをdivで囲ってwidthを指定するとカラム落ちしなくなります。

4017B
ベストアンサー率73% (1341/1821)

2009/04/24 08:20 回答No.1

そもそも、この様などうして画面分割に外部CSSなのか…？単に練習という事なのか、それとも何か目的合っての事なのか…？？ま、事の真意はさて置き。 <table border="0" width="780"> <tr> <td width="520" nowrap>コンテンツ的な何か…</td> <td width="260" nowrap>サイドバー的な何か…</td> </tr> </table> ～でイイのでわ？