ブラウザの表示領域幅
今後ウェブサイトのレイアウトの主流はリキッドレイアウトへと移行して行くような気もしますが、現状ではまだ固定レイアウトを採用することも多いかと思います。その際は現在最も普及していると思われるXGA (1024x768px) サイズのモニタを基準とし、これにきれいに収まる形でサイトの幅や高さを設定するのが、現在のウェブ制作の定石だと思います。
さて、今回会社の仕事で、XGAのモニタで、ブラウザの横スクロールバーを表示させずに、可能な限り大きい横幅のウェブサイトを制作するという案件があったのですが、ブラウザによる表示領域の違いや、また全く予期できなかった落とし穴もあり、思いのほか手間取ってしまいました。
[ポイント]
- ブラウザのスクロールバーの幅は同じではない。
- ブラウザにはボーダー（外枠）があるものが存在し、その幅は同じではない。
- 表示領域は上記2つの要素から決定されるので、結果として異なる値となる。
以下はXGAモニタを使い、Windows XPで各ブラウザの表示領域を最大にした時の各々のピクセル数です。htmlのbodyのマージンおよびパディングのスタイルには、それぞれ0を割当てています。またOSのテーマはデフォルトのWindows XPを設定しています。実はWindows XPの場合は、このOSのテーマが、ブラウザの表示領域に関係してくるのですが、それは後述します。
[Windows XPでの検証 その1]
| ブラウザ | 表示領域幅 | スクロールバーの幅 | ボーダー幅（左/右） |
| IE 6/7 | 1003px | 17px | 2px/2px |
| Firefox 2.0 | 1007px | 17px | 0px/0px |
| Opera 9.0*1 | 1001px | 17px | 5px/1px |
| Netscape 7.1 | 1009px | 15px | 0px/0px |
| Safari 3.0(α)*2 | 1008px | 15px | 0px/1px |
ブラウザ全体の幅（1024px）から、ブラウザの左右のボーダー幅と、スクロールバー幅を引いた値が表示領域幅、つまり横スクロールバーを使用せずに、ウェブコンテンツを表示できるピクセル数です。表示するコンテンツの幅がこの値よりも1pxでも超えると、ブラウザの横スクロールバーが表示されます。ただし、Operaについては、表示領域幅とスクロールバー幅の合計である1018pxまで横スクロールバーは表示されません。
続く
