SITEMAP [初めてのホームページ講座] [表示サイズ解析] [調査結果５]

表示サイズ解析

調査結果

5. 表示領域のマージンを消した状態でのサイズ

800*600の画面でブラウザをフルスクリーンにし、サンプル画像の縦横幅を変更しながらスクロールバーがアクティブにならない最大の大きさを見つけました。更に上、左のマージンも殺して、最大限表示領域を広げる努力をした場合の結果です。結果は表１に示しています。（HTMLソースコード）

IEに関しては、横20ピクセル、縦30ピクセルのマージンが存在するようで、この幅分表示領域が増加しました。表示部分は上、左共にウインドウ枠に密着し、マージンが全くなくなっていることに気付くでしょう。しかし、下マージンは無くなりませんのでご注意を。横に関しては表２、縦に関しては表３をご覧下さい。

NN4についても同様に、横16ピクセル、縦20ピクセルの増加、N6では横8ピクセル、縦16ピクセルの増加があります。相変わらずバージョンごとにその量が異なりますので注意が必要です。更に驚くことは、N6に関してはマージンを消せば解像度と同じ表示領域を持つことです。解像度が横800に対して、表示領域800だから驚きです。ただし、スクロールバーが表示されればこの限りではありません。

しかし、時代が古いのかNN3に関してはマージンの変更は出来ませんので、通常状態での結果と同じ結果になります。

結果的に最も小さな表示領域を持つブラウザは縦横共にNN3ということになります。しかし、通常状態での結果と異なりNN3よりもIEの方が横幅は大きくなり、逆転現象が発生します。

>> 解析結果

表１．各ブラウザの表示領域
ブラウザ	横(Width)	縦(Height)
IE4	780	431
IE5	780	431
NN3	776	380
NN4	796	420
N6	800	428

表２．マージンをなくした場合（横幅）
ブラウザ	マージン通常	マージンなし	増加量
IE4	760	780	20
IE5	760	780	20
NN3	776	776	0
NN4	780	796	16
N6	792	800	8

表３．マージンをなくした場合（縦幅）
ブラウザ	マージン通常	マージンなし	増加量
IE4	401	431	30
IE5	401	431	30
NN3	380	380	0
NN4	404	420	20
N6	412	428	16

※単位：ピクセル (画面　800*600)

表４．HTMLソースコード

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>テストページ</title>
</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
<img src="image/test.gif" alt="" width="400" height="300">
</body>
</html>

[Go To Top]