- ベストアンサー
CSSを使った枠の設定方法についての質問
- CSSを使って枠の設定をしたく、うまくいかない箇所があるため、質問させていただきます。
- 質問内容は、780pxの枠の中に左側に170pxの枠を作成し、右側に600pxの枠を作成したいが、うまくいかないというものです。
- ご指導いただける方、よろしくお願いいたします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
サンプルです。 ＞私としては780pxで作成した枠の中に、 ★子孫ブロックにabsoluteを使うのでpositionにstatic以外を指定する。 ＞(枠内)左側に170pxの枠を作成して、 ★position:absoluteで配置する。後続の要素は、これがないように振舞う ＞その右側に、600pxの枠を作成したかったのですが、 ★よって、左側のmarginのみ指定すればよい。 【注意】ソース内の[全角スペース２個]は、タブ(\t)に置換すること ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ※Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )でチェックすみ ※W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )で検証済み ※The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )で検証済み <!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#main{position:relative;margin-left:auto;margin-right:auto;width:780px;border:solid 2px gray;} ul.nav{width:170px;border: solid 3px gray;position:absolute;top:0px;} div.bodyText{margin-left:220px;border:solid 1px red;} --> </style> <link rel="START" href="../index.html"> </head> <body> <h1>サンプル</h1> <div id="main"> <ul class="nav"> <li>見出し1</li> <li>見出し2</li> <li>見出し3</li> </ul> <div class="bodyText"> <h2>見出し1</h2> <p>段落</p> <p>段落</p> <h2>見出し2</h2> <p>段落</p> <p>段落</p> <h2>見出し3</h2> <p>段落</p> <p>段落</p> </div> </div> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
IEとの表示差があるのでスタイルシートのみ修正 <style type="text/css"> <!-- div#main{position:relative;margin-left:auto;margin-right:auto;width:780px;border:solid 2px gray;} ul.nav{width:170px;border: solid 3px gray;position:absolute;top:0px;left:0px; display:block;margin:0px;padding:0px;} ul.nav li{paddig:0px;margin:0px; list-style:none;} div.bodyText{margin-left:220px;border:solid 1px red;} --> </style>
[参考]とほほのスタイルシート入門 position http://www.tohoho-web.com/css/reference.htm#position mainにrelative、waku1もrelative、waku2にabsoluteを指定して、位置指定すれば左右に表示出来ますよ。 <html><head> <style TYPE="text/css"> <!-- .main { position:relative; width:300; height:40px; border:1px solid #0F0; } .waku1 { position:relative; width:100; left:0px; top:0px; border:1px solid #F00; } .waku2 { position:absolute; width:200; left:100px; top:0px; border:1px solid #00F; } --> </style> </head><body> <div class="main"> <div class="waku1">waku1</div> <div class="waku2">waku2</div> main </body></html>
補足
skyfang様。この度は私のような初心者に詳しく解説頂きまして真にありがとう御座います。 お手数では御座いますが、再度ご指導のほどお願いできませんでしょうか？ 前回とは少し変わるのですが、私としては以下のようにしたいと考えております。 http://desktop10.web.fc2.com/ skyfang様にご指導いただいた内容はもちろん前回質問させて頂いた内容で御座いましたが、私の勘違いで 少し質問の内容を間違えてしまったようです。大変に失礼をいたしました。 大変にお手数では御座いますが、再度のご指導のほどお願いできませんでしょうか？ よろしくお願いいたします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
詳しく、ご指導くださいまして真にありがとう御座いました。 お蔭様でとても参考になりました。ありがとう御座います。 また、ご縁がありましたときはよろしくお願いいたします。