機能を領域（レイアウト）に割り当てる

Ｗｅｂページには２つの大きな機能があります。

ひとつは、そのページで表示する情報（コンテンツです。

もうひとつは、訪問者がサイト内を移動するためや、必要な情報にたどり着くためのナビゲーションの機能です。

コンテンツとナビゲーション以外の要素は、修飾的なレイアウトになり、あくまで脇役と考えてレイアウトを考えるべきです。

イメージを重要視するあまりナビゲーションが解かり辛くなると、訪問者が目的のページにたどり着けなくなってしまいます。

Webページはブラウザのスクロール機能で無限に（パソコンの性能に依存するが）できます。

だから決まったサイズがあるわけではありません。

では、どのくらいのサイズで作成したらよいのかＷｅｂ作者が決めなければいけません。

Ｗｅｂページはパソコンで閲覧するわけですから、パソコンの画面サイズを基準に考えます。

現在のパソコンのサイズは次のようになっています。

サイズは基本的には横サイズがスクロールしないようにレイアウトします。

縦幅の、スクロールは極力押さえどうしても長くなる場合は、ページ内リンクなどで移動できるようにします。

ＶＧＡ(640X480px)
ＳＶＧＡ(800X600px)
ＸＧＡ(1,024X768px)*現在最も使用されている画面サイズ
ＳＸＧＡ(1,280X1,240px)
ＳＸＧＡ＋(1,400X1,050px)
ＵＸＧＡ(1,600X1,200px)

パソコンの画面サイズに合わせたWebページの横幅の参考値

レイアウトの単位は全てピクセル(px)です。

HTMlやＣＳＳの記述中においても、表示されるデバイスがパソコンのディスプレイであることからピクセルでの指定が基本となります。

ただし、ＣＳＳによる印刷レイアウトやユーザビリティを配慮したＷｅｂページでの文字サイズなどは、ピクセルなどの絶対値ではなくemなどの相対値で指定します。

DOCTYPEスイッチ問題などHTMLドキュメントの書き方で見え方が変わる問題もあります。

当サイトでは、可能な範囲で標準準拠モードで表示できるようにしていますが、サンプルなどにおいては、機能の制約でブラウザ互換モードが多々あることをお断りしておきます。