css ブログのスタイルシートで疑問

解決済

質問者：momotarojapan
質問日時：2017/06/06 21:51
回答数：1件

あるブログサイトで、コンテンツ部分が、左側が広く、右側にサイドバーが来るタイプなのに、
ｃｓｓでは、サイド側が　float:left;　コンテンツ部の記述も同じです。
疑問です。これはＨＰのソースに指定されてるｃｓｓなので、実際に使用されているものです。
でも、ｃｓｓの一般の解説サイトでは、これでは左サイドバー設定のはずです。

どうなっているのでしょう？
それとも、これは基本設定（確かに最初に提示されたのは左サイドバーでした）で、
私がその後選択したデザインでは、右サイドバーです。
右左サイドバーは、選択したデザインで変更されてるのでしょうか？
ちなみにロリポップのjugemuです。

/*コンテンツ枠（記事の枠＋サイドメニューの枠）*/
#content {
margin:0 auto;
padding:0 20px 20px 20px;
}

/*　右側の幅（サイドメニューの枠）　*/
#side {
float:left;
width:200px; /* C */
}

/*　左側の幅（記事の枠）*/
#main {
float:left;
width:540px; /* D */
padding:0 20px 0 0;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： naokita
回答日時：2017/06/07 00:50

HTML：

<div id="main">記事</div>
<div id="side">サイド</div>
になっていると思います。

#mainが先に左側に配置され、#sideがその横（右）に配置されるので何も問題ないですけど・・・

両者がfloat:left;の場合は、左側+左側に配置されるので、#mainの右側に#sideがあってていてもおかしくないですよ。
#mainの幅が広いので右側しか空いていない！
幅がピッタリ(20+20+540+20+200＝800px？)の場合には、float:right;にしても同じで、
#mainの540px+20px=560pxの右側にしか行くところが無いので、右も左も無いのです・・・

#mainの幅を540pxではなく、400pxなどと狭くすると、サイドバーもその幅だけ左に寄るので、理解できると思います。お試しを。

-------
蛇足ですが、左がサイドバーの場合には、
例１：
<div id="side">サイド</div>
<div id="main">記事</div>
逆になると思います。
もしくは、
例２：
<div id="main">記事</div>
<div id="side">サイド</div>
のままだと、
main { float:right;}

どちらかになります。（positionでも可能か）

- 0
- 件

通報する

この回答へのお礼

納得！
ｃｓｓでは、領域の定義、
ｈｔｍｌで、配置の仕方を行うのでした。
このケースは、ｈｔｍｌでは、確かめてみたところ、mainが先でsideが次に配置されていました。
ｃｓｓとｈｔｍｌで協力して画面を作ってるのでした。
ありがとうございました。

ちなみに、ｈｔｍｌの構造は下記になっていました。

<head> </head>
<body>
<div id="wrapper">
<div id="header"> </div> 
<div id="content"> 
<div id="main"> </div> 
<div id="side"> </div> 
</div> 
<div id="footer"> </div> 
</div> 
</body>