CSSレイアウトの本当の正しいやり方

解決済

質問者：shizuku
質問日時：2006/02/01 16:15
回答数：2件

CSSでヘッダーとフッター付きの2カラムレイアウトを書籍のサンプルを見て行ないました。

表示は何も問題ないのですが、色々とサンプルレイアウトのサイトを見ていると「main」でleft-marginfを指定しているのはなく、floatを指定しているのが多いのですが、下記でも合っているのでしょうか。

#wrap {
width: 700px;
margin: 0 auto;
text-align: left;
}

#header {
color: #fff;
}

#menu {
width: 160px;
float: left;
}

#main {
margin-left: 160px;
padding: 10px;
}

#footer {
clear: both;
padding: 10px;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： koutarou504
回答日時：2006/02/02 01:13

＞下記でも合っているのでしょうか。

文法の問題もありますが、なにより作成側の設計の問題があります。
どの様な意図で書かれているかによっては、文法で正しくブラウザで適切に表示されても不適切なＣＳＳと言えます。
また、１つの目的に対して手段は複数あります。
よって、どの様な設計（意図）でどの点について合っているか考えるのか明示されていない限り、回答は困難です・・・。

とりあえず margin-left と float ですが、前者は余白であり後者は配置に関わる指定であります。
また想定している事で、内部に記述される物はどの様な物を考えているのか。文字か画像か。内容のサイズは可変か。改行などの制御はどの様に意識しているか・・・。
それらにより、余白を用いる方法を選ぶべきか配置を用いた考え方を選ぶべきかなってきて・・・。

結局、まずは設計。どの様な考え方によって行っているかがポイント・・・。
正直、何も考えずにただこう見えると作るのは、それ時点で誤りかと思います。

最後に margin-left は単に左余白の指定です。その部分もその要素の一部です。今回の例だとmenuの塊が短い場合の見え方に主に影響があるのではないかと。
float は配置の指定です。float:left; の場合、相対的な位置決めで左寄せで既にある左側の要素の次に位置するという事で、決して余白があるとかいう事ではありません。それぞれ別の要素が並ぶという事で、場合によっては改行されます・・・。

- 0
- 件

通報する

この回答へのお礼

menuとmainでfloatにするということ→witdh指定を両方にしなくちゃいけない→IEとMozillaでmainのpadding10px分、幅のズレが出てしまう。
それでこのようにしていましたが、色々と教えていただいた参考サイトなどを見て周り、結局mainブロックを包括するブロックをもう1つ中にいれてpaddingはそちらで指定することにしようと思います。
koutarou504さんのおっしゃる通り、「設計」を最初にすることが大切だと思いました。
seawさん、質問の仕方が言葉足らずですみません。
大変参考になりました。

ありがとうございました。

通報する

お礼日時：2006/02/02 11:09

No.1

回答者： seaw
回答日時：2006/02/01 20:35

HTMLが無いので、以下のように勝手に解釈しましたが、違っていたら言ってください。

>下記でも合っているのでしょうか。
CSSの指定に、正解も不正解もありません。(文法違反は存在しますが…。)
スタールシートは勉強していくうちに、理解できます。
CSSの勉強には、
CSS Dencitieというサイトを強くおすすめします。
http://www6.plala.or.jp/go_west/nextcss/

しかし、スタイルシートでのレイアウトでは、ブラウザごとに対応状況がまちまちなので、注意が必要です。

※参考
http://www6.plala.or.jp/go_west/nextcss/tip/ua_b …
http://cssbug.at.infoseek.co.jp/
http://level.s69.xrea.com/mozilla/index.cgi?id=2 …
http://internet.watch.impress.co.jp/cda/news/200 …

------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
body
{
background-color: #ffffff;
color: #000000;
}

#wrap {
width: 700px;
margin: 0 auto;
text-align: left;

background-color: #0000ff;
}

#header {
color: #fff;

background-color: #9900ff;
}

#menu {
width: 160px;
float: left;

background-color: #3366cc;
}

#main {
margin-left: 160px;
padding: 10px;

background-color: #66cc33;
}

#footer {
clear: both;
padding: 10px;

background-color: #37475b;
}
</style>
<title>サンプル</title>
</head>
<body>
<div id="wrap">
wrap

<div id="header">
header
</div>

<div id="menu">
menu
</div>

<div id="main">
main
</div>

<div id="footer">
footer
</div>

</div>
</body>
</html>