コンテナの最大幅

定義

コンテナの最大幅とは、画面がどれだけ広くなってもコンテンツが一定の幅より横に伸びないように まとめておくルールです。大きなモニターで本文が画面の端まで目一杯広がると、一行が長くなりすぎて、 読み終えた目が次の行の先頭を見つけにくくなります。max-width で上限をかけておけば、画面が大きくなっても コンテンツは読みやすい幅を保ち、余ったスペースは左右の余白として自然に流れていきます。さらに左右の マージンを auto にすれば、コンテンツが画面の中央にそろいます。画面いっぱいに広げることと、読みやすくする ことは別の目的なのだと理解することが、この概念の核心です。

なぜ重要か

人の目は一行が長すぎると簡単に疲れてしまいます。行の終わりまで読んだあと、次の行の先頭へ視線を 正確に戻すのが難しくなるからです。そのため本文の幅を適切に制限すると、読む速さも集中力も目に見えて 良くなります。逆に幅の制限がないと、画面が大きいほどかえって読みにくくなるという逆転が起こります。 コンテナの幅を決めておけば、どんな画面サイズでもコンテンツが一定のリズムで見え、左右の余白が自然な ゆとりを生んで、画面全体が整った印象になります。特に今のように画面サイズがバラバラな環境では、幅を 自分でコントロールするこのルール一つが、安定したレイアウトの土台になります。

よくある間違い

• 本文にもページ全体と同じ広い幅をそのまま適用してしまうケースです。背景やヘッダーは画面全体を 使ってかまいませんが、読ませたい文章は必ず狭い幅の中に収める必要があります。領域ごとに必要な幅が 違うことを区別しないと、大きな画面で文章が読みにくくなります。
• 最大幅だけかけて左右の余白を忘れてしまうことです。幅を制限しても、画面がコンテナより狭くなると 文字が端にぴったり張り付いて窮屈に見えるので、左右に最低限の内側の余白も一緒に入れておくと、 どんな画面でも安定して見えます。
• 固定のピクセル値を一つだけ使い、画面サイズによる変化を考えないことです。とても小さな画面では 最大幅より画面の幅のほうが狭くなるので、幅が画面をはみ出さないように一緒に扱う必要があります。

実務のヒント

• 本文の一行はだいたい 45〜75 文字が読みやすいとされていて、max-width を 640〜760px 程度 （およそ 60〜75ch）に設定することが多いです。文字幅の単位である ch を使うと、フォントサイズが 変わっても一行に収まる文字数が安定して保たれるので便利です。
• 本文用の狭いコンテナと、ヘッダーやバナー用の広いコンテナを、あらかじめ何種類か決めておきましょう。 場面ごとに幅を考え直さなくて済みますし、画面全体の幅のリズムも一貫して保たれます。
• 幅は max-width で上限だけを決め、基本の幅は 100% にしておきましょう。そうすれば大きな画面では 上限で止まり、小さな画面では画面に合わせて縮むので、特別な処理なしでいろいろな画面サイズに 自然に対応できます。

関連概念