• ベストアンサー

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

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; }

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

  • ベストアンサー
回答No.2

>下記でも合っているのでしょうか。 文法の問題もありますが、なにより作成側の設計の問題があります。 どの様な意図で書かれているかによっては、文法で正しくブラウザで適切に表示されても不適切なCSSと言えます。 また、1つの目的に対して手段は複数あります。 よって、どの様な設計(意図)でどの点について合っているか考えるのか明示されていない限り、回答は困難です・・・。 とりあえず margin-left と float ですが、前者は余白であり後者は配置に関わる指定であります。 また想定している事で、内部に記述される物はどの様な物を考えているのか。文字か画像か。内容のサイズは可変か。 改行などの制御はどの様に意識しているか・・・。 それらにより、余白を用いる方法を選ぶべきか配置を用いた考え方を選ぶべきかなってきて・・・。 結局、まずは設計。どの様な考え方によって行っているかがポイント・・・。 正直、何も考えずにただこう見えると作るのは、それ時点で誤りかと思います。 最後に margin-left は単に左余白の指定です。その部分もその要素の一部です。今回の例だとmenuの塊が短い場合の見え方に主に影響があるのではないかと。 float は配置の指定です。float:left; の場合、相対的な位置決めで左寄せで既にある左側の要素の次に位置するという事で、決して余白があるとかいう事ではありません。それぞれ別の要素が並ぶという事で、場合によっては改行されます・・・。

shizuku
質問者

お礼

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

その他の回答 (1)

  • seaw
  • ベストアンサー率43% (10/23)
回答No.1

HTMLが無いので、以下のように勝手に解釈しましたが、違っていたら言ってください。 >下記でも合っているのでしょうか。 CSSの指定に、正解も不正解もありません。(文法違反は存在しますが…。) スタールシートは勉強していくうちに、理解できます。 CSSの勉強には、 CSS Dencitieというサイトを強くおすすめします。 http://www6.plala.or.jp/go_west/nextcss/ しかし、スタイルシートでのレイアウトでは、ブラウザごとに対応状況がまちまちなので、注意が必要です。 ※参考 http://www6.plala.or.jp/go_west/nextcss/tip/ua_blnc.htm http://cssbug.at.infoseek.co.jp/ http://level.s69.xrea.com/mozilla/index.cgi?id=20051030_Acid2 http://internet.watch.impress.co.jp/cda/news/2005/10/28/9669.html ------------------------------ <!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>

shizuku
質問者

お礼

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

関連するQ&A

専門家に質問してみよう