- ベストアンサー
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; }
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- seaw
- ベストアンサー率43% (10/23)
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>
お礼
menuとmainでfloatにするということ→witdh指定を両方にしなくちゃいけない→IEとMozillaでmainのpadding10px分、幅のズレが出てしまう。 それでこのようにしていましたが、色々と教えていただいた参考サイトなどを見て周り、結局mainブロックを包括するブロックをもう1つ中にいれてpaddingはそちらで指定することにしようと思います。 koutarou504さんのおっしゃる通り、「設計」を最初にすることが大切だと思いました。 seawさん、質問の仕方が言葉足らずですみません。 大変参考になりました。 ありがとうございました。
関連するQ&A
- 年賀はがきの宛名印刷が縮小され、枠より小さくなる問題が発生しています。
- 以前のブラザープリンターでは問題がなかったが、DCP-J528Nでは縮小と位置ずれが発生しています。
- 環境はWindows11で無線LAN接続です。関連するソフトとしては筆グルメを使用しています。
お礼
menuとmainでfloatにするということ→witdh指定を両方にしなくちゃいけない→IEとMozillaでmainのpadding10px分、幅のズレが出てしまう。 それでこのようにしていましたが、色々と教えていただいた参考サイトなどを見て周り、結局mainブロックを包括するブロックをもう1つ中にいれてpaddingはそちらで指定することにしようと思います。 koutarou504さんのおっしゃる通り、「設計」を最初にすることが大切だと思いました。 seawさん、質問の仕方が言葉足らずですみません。 大変参考になりました。 ありがとうございました。