- ベストアンサー
ｃｓｓの記述についておしえてください
ｃｓｓの記述についておしえてください。bodyそしてcontainer次にsidebarまたはmenuと作ったとしてmenuの天地サイズを自動にしてcontainer等のサイズに反映させる事は可能ですか？フロートは分かるのですがサイズの伸縮について分かりません。
- mikity58g
- お礼率68% (273/396)
- ホームページ作成ソフト
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
意味なくfloatを使う理由がわかりません。floatは画像などの周囲に文章を回りこませるためで、ブロックの配置に使えなくはないが、えてして良い結果を招かない。 どこかで誰かがはじめて、はやってるみたいだけど・・ 親のコンテナブロックをstatic以外で配置して、その子供ブロックをabsoluteで配置すればよい。ウィンドウのサイズにも追随できるし、heightは100%にすれば、親ブロックの高さに合わせられる。 ★サンプルは見やすくするためタブを全角スペース２個で置換してある。元に戻してテストすること <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- div#content{ position:relative; width: 60%; border: solid 1px red; margin-left:auto; margin-right:auto; } div#content ul.nav{ margin-top:0px; position: absolute; width: 100px; top: 0px; left: -140px; height: 100%; border:solid blue 1px; } --> </style> <link rel="START" href="../index.html"> </head> <body> <h1>サンプル</h1> <div id="content"> <h2 id="V1">見出し(レベル２)</h2> <p>段落文</p> <p>段落</p> <p>段落</p> <p>段落</p> <h2>見出し(レベル２)</h2> <p id="V2">段落文</p> <p>段落</p> <p>段落</p> <p>段落</p> <h2>見出し(レベル２)</h2> <p id="V3">段落文</p> <p>段落</p> <p>段落</p> <p>段落</p> <h2 id="V4">見出し(レベル２)</h2> <p>段落文</p> <p>段落</p> <p>段落</p> <p>段落</p> <ul class="nav"> <li><a href="#V1">項目１</a></li> <li><a href="#V2">項目２</a></li> <li><a href="#V3">項目３</a></li> <li><a href="#V4">項目４</a></li> </ul> </div> </body> </html>
お礼
ご回答誠に有難うございます、でもまだ理解できないため再度質問を上げさせて頂きますので、恐れ入りますが教えていただけないでしょうか？