記事部分の幅を固定しつつ、サイドバーはリキッドレイアウトにする

リキッドレイアウトにしたいけど、文章が広がりすぎると逆に読みにくくなる、「それなら本文の幅だけ固定にしてしまえばいいじゃないの。」ということでやってみました。

まずはじめに考えたのが下のような感じ。


#page {
max-width: 90%;
margin: 0 auto;
}
#wrapper {
width: 100%;
}
#content {
float: left;
width: 650px;
}
#sidebar {
width: 100%;
margin-left: 650px;
}

contentが記事部分です。そこの幅をとりあえず650pxに固定。
sidebar(今回は右側)は、リキッドにしたいので100%にすればいいかと思ったがうまくいかない。

なるほど、contentがあるので右側の幅は(100%-650px)になっているというわけか。
幅を引き算の式で指定してるのとか見たことないのでうまくいかないと思うけど、とりあえずやってみる。


#page {
max-width: 90%;
margin: 0 auto;
}
#wrapper {
width: 100%;
}
#content {
float: left;
width: 650px;
}
#sidebar {
width: 100%-650px;
margin-left: 650px;
}

firefoxとIE7で軽く確認。あれ、うまくいってるんじゃね?ということで成功してしまいました。

ところが、このままだと幅をさらに小さくしたときにぐちゃぐちゃになってしまうみたい。
しかも、ブラウザによって挙動が違う。

そこで、まずsidebarの最小幅を100pxにしてみる。でも、それだけではレイアウトの崩れは回避できなかった。
ここで、もっと上の方のpageの最小幅を750pxに指定。
750pxは、contentの幅(650px)とsidebarの最小幅(100px)を足したもの。
つまり、横幅が小さくなってレイアウトが崩れる前に横スクロールバーが出現してレイアウトが崩れるのを防ぐという作戦。これは成功。

横スクロールバーの出現は基本的にあってはならない事態だけど、最小を750pxぐらいに設定しておけばほとんど出てくることはないでしょう。


#page {
max-width: 90%;
min-width: 750px;
margin: 0 auto;
}
#wrapper {
width: 100%;
}
#content {
float: left;
width: 650px;
}
#sidebar {
width: 100%-650px;
min-width: 100px;
margin-left: 650px;
}

最終的に完成したのがこんな感じ。動作はちゃんと確認してません。

個人的にこのレイアウトの弱点をあげてみる。
ウインドウの幅が広いとサイドバー広すぎ。
もうちょっと記事部分の幅があってもいいのだけど、そうすると全体(ここではpage)の最小幅を広げなくてはいけなくなる。
しかし、この最小幅が広すぎると環境によっては、横スクロールバーが出てきてしまう場合がある。
するとやっぱり、800px以下が妥当だろうということになります。

頭の中ではいいと思っても、実際やってみるとそんなにうまくはいかないみたいです。

Similar Posts:

この記事へのコメント

現在、この記事へのコメントはありません。

コメントをどうぞ

この記事へのトラックバックとピンバック

現在、この記事へのトラックバックはありません。

TrackBack URL