- 締切済み
CSSで、フレーム的な表現をしたいのですが、スマートなやり方を教えてください。
CSSにて、「サイドメニュー」「ヘッダ」「コンテンツ」と言うコンテンツを制作したく、以下のソースを記述したのですが、コンテンツ部分（.contents）を100%にすると当然、ヘッダ部分（.header）の100px分がはみ出てしまい、サイドメニュー（.side）の下に余白がでてしまいます。 これを回避するために、現状position: fixed;を使用し、IE用には分岐で他のcssを読ませるようにしているのですが、もっとスマートに、ひとつのcssでこのレイアウトを実現する方法はないものでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- *{ margin: 0px; padding: 0px; } html, body { height: 100%; width: 100%; overflow: auto; } .header { position: absolute; left: 200px; width: 300px; height: 100px; background-color: #ddd; } .side { position: absolute; width: 200px; height: 100%; background-color: #aaa; } .contents { position: absolute; margin-top: 100px; margin-left: 200px; width: 300px; height: 100%; background-color: #333; overflow: auto; } --> </style> </head> <body> <div class="header"> header </div> <div class="side"> side </div> <div class="contents"> contents<br /> </div> </body> </html>
- kenkenken1970
- お礼率53% (26/49)
- HTML
- 回答数5
- ありがとう数0
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- partita
- ベストアンサー率29% (125/427)
全体をさらにdivで囲んで、左から200pxの範囲のみ背景画像を利用（repeat-y）するのはどうでしょうか。
- kuronekoyarou
- ベストアンサー率54% (30/55)
No.1の者です。 .right { margin-left:200px; width:300px; } を .right { float:left; width:300px; } に替えてください。すみません。
- sr-agent
- ベストアンサー率43% (594/1373)
No2ですが続きです。 css2.cssというファイルに body { margin: 0%; padding: 0%; text-align: center; background: #ccffff; } #container { position:relative; width: 90%; margin-top:0%; margin-left:auto; margin-right:auto; padding: 0%; text-align:left; background: #ffffcc; border-top: none; border-right: 1px solid #999999; border-bottom: 1px solid #999999; border-left: 1px solid #999999; } #banner { margin: 0%; padding: 1%; background: #ccff99; border-bottom:1px solid #999999; } #place { margin: 0%; padding: 1%; font-size: 82%; font-weight: bold; color: #333333; background: #ffffff; border-bottom:1px solid #999999; } #content { margin: 0% 0% 0% 20%; padding: 10px; color: #333333; background: #ffffcc; border-right: 1px solid #999999; border-left: 1px solid #999999; } #side-left { position: absolute; top: 90px; left: 4px; margin: 0%; width : 19%; background: #ffffff; } #footer { margin: 0%; padding: 1%; color: #333333; background: #ffffcc; border-top: 1px solid #999999; } ul { list-style-type: none; margin: 5px; font-size: 95%; line-height: 130%; } li { border-bottom: 1px solid #999999; } と書いています。 お望みのようなものができるかどうかわかりませんがやってみてください。
- sr-agent
- ベストアンサー率43% (594/1373)
自分の場合は、 htmlファイルに <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="robots" content="INDEX,FOLLOW" /> <link rel="stylesheet" href="css2.css" type="text/css" /> <title>サイト名</title> </head> <body> <div id="container"> <div id="banner"> <h1>サイト名</h1> </div><!-- div id="banner" --> <div id="place"> 現在の位置</div><!-- div id="place" --> <div id="side-left"> <ul> <li>メニュー</li> <li>ホーム</li> <li><a href="annai.html">ご利用案内</a></li> <li><a href="new.html>更新情報</a></li> ・ ・ ・ <li><a href="kensaku.html">キーワード検索</a></li> </ul> </div><!-- div id="side-left" --> <div id="content"> <h2>本文のタイトル</h2> <p>本文の中身</p> </div><!-- div id="content" --> <div id="footer"> <p>フッター</p> </div><!-- div id="footer" --> </div><!-- div id="container" --> </body> </html> と書き （続きます）
- kuronekoyarou
- ベストアンサー率54% (30/55)
↓なかんじで。widthを指定している要素にpaddingやborderを指定すると WindIE5などでバグるので注意してください。 <head> <title>test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <style type="text/css"> <!-- *{ margin: 0px; padding: 0px; } .container { width:500px; overflow:hidden; } .container:after { content:"."; display:block; clear:both; height:0; line-height:0; visibility:hidden; } .side { float:left; width:200px; background-color: #aaa } .right { margin-left:200px; width:300px; } .header { background-color: #ddd; } .contents { background-color: #333; } --> </style> </head> <body> <div class="container"> <div class="side"> side </div> <div class="right"> <div class="header"> header </div> <div class="contents"> contents<br /> </div> </div> </div> </body>
