- ベストアンサー
borderについて2つの質問
こんにちは。 メニューバーが左に、メインコンテンツが右にあるホームページを作っています。 そこで、この2つを見た目で分けるために、メニューの右にborderを引いています。 つまり、border-rightを使っています。 しかし、メニューが短いのでborderが途中で切れています。 borderはメニューの長さしか表示されません。 そこで、これを一番下までもってくるにはどうすればいいのか教えてください。 もう一つお聞きしたいのは、メインコンテンツの右側にもborderを置いたのですが、 一番下まで表示されるのはいいのですが、 スクロールバーを上下に動かすとこの線の一部が欠けたりします。 何回か上下に動かしているとまた直ったりするのですが、非常に不安定です。 このサイトを実際にアップ（公開）した後もこのようなことが起こるのでしょうか。 これを解決する方法があれば教えてください。 どうぞよろしくお願いします。
- arbert
- お礼率98% (269/273)
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 （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を設定するとできるよ。 一番考えやすい方法としてはメニューとメインの間に高さだけを定義した要素を用意して………しかしこれもブラウザによって挙動が違うので既存の内容が存在する要素で下方向に無理矢理何か空白を突っ込んで要素を下まで伸ばすというのが常套手段だと思う… 入れ込む空白は「 」とか じゃなく、空のちょっとした大きさを持つ要素だね
お礼
ご回答いただきありがとうございます。 空白をたくさん書くことは考えましたが、 もっと簡単にできる方法がないのかなあと思っていました。
関連するQ&A
- CSSでボーダーがとぎれてしまう・・
すみません・・普段は自分で調べても分からないときだけこちらで質問するのですが、今回は作業に追われておりまして・・申し訳ない気持ちですが、質問させていただきます。 CSSで・・・ header、main、menu、footer の順番でdivで囲まれたコンテンツ？があります。 headerが上でその下の左にmenu、右にmainと並べて、その境目にボーダー線を指定したいのですが、どちらに指定しても逆側が長くなってしまうとボーダーが途中で途切れてしまいます。 これをこれを常にfooterの位置まで表示する方法はありませんでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- 下に表示されるスクロールバーの消し方を教えてください。
下記のようにtitle（上）、menu（右）、main（左）と、３つのフレームを分けて表示していますが、 <frameset rows="60,*" border="0" frameborder="0" framespancing="0"> <frame src="title.html" name="head" scrolling="no"> <frameset cols="130,*" border="0" frameborder="0" framespancing="0"> <frame src="menu.html" name="menu" scrolling="auto"> <frame src="cont.html" name="main" scrolling="auto"> </frameset> </frameset> *で表示しても、main（右）のフレームの下にスクロールバーが出てしまいます。右端の上下のスクロールはいかしたまま、下のスクロールバーを消すには、どのようにすればよいのでしょうか？ 分からなくて困っています。もし分かる方是非教えてください。 現状はこんな感じになってしまっています。http://www.twinklecloset.com/index.html
- ベストアンサー
- HTML
- ドリームウィーバーのフレームサイズ表示について
はじめて、複数フレームの使用のページを、DW4で、作成しました。 フレームを、上・下・左と、右がメインと４つ分けているのですが、まず上の幅を80ピクセルで横いっぱいに・下の幅を80ピクセルで横いっぱいに・左の幅を130ピクセルにで上下の間に挟まれた状態で、どのブラウザのサイズでも固定して見えるようにしたいのですが、どうすれば良いのでしょうか。 ちなみに、右のメイン画面以外は、スクロールバーを出さないようにしたいのです。 現在作成した状態ですと、左のフレームがスクロールできず（スクロールバーは非表示ですが、下の方の内容が動かず見えない）、右・メインはスクロールバーが、出て問題なし。上は固定されて問題なし。下は途中で画面が切れた状態です。 このようなフレームを、意図通り表示できる設定する方法を教えてください。 宜しくお願いします。
- ベストアンサー
- グラフィックソフト
- フレームのサイズ固定とスクロールバー
初心者ですが、宜しくお願いいたします。 現在「上部にタイトル」「下左にメニュー」「下右に本文」のフレームで３分割されたｈｐを作成途中です。 1.表示サイズを狭くした場合、下右の本文が左によって来て左下のメニューの幅が狭くなってしまいます。左下のメニューの横サイズを固定したいのですがどうすれば宜しいのでしょうか？ 2.また、表示サイズを小さくして上部タイトルの幅よりも狭くなった時にタイトルの下ではなく、画面全体の一番下にスクロールバーを出したいのですが出来ますでしょうか？ 3.同じ事が縦でもあり、上下の表示を狭くした場合下左のメニューの下が隠れたときに、画面全体の右側（下右の本文の更に右）にスクロールバーを表示したいのですがいかがなものでしょう？ デザイン的にフレームとフレームの間にスクロールバーは避けたいのです。 何卒、宜しくお願いいたします。
- ベストアンサー
- HTML
- iframe の height は指定しないといけない？
左にメニューバー、右にメインコンテンツ、という標準的な配置になっています。 左のメニューバーを iframe にしているのですが、ここで height を100%にすると右のメインコンテンツの高さの分だけが表示され、途中で切れてしまいます。 height を書かないともっと短くなってしまいます。 ですので、メニューバーの長さを超えた数値を適当に入れています。 例えば、メニューバーの高さが500ピクセルだったら、600ピクセル位にしておけば全部表示されます。 しかし、この場合、メニューバーの項目が増えてくるとその度にこの数値を変更しないといけないし、いつも適当に数字をあてはめて確かめるというのも大変です。 iframeをメニューバーとして使い、全部が表示されるよい方法がありましたら教えてください。 どうぞよろしくお願いします。
- ベストアンサー
- HTML
- 十字キーが出てきてページがスクロールできません。
調べてみたのですがなにが原因かよくわかりません。 ホームページで、縦２分割フレームを使っています。 左はメニュー。右にリンク先のページが表示される形になります。 そこで、右のページを日記に設定したのですが、 （ＩＮＤＥＸから飛ぶと左にメニュー、右に日記が表示できるように） 日記は表示されますがマウスキーが十字キーに変化し、 ページをスクロールさせることができません。スクロールバーも無反応です。 フレームの境界線には（右側に）斜線のような線がでます。 レンタル日記、Pixivのブログどちらも同じような状況に陥ります。 ページを開いて自然に右側をスクロールできるようにするにはどうすればよいでしょうか。 特に目立ったタグはありませんでした。ＦＣ２をつかっております。 ご指導をお願いいたします！よろしくお願いいたします。
- ベストアンサー
- HTML
- 【CSS】borderの変則指定？li要素
メニューなどを例えば#accessにして横並びに項目お置きます。 liで並べて、項目の間に仕切り線が入るようにborderを指定します。 上下にはいらないので、左右に指定します。 すると、１個目のliの右の線と２個目のliの左の線が並ぶので 1px指定しても１個目の左と最後の右だけで、残りは2pxになります。 当然ですが。。 全部1pxにしたい場合どうすればいいですか？
- ベストアンサー
- HTML
- “段組み”or“float”、どちらが原因？
こんにちは。 段組みを使い、左にメニューバー、右にメインコンテンツを配置しています。 メニューバーはfloat:left;を使って左に寄せています。 そこで問題なのですが、メニューが増えてくると、メニューバーの長さがだんだん長くなってきます。 そして、新たに一つのメニューを追加したとき、右隣りにあるメインコンテンツが下にずれたのです。 試しに、さらにメニューを追加するとまた下がります。 明らかに両者が干渉しています。 自分としては、段組みかfloatに原因があると思っていますが実際はどうなのでしょうか。 解決する方法をご存知の方、どうぞよろしくお願いします。
- ベストアンサー
- HTML
- フレームとスクロール
frameset により、フレームを左右に分割し、左にメニュー、右にコンテンツを表示しました。 メニューフレームに <a href="・・・・.html#a" target="content">A として、コンテンツフレームに <a name="a"> を設定すると、メニューフレームの「A」をクリックすると、コンテンツのフレームは 「A」のところまでスクロールします。 これを、少し変化させて、 「A」をクリックすると、右スクロールバーを一回クリックしたのと同様に、下に隠れていた 続きの部分が上に移動して表示されるようにしたいのですが、・・・。 HTLMで、こういった処理が可能でしょうか。可能でしたら、教えていただきたいのですが。 不可能でしたら、あきらめます。よろしくお願いします。
- ベストアンサー
- HTML
- スクロールバーの制御について（超初心者です
いつも助けて頂いてます。 ドリームウィーバーを利用しておりまして、いわゆる「タグ」の 概念を一切知らない無知な私なのですがマウス操作等で 解決できるのであれば教えてくださいませ。 現在、３フレームに分かれたＴＯＰページで 構成は、上段１行1列、下段1行２列の３窓です。 左の欄にはメニューを設置し、メニューの押された内容によって 右の欄にリンクされた情報が表示されています。 それはそれでよかったのですが、ふと気になる事が。 右のメインとなる画面に記載されている情報が 1画面内に収まる時は、上下左右共に移動するスクロールバーは 登場しません。 しかし、下へ下へと情報が増えると 上下に移動するべくスクロールバーが登場します。 けど、ついでにって感じで左右のスクロールバーも登場するの 。。。。これ、なんとか制御できないのでしょうか？ （しかも、できるだけソース触るお仕事なく。） 一瞬、もしかして左右に表示し切れないアイテムがあるのか 探して見ましたが、やはり単純に下へ下へ情報が増えただけでも 左右のバーがでてしまいました。 スクロールバーは見た目の感じ 収まり悪いイメージがあるので消して起きたいのです。 こんな高度な技、私のようなド素人でも分かるよう 手引き頂ければ助かります。 宜しくお願いします。
- 締切済み
- ホームページ作成ソフト
お礼
ご回答いただきありがとうございます。 >『HTMLの本文を右に、メニューを左に配置する場合のCSSの書き方』という意味と解釈してお答えします。 そのとおりです。 ちょっとがんばって挑戦してみます。 それと最初の参考URLありがとうございます。 これでスタイルシートをもっと深く学んでみます。