- ベストアンサー
css leftsideだけ色をつける方法
- leftsideだけに色をつけたいのですが、どうしても右側が20px分あまってしまいます。色々いじってみたのですが改善されず、行き詰っています。
- bodyのwidthが780pxで、leftsideが200px、mainが560pxです。mainの幅を580pxに変更すると、mainがleftsideの下に表示されてしまいます。
- 20px分の余白がどの部分を変更するときれいな形になるか、教えていただきたいです。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
お返事ありがとうございます。 leftsideをmargin: 5px 0px 0px 5pxのまま205pxとして、 残りの574pxをメインに追加してもOKですが、 ピンクの背景の左5pxがleftside外になってしまうため、 margin: 5px 0px 0px 0pxにして、残りを579pxとしましたが、 leftsideにpadding-left:5pxを補充しないといけないので、 結果的に残りは574pxで正しいと思います。 わかりにくくてすみません。
その他の回答 (1)
- kuzumiHK
- ベストアンサー率72% (132/183)
まず、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さんの教えていただいたとおり 直しましたところ綺麗におさまりました。 日にちが空いてお礼が遅くなり申し訳ありませんでした。 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分プラスされていました。 宜しくお願いします。
補足
*{ 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; }
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
引越し期間があり、早くに回答いただいたのにお礼のお返事ができなくてすみません。 kuzumiHKさんの説明とてもわかりやすかったです。 例えばborder-left: 1px solid #CCCCCC これも1px分余分にカウントしなければいけないというのに、自分では全然気づけなくてとても勉強になりました。 ありがとうございます。