ページをウィンドウ幅いっぱいに表示

常に幅が固定表示されるのが個人的に好きではなかったので、更にスタイルシート修正に試行錯誤した上、ページをウィンドウ幅いっぱいに表示するようにしてみました。

やり方の概要はこんな感じです。まず、スタイルシート上の「#container」「#left」「#right」「#center」にある width の値を、pixから比率(%)表示に書き換えます。#containerの値「width: 800px」が枠全体の幅のようなので、ここを比率表示にしますが、100%にするとウィンドウの下にスクロールバーが表示され美しくないので、「width: 99%」と窓枠ぎりぎりに設定してみました。

あとはこの99%を #left #right #centerに振り分けます。もともとが 200px, 200px, 400px だったので、比率もそれに合わせて 24%, 24%, 51% としてみました。

こうすると常にウィンドウいっぱいに表示される反面、窓の幅を狭くするとページも狭くなってレイアウトが乱れる可能性もありますが、個人的にはこちらの方が好きなので満足してます(^^)