横幅固定シンドローム

最適の横幅は？

何もいじらなければテキストは左右に広がっていき、文字の大きさとウィンドウ・サイズ（横幅）にもよりますが一行の長さは伸び放題となります。これを避ける為に何らかの処置が行われるのが一般的です。

<br>で意識的に改行
左右にマージン・パディングを取って余白を作る（%、em、px など）
複数に分割したレイアウトを採用する（%、em、px など）
横幅を指定する（%、em、px など）

このページでは横幅を 620px に固定してセンタリング（中央寄せ）しています。フォント・サイズはデフォルト（無指定）のままですが、 IE で「大」なら34文字、「中」なら42文字、「小」なら52文字くらいが一行の文字数になるようです。

ウィンドウ・サイズ（特に幅）が小さい程、表示文字サイズも小さくする傾向があるかと思います。表示領域が狭いと、小さな文字でも一行の文字数がしれているので読みやすくなります。逆に小さなウィンドウで通常サイズの文字だと、上下スクロールを多用するハメに陥ります。

<br>で改行

こまめに強制改行してやれば、行の長さをコントロールできます。しかし、改行個所に関してはブラウザ任せにした方が良いとされています。

左右に余白を作る

マージンは車間距離のような概念であり、ブロックとブロックの間にどれ程の距離を取るかを規定します。

ブロック間マージンマージンは必ず二方向からのせめぎ合いとなります。上下に二つのブロックが並んでいる場合、上に位置する方としては margin-bottom（下側のマージン）、下に位置する方としては margin-top（上側のマージン）が同軸で戦います。例えば 10px と 40px で競合するなら長いほうの 40px が採用されます。

ボディー・マージンまた、body要素にもマージンが存在しています。 body のマージンは <body> ... </body> 内に存在する全ての要素に適用されます。 body のマージンとブロック要素のマージンは競合せずに合算されます。 デフォルト（無指定）だと、多くのブラウザで上下左右とも 10px 程度に設定されているようです。

パディングまた、padding は要素の内側に向かっていく余白となります。気を付けないといけないのは、padding の余白領域を要素の長さに含むか否か？　と、いう点です。例えば padding: 10px で要素幅（width）が 600px だとします。テキスト、内部余白（padding）、枠線（border）など全て込み込みで 600px なのか、テキスト領域のみで 600px なのかは条件によって変化します。

DOCTYPE宣言が strict だったり、XHTML で記述しているのなら width: 600px に padding、border は含まれず、600px に左右の padding、border の幅が合算されます。 DOCTYPE宣言が Transitional だったり、記述なし（あるいは 5.x 以前の IE）だったら width: 600px に padding、border が含まれます。なので、テキスト領域は width: 600px から padding、border の幅を削ったものとなります。

複数に分割したレイアウト

横が長すぎるのなら、「いっそ左右に分割してしまおう」という考え方もあります。

分割レイアウト

分割にはフレームを使う方法もありますが、昨今ではフレームを撤廃する方向に世情が動いています。複数の div で囲みこむという方法が主流かと思いますが、パターンとしては % で指定する場合と、px などで指定する場合とがあるかと思います。

% の場合は上の例だと左から、25%、45%、25% という具合でしょうか。ある程度以上、ウィンドウの幅を縮めたら潰れてしまうのは仕方ないのですが、（標準のフォント・サイズで）700pxくらいまでは耐えられるようにすべきでしょう。

px で指定する場合に関しては後述します。

横幅を指定

分割レイアウトはウィンドウ横幅いっぱいに情報を埋め込んで、画面の有効活用を行っています。全体の情報量が多く、更新頻度も高いサイトにおいては、サイト内のナビゲーションを充実させる必要性が求められるので、分割レイアウトを好んで用います。しかし、欠点としてはツール（ブログ生成プログラムや"Dreamweaver"など）で管理しないと更新作業が大変であるという点と、ウィンドウの幅を狭くした際に対応しきれない構造であるという点などです。

そこで、個人サイトや中小企業に多いレイアウトが本文スペースを px で指定した横幅固定になります。大手でも、Yahoo! などのポータルサイトでは横幅固定したテーブル・レイアウトを好んで採用しています。

このページも div の横幅を 620px に固定してセンタリング（中央寄せ）していますが、このようにするメリットはいくつか存在します。

ユーザー環境に左右されにくいのでレイアウトしやすい
一行の文字数を適度な具合にコントロールできる
左右に目線を移動させる幅が短いので、スッキリした印象を与える

逆にデメリットとしては、メリットの裏返しみたいになるにですが、以下のようなものが考えられます。

幅の広いウィンドウだと無駄な余白が多くなる
幅の狭いウィンドウだと横スクロールの必要が生じる

レイアウトしやすい

Yahoo! JAPAN のように50とか60とかのコンテンツを表示させる複雑なレイアウトだと、あらゆる条件下に耐えうる段組構成は作るのはことさら難しくなります。例えば、（ウィンドウの）横幅 1024px のときには左右に広く展開し、横幅 600px のときは縦長の構図に変化する。横幅 400px 程度に縮めても横スクロールの必要は無く、無様なカタチの妙な改行も発生しない。ハッキリ言って無理です、こんなレイアウトは。

そこで、何かを犠牲にせざるをえないのですが、狭い横幅でも閲覧可能という観念を切り捨てたのが横幅固定デザインです。かつて、「800*600px」という解像度のディスプレイが多かったコトと、ウェブページを印刷する際に強制的に横幅700px程度に圧縮されるという事情を踏まえての結果でしょう。横幅600pxから700pxに固定するレイアウトが幅をきかせました。

自由度が低い

ウェブサイトを閲覧するユーザーは、ウィンドウの上下幅やフォント・サイズを自由に変更するコトができます。「1024*768px」ならともかく、「1600*1200px」のディスプレイで全画面表示にするヒトはいないでしょう。個々人が都合のよい好みのサイズで、ウェブサイトを閲覧しているワケです。しかし、そのような自由を横幅固定のサイトは奪っているとも言えます。

上記のデメリットを致命的な欠陥と思うかどうかは、製作者の考え方次第でしょう。情報量の多い複雑な段組を作る場合、どこかを固定しないとレイアウトなんかできたものじゃありません。特にテーブル・レイアウトの場合は固定する必要性が高いでしょう。