- ベストアンサー
このようなレイアウトをＣＳＳで記述すると・・・？
恐縮ですが、単刀直入に質問させてください。 図のようなデザインを作りたいのですが、レイアウトと幅に関する部分だけＣＳＳで書いて頂けませんか？ 僕自身勉強して書いてみたのですが、ブラウザによって幅が微妙にズレる事があるようです。 出来れば、そうならないよう記述して頂けると助かります。 どうかよろしくお願いします。 （もちろん、補足要求にもお答えさせて頂きます） ：(id名):幅 高さの順で all :width 740px height 560px header :width 720px height 90px news :width 720px height 30px menu :width 150px height 320px main :width 555px height 370px footer :width 720px height 20px allの中にある全ての枠組み（header,news,menu,main,footer）はそれぞれ他の枠組みと10pxだけ空いているようにしたいです。
- CSS
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
allのボックスに背景は使うのでしょうか？ 使わないのなら740pxではなく720pxで指定したほうがいいです。 また、menuはあまり変更がないと思うので高さは指定してもいいですが、 mainはページにより変更になると思うので高さを指定しないほうが良いです。 それを想定してレイアウトすると下記のようになります。 一応クロスブラウザレイアウトになってると思います。 各ボックスのmarginの数値を変更して幅の調整をしてみてください。 ■外部CSS #all{ width:720px; margin:10px auto; } #header{ width:720px; height:90px; margin:10px auto; } #news{ width:720px; height:30px; margin:0 auto; } #menu{ float:left; width:150px; height:320px; margin-right:15px; } #main{ float:right; width:555px; } #footer{ width:720px; height:20px; margin:10px auto; clear:both; } ■html部分 <div id="header">header</div> <div id="news">news</div> <div id="all"> <div id="menu">menu</div> <div id="main">main</div> </div> <div id="footer">footer</div>
その他の回答 (2)
- yambejp
- ベストアンサー率51% (3827/7415)
＞下部に余白を設けることは出来ませんか・・・？ ごめんなさい、おっしゃる意味がわかりません。 現時点でfooterから10px余白がありますがそれではない？
- yambejp
- ベストアンサー率51% (3827/7415)
とりあえずこんな感じで・・・ <html> <head> <style> body {margin:0px;padding:0px;} #all { width:740px;height:560px;margin-top:0px;padding-top:0px;background-Color:red;position:absolute;} #header{ width:720px;height: 90px;margin-top:10px; margin-left:10px;background-Color:lime;} #news { width:720px;height: 30px;margin-top:10px; margin-left:10px;background-Color:blue;} #wrap { width:720px;height:370px;margin-top:10px; margin-left:10px;background-Color:maroon;} #menu { width:150px;height:320px;background-Color:green;float:left;} #main { width:555px;height:370px;background-Color:yellow;float:right;} #footer{ width:720px;height: 20px;margin-top:10px; margin-left:10px;background-Color:aqua;} </style> </head> <body> <div id="all"> <div id="header">header</div> <div id="news">news</div> <div id="wrap"> <div id="menu">menu</div> <div id="main">main</div> </div> <div id="footer">footer</div> </div> </body> </html> allをposition:absoluteするのと menu,mainをラップするのでだいぶ標準化できます。
お礼
回答ありがとうございます。 思わず「absoluteこう使うのか～！」と声に出してしまいました(笑) さらに、menuとmainを覆うレイヤーを使うとは思いつきもしませんでした。 一通りＣＳＳ＋ＸＨＴＭＬの書籍を買ってみたのですが、positionの部分は、なんだか難しいですね＾＾； 改めてお礼を申し上げます。
補足
すみません！ 重ねての質問大変恐縮なのですが、margin-bottomなどで、下部に余白を設けることは出来ませんか・・・？ 試しに #all { width:740px;height:560px;margin-top:0px;padding-top:0px;background-Color:red;position:absolute;margin-bottom:10em;}(margin-bottomを付け足しただけです) としてみたのですが、余白が出来ませんでした・・・。
補足
ごめんなさい、言葉があまりに不足していました。 まず、レイヤー「all」の上部がウィンドウ端にピッタリくっついているので、レイヤー「all」を左右中心に配置し、なおかつ上と下それぞれに余白を作ってあげたいのです。 自分なりに調べた結果、左右中心に配置することは出来ました。 が、上下余白についてはあまりに困難であれば諦めます。 伝わればよいのですが・・・。