- 締切済み
CSSで背景色を下まで表示させたい
左がメニュー、右がメインコンテンツになるサイトを作っています。 左右のボックスの背景色を下まで伸ばしたいのですが、 いろいろなサイトを見て回って、その通りに指定しているはずなのですが、 うまく行きません。 #layoutの中に#sidebarと#mainを入れ子にしてあります。 #layoutの背景色（完成後は背景色はなしにする予定）は下まで表示されますが、 #sidebarと#mainの背景色が下まで表示されません。 また、ブラウザの縦幅をすごく短くしてスクロールした時に、 #layoutの背景色がその縦幅より下は表示されなくなってしまいます。 今まではテーブルで作っていて、CSSとXHTMLを使うのは初めてです。 以下にソースを置いておきますので、ご回答よろしくお願いします。 <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr"> <head> <title>背景画像を下まで表示したい</title> <style type="text/css"> *{ margin:0;padding:0; } html{ height:100%; } body{ margin: 0px; padding: 0px; height:100%; background-color:#DDDDDD; text-align:center; font-size: 11px; line-height:18px; font-family: sans-serif; color: #000000; } /*レイアウト指定*/ #layout{ margin: 0px auto; width: 960px; height:100%; min-height:100%; text-align:left; background-color:#000000; } body > #layout { height: auto; } #main{ float:right; margin:0px; padding:50px 34px 0px 34px; width:640px; height:100%; min-height:100%; background-color:#FFFFFF; } #sidebar{ float:left; margin:0px; padding:40px 30px 0px 0px; width:218px; height:100%; min-height:100%; background-color:#999999; } /*クリア*/ .clear { clear:both; } .clear hr { display:none; } /*罫線指定*/ .borderA { border-bottom:solid 1px #888888; margin-top:37px; margin-bottom:10px;} </style> </head> <body> <div id="layout"> <div id="main"> メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br /> <p class="borderA"></p> <p>Copyright(C) xxxxxxxxxxx. All Rights Reserved.</p> </div> <div id="sidebar"> メニュー<br />メニュー<br />メニュー<br />メニュー<br />メニュー<br />メニュー<br />メニュー<br /> </div> </div> <div class="clear"><hr /></div> </body> </html>
- acef
- お礼率52% (62/117)
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- maid110
- ベストアンサー率55% (5/9)
maid110です。 ああ、ごめんなさい。背景全体ではなかったのですね？ でしたら、外枠の設定、中枠の設定、そしてその中で左、メイン、 右と設定するのはいかがでしょうか？ これを簡単に省略してしまうとIEやFirefoxなどのブラウザで表示が狂ってしまうという現象が 起こりかねないともいえませんので、多少面倒くさいかもしれませんが。 以下その部分だけのサンプルです。 .wrapper { min-width:400px; width:100%; margin: 0 -1px; } .outer { width:auto; /* left column width and color */ border-left:200px solid #ff8080/*左ペインの背景色*/; /* right column width and color */ border-right:180px solid #ff8080/*右ペインの背景色*/; /* center column colour */ background:#FFF; } .inner { margin:0; width:100%; border-left:1px solid #C0C0C0; border-right:1px solid #C0C0C0; } /* Mozilla code */ .outer > .inner { border-bottom:1px solid transparent; }
- maid110
- ベストアンサー率55% (5/9)
html{ height:100%; } のところを以下のようにしてもいいのでは？ html{ height:100%; background:#FF0000; } もちろん#FF0000（赤）は変更してください。
補足
ご回答ありがとうございます。 すみません、お答えいただいた内容の意図がよく理解できないです。 こちらの質問がわかりにくかったのなら、申し訳ありません。 解決したい事は、左メニュー（#sidebarの箇所）と 右メインコンテンツ（#mainの箇所）が、 今の様に内容が少ない時に、背景色が下まで伸びない事と、 #layoutの背景色がスクロールした時に、 ブラウザに表示されているより下（隠れている部分）が途切れてしまう事です。
関連するQ&A
- CSSでの背景色の指定について
以下のソースで右下に空白ができます。 それはいいのですが、背景色を指定がうまく行きません。 heightは動的に変わるので、idやclassを増やさずに実現したいと考えています。 IEでは実現できてきますが、Firefoxではダメでした。 よい方法はないでしょうか？ ■test.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <link href="css/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="wrap"> <div id="left"> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> </div> <div id="right"> ああああ<br /> ああああ<br /> ああああ<br /> ああああ<br /> </div> </div> </body> </html> ■test.css body { margin-top: 20px; margin-left: 70px; margin-bottom: 0px; padding: 0px; line-height: 1.4em; font-size: 12px; font-weight: normal; color: #333333; } #wrap { width: 690px; background-color: #000000; } #left { margin: 0px; padding: 0px; width: 510px; height: 100%; float: left; background-color: #ffff00; } #right { margin: 0px; padding: 0px; width: 180px; float: right; background-color: #ff00ff; }
- ベストアンサー
- CSS
- CSSレイアウト・背景グラデーション
初めまして <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" でCSSでヘッダー・右袖・左メイン・フッターとレイアウトしてます。 ヘッダーから下は右・左・フッターとコンテンツIDでまとめてます。 bodyと#wrapperを使いセンター表示にしてますがページによって テキストボリュームの差がかなりあるのでそれぞれのheightは設定してません。 autoでも非設定でも複数ブラウザで大丈夫だったので省きました。 このレイアウトでIE・Safari・FireFoxなどでレイアウト崩れはしないのですが、枠線を付けたり背景画像で境界線に影を付けたりすると問題が出ます。 FireFoxとSafariだけヘッダー部分にしか影が出ません。 IEやSleipnirではフッターまで反映されます。 ページ毎のテキストボリュームが違うためheight設定してませんが数値指定するとすべてのブラウザで反映されます。 heightに数値いれるとテキストが少ないページでは無駄な表示域がでてしまうので避けたいです。 解決策や当方の設定に問題点があるでしょうか？ 影画像は820pxで制作#wapperの背景に指定してます。 よろしくお願いします。 body { text-align: center; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #wrapper { text-align: left; width: 800px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; padding: 0px; } #header { margin: 0px; padding: 0px; width: 800px; height: 300px; } #contents { padding: 0px; margin-top: 10px; margin-right: 0px; margin-left: 0px; width: 800px; height: auto; margin-bottom: 0px; } #contents #left { margin: 0px; padding: 0px; width: 200px; float: left; height: auto; } #contents #right { padding: 0px; float: right; width: 600px; margin: 0px; height: 1280px; } #footer { margin: 0px; padding: 0px; width: 800px; height: 60px; } 上では#wrapperに画像設定してませんが#wrapperに背景設定してます。 どのブラウザでもレイアウト崩れは起きてないです。 よろしくお願いします。
- ベストアンサー
- CSS
- borderをページの下まで伸ばしたい
お世話になります。既出の質問を見たのですが、解決できず質問させていただきます。 テーブルを使い左右にレイアウトを分けています。 左のメニュー部分の上下両サイドにborderを設定していますが、メニュー部分の方が圧倒的にメインよりコンテンツが少なく、ページの途中でborderが途切れてしまいます。 メインコンテンツの縦量に合わせて下まで伸びて欲しいのですが、どうすればいいのでしょうか？ 恐れ入りますが下記ソースです。 /*CSS*/ body { margin: 0px auto; padding: 0px; height:100%; width: 760px; text-align:center; position:relative; } #header { padding:0px ; margin: 0px auto; width: 760px; height: auto; } #contents { margin: 0px auto; padding: 0px; height:100%; width: 760px; background-color:#FFFFFF } .side{/*メニュー部分*/ margin:0px; padding:0px 0px 20px; border:1px #666666 solid ; width:163px; height:auto; } .footer {/*フッターの背景画像サイズに合わせheightを設定*/ margin:0px; padding:10px; width: 760px; height:72px; text-align:left; background-image:url(image/bottom.gif); background-repeat:no-repeat; border:0px; } .coretable{/*画面レイアウト左右分けテーブル*/ margin:5px 0px 0px; padding:0px; width:760px; } <!--html--> <body> <div id="header"> ヘッダー内容 </div> <div id="contents"> <table border="0" cellpadding="0" cellspacing="0" class="coretable"> <tr><td width="165" align="center" valign="top"> <div class="side"> メニュー内容 </div> </td> <td width="595" align="center" valign="top"> メインコンテンツ内容 </td> </tr> </table> </div> <div id="footer"> フッター内容 </div> </body> </html> あるサイトで拝見して、 .sideに height:100%;/* for IE6 */ min-height:100%; を加え、 html{ height:100%; } body{ height:100%;} としてみたところ、borderは伸びず、footerがページの途中に上がってきてしまうという現象でした。 テーブルを使っているのが悪いのでしょうか？ どうかお知恵をお貸し下さい。
- ベストアンサー
- CSS
- 背景の色がコンテンツ部分にも表示されてしまいます
サイトに背景色をつけて、コンテンツ部分は白にしたのですが、どうしても背景色が表示されてしまいます。今はbody以外の各divの背景を白にしていますが、contentsの右下が背景色が表示されてしまします。 お手数ですが、ご指摘頂けると幸いです。よろしくお願いいたします。 <html> <body> <div id="wrapper"> <div id="header"></div> <div id="contents"> <div id="banner"></div> <div id="navi"> <h2><a href="../service/index.html"><em>あああ</em></a></h2> 中略 </div> <div id="bread"><a href="index.html">トップページ</a> > あああ</div> <div id="main"> <p>あああ</p> </div> <div id="sidenavi"> <h3>あああ</h3> <p>あああ</p> </div> <div id="pagetop"><a href="#"></a></div> <div id="footer">Copyright (c) 2009 All Right Reserved </div> </div> </body> </html> <css> body { text-align: center; margin: 0px; padding: 0px; background: #FFCCFF; } #wrapper { text-align: left; margin: 0px auto; padding: 0px; height: 800px; width: 850px; background: #FFFFFF; } #header { margin: 0px; padding: 0px; height: auto; width: 850px; background: #FFFFFF; } #contents #banner { background: url(image/banner.jpg) no-repeat; margin: 0px; padding: 0px; height: 304px; width: 850px; } #contents #navi { background: url(image/menu.jpg) no-repeat; margin: 0px; padding: 0px; height: 61px; width: 850px; } #contents #navi2 { background: url(image/menu2.jpg) no-repeat; margin: 0px; padding: 0px; height: 61px; width: 850px; } #navi h2 { font-size: 12px; margin: 0px; padding: 0px; float: left; } #navi em { visibility: hidden; } #navi2 h2 { font-size: 12px; margin: 0px; padding: 0px; float: left; } #navi2 em { visibility: hidden; } #contents { margin: 0px; padding: 0px; height: 500px; width: 850px; background: #FFFFFF; } #contents #sidenavi p { font-size: 95%; line-height: 1.1em; margin-right: 5px; margin-left: 5px; } #sidenavi h3 { font-size: 105%; font-weight: bold; border-left: 7px solid #FF3366; padding-left: 5px; background: #FFCC33; margin: 0px; padding-top: 5px; padding-bottom: 5px; } #navi a { margin: 0px; padding: 0px; height: 61px; width: 169.5px; display: block; text-decoration: none; } #navi2 a { margin: 0px; padding: 0px; height: 61px; width: 170px; display: block; text-decoration: none; } #contents #main { margin: 10px 0px 0px; padding: 0px 10px 10px; height: auto; width: 610px; float: left; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "メイリオ"; background: #FFFFFF; } #contents #pagetop { clear: both; background: #FFFFFF; margin: 0px; padding: 0px; } #contents #sidenavi { margin: 10px 5px 0px 0px; padding: 0px; float: right; width: 200px; border: 1px dashed #FF3399; background: #FFFFFF; } #footer { font-size: 90%; color: #FF3366; text-align: center; margin: 0px; padding: 10px 0px 0px; clear: both; border-top: 1px dotted #333333; border-right-color: #333333; border-bottom-color: #333333; border-left-color: #333333; background: #FFFFFF; } #main p { font: bold 120% "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color: #FF3399; padding: 0px; margin-top: 5px; margin-bottom: 5px; } #pagetop img { text-align: center; padding-top: 10px; margin: 0px; padding-bottom: 10px; padding-left: 5px; } .p1 { font-size: 130px; color: #FF3366; padding: 10px; width: 590px; border: 2px dashed #FF3399; background: #FFCCFF; margin: 10px; text-align: center; } #main img { margin: 0px; padding: 0px 0px 10px; } #contents #bread { margin: 5px 0px 0px; padding: 5px 5px 0px 10px; font-size: 100%; width: 830px; }
- 締切済み
- HTML
- CSSで背景画像が表示されない
CSSレイアウトで通常のHTMLで作成しています。 背景画像が表示されないくて困っています。 他の方の質問で似た事例があったのと、 情報サイトを見てみたのですがどうしても上手くいきません。 この場合floatとclearはどう使えば背景が表示されるのでしょうか？ http://oshiete1.goo.ne.jp/qa3882745.html http://2nose.com/css/?ID=120 bodyには別背景を指定してあるのでbodyへの指定はできません。 何かアドバイスがあれば教えて頂けますでしょうか。(__) 確認はIE8です。 [ css ]----------------------------------------------------- #wrap{ width: 920px; height: 100%; margin-left: auto; margin-right: auto; background: url(../img/background.jpg) repeat-y; } #contents{ clear: both; } #sidemenu{ width: 275px; float: left; } #mainbox{ width: 570px; float:right; } [ html ]---------------------------------------------------- <div id="wrap"> <div id="contents"> <div id="sidemenu">サイドメニュー内容</div> <div id="mainbox">メインコンテンツ</div> </div> </div> 以上です、よろしくおねがいします！
- ベストアンサー
- HTML
- divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
- CSSで、フレーム的な表現をしたいのですが、スマートなやり方を教えてください。
CSSにて、「サイドメニュー」「ヘッダ」「コンテンツ」と言うコンテンツを制作したく、以下のソースを記述したのですが、コンテンツ部分（.contents）を100%にすると当然、ヘッダ部分（.header）の100px分がはみ出てしまい、サイドメニュー（.side）の下に余白がでてしまいます。 これを回避するために、現状position: fixed;を使用し、IE用には分岐で他のcssを読ませるようにしているのですが、もっとスマートに、ひとつのcssでこのレイアウトを実現する方法はないものでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- *{ margin: 0px; padding: 0px; } html, body { height: 100%; width: 100%; overflow: auto; } .header { position: absolute; left: 200px; width: 300px; height: 100px; background-color: #ddd; } .side { position: absolute; width: 200px; height: 100%; background-color: #aaa; } .contents { position: absolute; margin-top: 100px; margin-left: 200px; width: 300px; height: 100%; background-color: #333; overflow: auto; } --> </style> </head> <body> <div class="header"> header </div> <div class="side"> side </div> <div class="contents"> contents<br /> </div> </body> </html>
- 締切済み
- HTML
- CSSでDIVで挟んでいるのに背景色が出ない？
CSSと（X)HTMLでページを作っています。角丸なページにしたいため、 /* ---------- 角丸画像の上辺 ---------- */ #main_contents_header { width: 800px; height:20px; background:url(./top.png) no-repeat top; margin: 10px auto 0px; padding: 0; text-align: center; } /* ---------- 上辺と下辺の間のメイン部分 ---------- */ #main_contents { background:url(./bg.png); width: 800px; margin: 0 auto; padding: 0; text-align: center; } /* ---------- 角丸画像の下辺 ---------- */ #main_contents_bottom { width: 800px; height:20px; background:url(./bottom.png) no-repeat top; margin: 0 auto; padding: 0; text-align: center; } というCSSを作り、 HTMLは <div id="main_contents_top"></div> <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> <div id="main_contents_bottom"></div> という書き方にしているのですが、<div id="main_contents">の背景画像が正しく出ず、地の色が見えてしまうのです。試しに<div id="main_contents">へpadding-bottom:300pxというような指定を加えると、正しく背景画像が出ました。 <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> という書き方ではダメなのでしょうか・・・？ 確認はFirefoxとSafariでやっています。
- ベストアンサー
- HTML
- CSSでブラウザごとにレイアウトが崩れたりします。
はじめまして。 現在、CSS初心者でお店のホームページを作成しているのですが、作ったサイトのレイアウトがブラウザごとにレイアウトが違って見えます。 細かな部分でも違って見えてきてしまっているのですが、大枠のレイアウトが崩れてしまっていて、なんとか修正できないものかと頑張っています。 ■■■■■■ ■＝ヘッダー □□●●●● □＝メニュー □□●●●● ●＝コンテンツ（中身）1 □□○○○○ ○＝コンテンツ（中身）2 □□○○○○ ▲＝フッター ▲▲▲▲▲▲ このようなレイアウトで組んでいるのですが、初心者なため、ひたすら「div」で囲って、さらにその中をdivで囲ってなんとかレイアウトを組みました。 そこで、問題の崩れているレイアウトですが、メニュー（□）とコンテンツ（○+●）の部分の高さを「auto」にしているのですが、フッターの部分が左のメニュー（□）の高さにしかあっておらず、右のコンテンツの途中からフッターが出てきてしまいます。 ※コンテンツ（○+●）部分はさらに大枠の「right」で囲っており、メニュー部分は「left」で、両方ともdivで、高さは他と同様に「auto」トなっております。 ちなみにこの現象はIE７のみでして、IE６やfirefoxなどでは正常に表示されました。 全てのhtmlファイルごとに高さを指定して、divを指定すれば、解決するとは思うのですが、テンプレートを使用しているため、なんとかこのまま解決方法を見いだせればありがたいのですが、、、 どうか教えていただけないでしょうか？ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFFF; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#FFFFFF; } /* 左側の設定*/ #left{ width:210px; height:auto; float:left; background-color:#FFFFFF; } /* 右側の設定*/ #right{ width:580px; height:950px; float:right; background-color:#FFFFFF; margin-bottom: 15px; } #sub_main { width: 550px; margin-left: 15px; background-color: #FFFFFF; margin-top: 10px; height: auto; margin-bottom: 5px; } #sub_main2 { width: 550px; margin-left: 15px; margin-top: 15px; background-color: #FFFFFF; height: auto; } #foot{ position:relative; width:100%; height:auto; background-color:#CCFFCC; clear:both; float: left; } ※sub_main1,2は●と○になります。 どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- HPのCSSについて
超初心者です。へッダーの固定をしたページを作りたいのですが、フリーのCSSを使ってやってみたところ、背景の色、タイトルの文字の大きさ、現在センタリングになっているのを全体に表示したいのに、それが上手くいきません。以下、試してみたCSSなのですが、どこをどう変えれば、上記の変更が可能でしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSSでヘッダーを固定する 第４歩</title> <style type="text/css"> html { height:100%; } body { margin:0px; height:100%; } #body { width:700px; margin:0px auto; } #header { background:#ccffcc; height:100px; /* width:100%;*/ width:700px; position:fixed; } #main { padding-top:100px; background:#ffff99; } #footer { background:#ffcc99; height:80px; } </style> <!--[if IE 6]> <link rel="stylesheet" href="./fixheader_ie6.css" type="text/css" /> <![endif]--> </head> <body> <div id="body"> <div id="header"> ヘッダー </div> <div id="main"> コンテンツ1<br /> コンテンツ2<br /> コンテンツ3<br /> コンテンツ4<br /> コンテンツ5<br /> コンテンツ6<br /> コンテンツ7<br /> コンテンツ8<br /> コンテンツ9<br /> コンテンツ10<br /> コンテンツ11<br /> コンテンツ12<br /> コンテンツ13<br /> コンテンツ14<br /> コンテンツ15<br /> コンテンツ16<br /> コンテンツ17<br /> コンテンツ18<br /> コンテンツ19<br /> コンテンツ20<br /> コンテンツ21<br /> コンテンツ22<br /> コンテンツ23<br /> コンテンツ24<br /> コンテンツ25<br /> コンテンツ26<br /> コンテンツ27<br /> コンテンツ28<br /> コンテンツ29<br /> コンテンツ30<br /> コンテンツ31<br /> </div> <div id="footer"> フッター </div> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
補足
どの部分を書いて頂いたソースに書き換えればよいのでしょうか？ wrapperがlayout、outerがmain、innerがsidebarに対応しているのでしょうか？ また、borderの設定がいきなり出てきましたが、 ボックスに罫線をつける予定はありません。 罫線を付けないと正しく表示されないという事ですか？