CSSレイアウト

質問

CSSのレイアウトについてお聞きしたいのですが、
レイアウトを決めるときwidthとheightだけを指定して
作ったボックスを重ねていく感じでレイアウトをしているですが

画面最大化にしておかないとレイアウトが崩れてしまいます。
やはりCSSでのレイアウトの場合positionで絶対値を一つ一つ
指定していかなければなれないのでしょうか？

またCSSレイアウトのコツのようなものがありましたら教えて下さい
どうぞよろしくお願いいたします。

回答No.1

benelli · ベストアンサー

今までのその作成方法を踏襲する場合は、まず一番大きいボックスを用意して、その中にたくさんのボックスを作るようにすれば画面サイズによる崩れは回避できます。

とはいっても、ＣＳＳは画面サイズを変えたり違うブラウザで表示させたりしても問題なく表示させるのがセオリーなので、それだけで済ますというのはあまり推奨できません。

一般的に正しい方法とされるＣＳＳレイアウトは、ヘッダー部・フッター部・コンテンツをはっきり区別し、画面全体の大きさの下限を設定して一定以上の小ささにはならないようにするのが常道です。
（このページをだんだん小さくしてみると、画面サイズの下限がわかります）

widthとheightだけでなく、marginやpaddingなども重要なプロパティですので役立ててみてください。また、ＣＳＳデザインは芸術的な面もあり決まった答えというものもありませんので、いろいろ試行錯誤してがんばってみてください。

補足

一番大きなボックスに入れるということは、一つのdivの中にどんどん
divを作っていくということですね

初めは重ね順をどうにかこうにかするのではと思っちゃいました。

回答No.3

goo_ta

>float:left;
左に回りこませたあと
回りこみを解除するために
clear:left;
するんですけどそのときスペースが上下で
あいてしまうですが<

それはつまり、clearした要素に上の余白が出来てしまうという意味でしょうか？
であれば、これもIEのバグですね。その要素のwidthを（px,%など具体的な数値で）設定すると回避できます。

補足

あとフォントのことなのですが

文章を書いているときにここを半角スペース開けたいとかいうときは
&nbsp;とかｂｒとかでちょっとした調整をしてしまうんですが

そういうのをCSSでなんとかうまい事設定とかできるんですかね
いい方法があったら教えてください。

よろしくお願いします。

回答No.2

goo_ta

闇雲に<div>を入れ子構造にするのは「div厨」とか呼ばれ、決して良いやり方ではありません。CSSでレイアウトするメリットはHTMLの文書構造をシンプルに出来ることですから。

＞widthとheightだけを指定して作ったボックスを重ねていく感じでレイアウトをしている＜

の意味が良くわからないのですが、段組レイアウトであれば、例えば本文とナビゲーションと言った大枠のdivを作って、floatでレイアウトします。巷のCSSの本には必ずと言っていいほど載っています。

あと「floatさせた要素の周辺のmarginを正しく表示しない」というバクがIEにはありますので気をつけてください。

補足

ありがとうございます。
もう一つ質問させてください
float:left;
左に回りこませたあと
回りこみを解除するために
clear:left;
するんですけどそのときスペースが上下で
あいてしまうですが、
スペースをあけずに回りこむ解除させる方法が
あったら教えて下さい。