ベストアンサー

borderについて2つの質問

2008/11/08 16:05

こんにちは。メニューバーが左に、メインコンテンツが右にあるホームページを作っています。そこで、この2つを見た目で分けるために、メニューの右にborderを引いています。つまり、border-rightを使っています。しかし、メニューが短いのでborderが途中で切れています。 borderはメニューの長さしか表示されません。そこで、これを一番下までもってくるにはどうすればいいのか教えてください。もう一つお聞きしたいのは、メインコンテンツの右側にもborderを置いたのですが、一番下まで表示されるのはいいのですが、スクロールバーを上下に動かすとこの線の一部が欠けたりします。何回か上下に動かしているとまた直ったりするのですが、非常に不安定です。このサイトを実際にアップ（公開）した後もこのようなことが起こるのでしょうか。これを解決する方法があれば教えてください。どうぞよろしくお願いします。

arbert
お礼率98% (269/273)

HTML
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2008/11/08 19:10 回答No.2

『メニューバーが左に、メインコンテンツが右にあるホームページを作っています。』 → 『HTMLの本文を右に、メニューを左に配置する場合のCSSの書き方』　という意味と解釈してお答えします。 ★一方の内容が必ずページの高さより長いことが確定しているなら、長いほうの記事にポーターをつけます。 ★【注意】　「空白をたくさん書くこと」は、そもそもHTMLで文書構造を示し、スタイルシートでプレゼンテーションを記述するのはなぜかという、もともとの理念がわかっていないということなので、そんなことをするなら、テーブルで配置すればよい。・・これは明らかな誤った方法です。 Style Sheets in HTML documents (ja) http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html 　を参照。 ★基本的なHTML-4.01strict(<head>情報は一部省いてあります。)とCSSの組み合わせサンプルを提示しておきます。　本文の内容はありません。適当なソースを追加してください。 <!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</title> - - <meta http-equiv="Content-Style-Type" content="text/css"> - - <link rel="stylesheet" type="text/css" href="./standard.css"> </head> <body> - - <h1>title</h1> - - <h2>subTitle</h2> - - <div id="Table_of_contents"> - - - - <h2>目次</h2> - - - - <ul> - - - - - - <li><a href="#Theme1">テーマ１</a></li> - - - - - - <li><a href="#Theme2">テーマ２</a></li> - - - - - - <li><a href="#Theme3">テーマ３</a></li> - - - - - - <li><a href="#Theme4">テーマ４</a></li> - - - - </ul> - - </div> - - <div class="body"> - - - - <h2 id="Theme1">テーマ1</h2> - - - - <p>ここに、適当に内容を追加する</p> - - - - <h2 id="Theme2">テーマ1</h2> - - - - <p>ここに、適当に内容を追加する</p> - - - - <h2 id="Theme3">テーマ1</h2> - - - - <p>ここに、適当に内容を追加する</p> - - - - <h2 id="Theme4">テーマ1</h2> - - - - <p>ここに、適当に内容を追加する</p> - - </div> </body> </html> CSS(./standard.cssにおく) @charset "Shift_JIS"; /* ルートのh1とh2は中央配置 */ body>h1,body>h2{ - - text-align: center; } body{ - - margin: 0px; - - height: 100%; } p{ - - text-indent: 1em; - - margin-left: 2em; } div#Table_of_contents{ - - position: absolute; - - left: 2px; - - width: 200px; } div#Table_of_contents h2{ - - display: none; } div#Table_of_contents ul{ - - margin: 0px; - - display: block; - - padding:1px; } div#Table_of_contents li{ - - width: 186px; - - display: block; - - border: outset red 3px; - - margin: 5px 0px; - - text-align: center; } div#Table_of_contents li a{ - - display: block; - - width: 100%; } div.body{ - - position: absolute; - - border-left: 2px solid red; - - border-right: 2px blue solid; - - margin-left: 205px; - - min-height: 120%; }

質問者

お礼 2008/11/08 20:44

ご回答いただきありがとうございます。 >『HTMLの本文を右に、メニューを左に配置する場合のCSSの書き方』という意味と解釈してお答えします。そのとおりです。ちょっとがんばって挑戦してみます。それと最初の参考URLありがとうございます。これでスタイルシートをもっと深く学んでみます。

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

SAYKA
ベストアンサー率34% (944/2776)

2008/11/08 16:22 回答No.1

希望の高さになる要素にborderを設定するとできるよ。一番考えやすい方法としてはメニューとメインの間に高さだけを定義した要素を用意して………しかしこれもブラウザによって挙動が違うので既存の内容が存在する要素で下方向に無理矢理何か空白を突っ込んで要素を下まで伸ばすというのが常套手段だと思う… 入れ込む空白は「」とか じゃなく、空のちょっとした大きさを持つ要素だね

質問者