ここではページ内のレイアウト設定方法について説明します。ここでいうページ内のレイアウトとはどういうものかというと、ページ内をいくつかの区画に分けて、それぞれに異なる内容、あるいは区画毎に一連の内容を集めて表示することを意図しています。

　例えばページ内を次のような区画に分けます。

　ちょうどあなたが今見ているこのページのような、文章中心なら各区画の意味として例えば

のように割り振るかもしれません。それぞれの区画に、それに応じた内容を書いていく、ということです。

　もしくは入力画面のページを作成するときに、

　と、一連の入力項目をまとめて配置しておきたいときにも、区画化のレイアウトを利用できます。

　ところでなぜレイアウト設定をスタイルシート（CSS）の中で説明するのか、その理由を説明しておきましょう。それは原則としてHTMLだけでは、細かいレイアウト設定が出来ないためです。HTMLはあくまで文書の構造を定義するものであって、文書の見栄え、レイアウトについて細かい設定は出来ません。これを実現するにはCSSの機能を利用して行います。

　原則として、と書いたのは、HTMLの機能であるtableタグを利用する、レイアウトテーブルという方法があるからです。これである程度のレイアウト設定は可能です。

　ここではテーブルを使ったものと、使わないものの、両方について説明していきます。

　さてページ内のレイアウト設定方法ですが、レイアウトテーブルを使用しない、CSSだけで設定するのが本来の姿です。

　しかしそれには制約があります。その制約は、ブラウザにIE（Internet Explorer）を使うか否かに依存します。

　理由は、とりわけIE6までのInternet ExplorerはCSSに関してバグだらけ、という点にあります。IE以外のどのブラウザでも同じように表示できる内容が、IEだと崩れるというものです。

　ところが残念ながらブラウザシェアは、IEが圧倒的です。ですのでプロのWEBデザイナの人たちは、IEで正しく表示できるように、いろいろな裏技を駆使したりしています（その結果、他のまっとうなブラウザで表示が崩れても）。

　ただし貴方が今見ているこのページでは、IEなんざ気にしません。本来のHTML学習を目的としているからです。ですからIEでここを見ていて、何か表示がおかしいと思うことがあっても、それはあきらめてください（基本的にFirefoxでしか確認していません）。

　そうは言ってもIEの人を放置するのも可哀相なので、各レイアウト設定方法毎に、これはIEでも表示可能、これはIEだと崩れる、とコメントは入れておくことにします。

　では始めに、ページレイアウトを設定する際に使用する、スタイルシート設定項目について整理しておきます。ここで説明する設定要素は、レイアウトテーブルを使った場合はもちろん、後述するdivタグを使った方法でも有効です。