- ベストアンサー
borderについて2つの質問
こんにちは。 メニューバーが左に、メインコンテンツが右にあるホームページを作っています。 そこで、この2つを見た目で分けるために、メニューの右にborderを引いています。 つまり、border-rightを使っています。 しかし、メニューが短いのでborderが途中で切れています。 borderはメニューの長さしか表示されません。 そこで、これを一番下までもってくるにはどうすればいいのか教えてください。 もう一つお聞きしたいのは、メインコンテンツの右側にもborderを置いたのですが、 一番下まで表示されるのはいいのですが、 スクロールバーを上下に動かすとこの線の一部が欠けたりします。 何回か上下に動かしているとまた直ったりするのですが、非常に不安定です。 このサイトを実際にアップ（公開）した後もこのようなことが起こるのでしょうか。 これを解決する方法があれば教えてください。 どうぞよろしくお願いします。
- みんなの回答 （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%; }
その他の回答 (1)
- SAYKA
- ベストアンサー率34% (944/2776)
希望の高さになる要素にborderを設定するとできるよ。 一番考えやすい方法としてはメニューとメインの間に高さだけを定義した要素を用意して………しかしこれもブラウザによって挙動が違うので既存の内容が存在する要素で下方向に無理矢理何か空白を突っ込んで要素を下まで伸ばすというのが常套手段だと思う… 入れ込む空白は「 」とか じゃなく、空のちょっとした大きさを持つ要素だね
お礼
ご回答いただきありがとうございます。 空白をたくさん書くことは考えましたが、 もっと簡単にできる方法がないのかなあと思っていました。
お礼
ご回答いただきありがとうございます。 >『HTMLの本文を右に、メニューを左に配置する場合のCSSの書き方』という意味と解釈してお答えします。 そのとおりです。 ちょっとがんばって挑戦してみます。 それと最初の参考URLありがとうございます。 これでスタイルシートをもっと深く学んでみます。