ライブドアブログ　

▼サイドバーのカラクリ▼

さて,「トップページ」のHTMLソースを見て,おかしいと思った人もいるかもしれません.

HTMLソースでは「#links（サイドバー）」部分が下部に来ているのに,どうして実際の表示ではサイドバーが左右に表示されるのかと.

そのカラクリはCSSにあります. CSSのfloatプロパティを使った回り込みを利用してサイドバーを左右に表示しているわけです.

floatプロパティを使ってある部分を左右に寄せると,それに続く部分はその反対側に回り込みます.

例えば先に見た「default」のCSSソースを振り返ってみましょう.

「#content」部分が「right（右）」に寄せられていますね.
これによって直後の「#links（サイドバー）」部分が反対側（左）に回り込むことになります.

※1 基本的にこれで十分なのですが,これだけだと,ブラウザによっては表示が乱れることもあるので,回り込む部分 (ここでは「#links｣）もfloatの指定をしておいた方が無難です.
ここでのfloat指定は,回り込んだ領域における｢左寄せ｣｢右寄せ｣として反映されます. 上の例では｢left （左）｣に指定されていますね. これは｢#content｣の｢right（右）寄せ｣を受けて,左側に回り込んだ｢#links｣を,その左側領域内の｢left（左）｣に寄せることを意味します.

※2 「#footer」部分以下に何か書き込みたい人は,「clear:both;」で 回り込みを解除しておいた方がいいでしょう.

※3 ｢#content｣｢#links｣部分を包み込む｢body｣部分,あるいは｢#container｣部分の幅を固定しておかないと,windowを小さくしたときに,サイドバーが下にずり落ちることになるので,どちらかの幅を｢width:○○px;｣といった形で固定しておくことをおすすめします.

さて,この｢回り込み｣によって日頃我々が目にしているプログ画面が構成されるわけですね. ↓こんな風になるわけです.

もちろんこの左右を逆にすれば,結果は逆になります.
「simple01_2」のCSSソースを見てみましょう.

「#content」部分で「left（左）」が指定されていますね. これで直後の「#inks」は逆の右に回り込むことになります.

※「#links」では同じく「left（左）」が指定されていますが,これは回り込んだ右側領域内での「left（左）寄せ」として反映されます.

↓こんな風になります.

さあ,これでサイドバーの左右の入れ替え方が分かりましたね.
そう「#content」部分のCSSのfloatプロパティの左右（left/right）を変えればいいんです.

あとは「#links」部分のfloatを指定し直したり,marginやらpaddingやらを微調整して出来上がり. 簡単なもんです.

Top