ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
QNo.3992750 css leftsideだけ色をつける方法
質問者：nicoko あるサイトのレイアウトを参考にしながらcssの勉強をしています。

html
<body>
<div id="page">
<div id="head">
<img src="./simpe01/img/logo_img300-60.gif" alt="log_img" width="300" height="60">
</div>
<div id="navigation">
<ul>
<li><a href="./index.htm">HOME</a></li>
<li><a href="./contents/index.htm">コンテンツ</a></li>
<li><a href="./link/index.htm">リンク</a></li>
</ul>
</div>
<h1>○○</h1>
<div id="leftside">
<p>新着情報</p>
<ul>
<li><a href="#">サブメニュー</a></li>
<li><a href="#">サブメニュー</a></li>
<li><a href="#">サブメニュー</a></li>
</ul>
</div>
<div id="main">
<h2>ごあいさつ</h2>
<div class="imgbox_f"><img src="./img/img_sample.jpg" alt="サンプル" width="200" height="257"></div>
<p>画像は&lt;div id=&quot;imgbox_f&quot;&gt;&lt;/div&gt;で囲むと写真右へ。</p>
<p>あいさつ文を入力しおく。<strong>太字</strong>は&lt;strong&gt;&lt;/strong&gt;で囲む。</p>
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>

<h2>補足情報</h2>
<p>サイトの使い方や、
注意事項を書いておく。
</p>
</div>

<!-- #foot 画面一番下 -->
<div id="pagefooter">
<p>必要ならコピーライトや、サイトの付加情報を書くところ。 </
p>
</div>
</div>
</body>

css
*{
margin: 0px;
padding: 0px;
}
body {
background-color: #FFFFF;
font-size: 95%;
line-height: 150%;
text-align: center;
color: #333333;
margin: 0px;
}
div#page {
text-align: left;
border: 1px solid #333333;
background: #FFFFFF;
width: 780px;
margin: 5px auto;
}
div#head {
padding: 10px 10px 5px 5px;
margin: 0px;
background: #FFFFFF;
}
div#navigation {
padding: 10px;
background: #E188FF;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
height: 25%;
}
div#navigation ul{
margin: 0px;
padding: 0px;
background: #FFFFFF;
}
div#navigation li{
float: left;
padding: 0px;
margin-left: 10px;
color: #FFFFFF;
list-style: none;
}
div#navigationu a{
color: #FFFFFF;
text-decoration: none;

}
div#navigation a:hover{
color: #000000;
background: #D7E1EC;
}
div#main {
margin: 0px;
border-left: 1px solid #CCCCCC;
padding: 10px 0px;
background: #FFFFFF;
width: 560px;
float: left;
}
div#main p{
margin: 0px 0px 20px 10px;
}
div#main ul {
margin-left: 60px;
margin-bottom: 1em;
margin-right: 30px;
}
div#leftside {
width: 200px;
margin: 5px 0px 0px 5px;
padding: 10px 0px;
float: left;
}
div#leftside ul{
margin: 0px 0px 0px 5px;
list-style: circle;
padding-left: 2em;
}
div#leftside p{
margin: 0px 10px 10px;
}
div#pagefooter {
border-top: 1px solid #333333;
padding: 0px;
text-align: center;
clear: both;
margin: 0px;
}
div#pagefooter p{
margin: 5px 0px;
}
strong {
color: #CC3333;
}
h1 {
font-size: 110%;
padding: 25px 15px 5px;
border-bottom: 1px solid #CCCCCC;
background: #F3F3F3;
font-weight: normal;
}
h2 {
font-size: 110%;
margin: 0px 20px 20px;
color: #333333;
border-bottom: 1px dashed #999999;
padding: 0px 0px 5px;
clear: both;
}
dl {
margin: 0px 0px 50px 40px;
}
dt {
font-weight: bold;
}
dd {
margin-bottom: 10px;
}
.imgbox {
margin: 0px 0px 1em 10px;
}
.imgbox img{
border: 1px solid #666666;
}
.imgbox_f {
margin: 0px 10px 1em;
float: right;
}
.imgbox_f img{
border: 1px solid #666666;
}
---------------------------------------------------------------
leftsideだけに色をつけたいのですが、どうしても右側が20px;分
あまってしまいます。色々いじってみたのですが改善されず、行き詰っています。

bodyのwidthが780px;
leftsideが200px; mainが560px;
自分としてはmainの560を580に変えれば解決と思っていたのですが、
そうするとmainがleftsideの下にきて形がくずれてしまいます。
20px分はどの部分を変更すればきれいな形になるのでしょうか。

宜しくお願いします。
困り度：
  • すぐに回答を！
質問投稿日時：
08/05/02 18:45
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答良回答20pt
ANo.2 お返事ありがとうございます。
leftsideをmargin: 5px 0px 0px 5pxのまま205pxとして、
残りの574pxをメインに追加してもOKですが、
ピンクの背景の左5pxがleftside外になってしまうため、
margin: 5px 0px 0px 0pxにして、残りを579pxとしましたが、
leftsideにpadding-left:5pxを補充しないといけないので、
結果的に残りは574pxで正しいと思います。
わかりにくくてすみません。
回答者：kuzumiHK
種類：アドバイス
どんな人：専門家
自信：参考意見
回答日時：
08/05/07 20:29
この回答へのお礼引越し期間があり、早くに回答いただいたのにお礼のお返事ができなくてすみません。
kuzumiHKさんの説明とてもわかりやすかったです。
例えばborder-left: 1px solid #CCCCCC
これも1px分余分にカウントしなければいけないというのに、自分では全然気づけなくてとても勉強になりました。

ありがとうございます。

回答
ANo.1 まず、div#leftsideの
margin: 5px 0px 0px 5px;を、
margin: 5px 0px 0px 0px;にして、
余白をpadding-leftで調整したほうがいいようです。

そして、div#mainですが、
border-left: 1px solid #CCCCCC;が入っていますので、
それで1px分圧迫していますので、
この段階でmainにふれるwidthは579pxまでということになります。
それで色をつけてみてください。
回答者：kuzumiHK
種類：回答
どんな人：専門家
自信：自信あり
回答日時：
08/05/02 19:47
この回答への補足*{
margin: 0px;
padding: 0px;

}
body {
background-color: #F5F5F5;
font-size: 80%;
line-height: 150%;
text-align: center;
color: #333333;
margin: 0px ;
font-family:sans-serif;
height:800px;


}

div#page {
text-align: left;
border: 1px solid #333333;
background-color: #FFABFF;
width: 780px;
height:300px;
margin: 5px;

}
div#head {
padding: 10px 10px 5px 5px;
margin: 0px;
background: #FFFFFF;
}

div#navigation {

padding: 0px;
background: #E188FF;
border-top: 1px solid #E188FF;
border-bottom: 1px solid #E188FF;
height: 25px;
width: 780px;

}
div#navigation ul{
margin: 0px;
padding: 0px;
}
div#navigation li{
float: left;
padding: 0px;
margin-left: 10px;
color: #FFFFFF;
list-style: none;
}
div#navigationu a{
color: #FFFFFF;
text-decoration: none;

}
div#navigation a:hover{
color: #E188FF;
background: #D7E1EC;
}
div#main {
margin: 0px;
border-left: 1px solid #CCCCCC;
padding: 20px 0px;
background: #FFFFFF;
width: 569px;
height: 600px;
float: left;




}
div#main p{
margin: 0px 0px 20px 40px;
}
div#main ul {
margin-left: 60px;
margin-bottom: 1em;
margin-right: 30px;
}
div#leftside {
width: 200px;
height:600px;
margin: 5px 0px 0px 5px;
padding-top: 10px;
float: left;
}
div#leftside ul{
margin: 0px 0px 0px 5px;
list-style: disc;
padding-left: 2em;
}
div#leftside p{
margin: 0px 10px 10px;
}
div#pagefooter {
border-top: 1px solid #333333;
padding: 0px;
text-align: center;
clear: both;
margin: 0px;
background: #245386;
width: 780px;
height:25px;
}
div#pagefooter p{
margin: 5px 0px 0px;
padding: 5px 0px;


}
strong {
color: #CC3333;
}

h1 {
font-size: 105%;
padding: 25px 15px 5px;
border-bottom: 1px solid #CCCCCC;
background: #F3F3F3;
font-weight: normal;
}
h2 {
font-size: 100%;
margin: 0px 20px 20px;
color: #333333;
border-bottom: 1px dashed #999999;
padding: 0px 0px 5px;
clear: both;
}
dl {
margin: 0px 0px 50px 40px;
}
dt {
font-weight: bold;
}
dd {
margin-bottom: 10px;
}
.imgbox {
margin: 0px 0px 1em 40px;
}
.imgbox img{
border: 1px solid #666666;
}
.imgbox_f {
margin: 0px 10px 1em;
float: right;
}
.imgbox_f img{
border: 1px solid #666666;
}
この回答へのお礼回答ありがとうございます。kuzumiHKさんの教えていただいたとおり
直しましたところ綺麗におさまりました。
日にちが空いてお礼が遅くなり申し訳ありませんでした。
　
leftsideに色をつけるとmainの下部分が白い空白ができたためcssを補足のように変更しました。

もう一つ疑問点が出てきてしまいました。
leftside
margin: 5px 0px 0px 5px;を→5px 0px 0px 0px;変更すると

mainのborder-left: 1px solid #CCCCCC;で1px
上記leftsideのmargin 5pxでmainのwidthは574pxでは？
とおもったのですが、あとの5pxはどこの部分をカウントしたもの
なのでしょうか？

試しにmargin: 5px 0px 0px 5px;を→5px 0px 0px 10px;変更したと
ころ5pxプラスされるのかと思いきや10px分プラスされていました。
宜しくお願いします。
 
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ