はじめに

このサイトで説明しているcssとxhtmlでのレイアウト手法は、今までドリームウィーバー(dreamweaver)でホームページを作成していて、これからはxhtmlフォーマットでページを作りたいというプロフェッショナル志向の方にはお勧めの方法です。初心者のかたにもお勧めです。わかりやすい説明を心がけております。もちろんタグ打ちでホームページを作っていくのが得意、または好きだという方にもお勧めの方法です。
本サイトでうたっている対応ブラウザは幅広いです。最初の表示が遅くていらいらするので有名なnetscape6.2も対象ブラウザに入れております。しかしながら今やターゲットブラウザに含めて制作しているところなんて無いと思います。富士通のサイト（日経パソコンの企業サイト ユーザビリティランキング2005で1位）をnetscape6.2で見ればわかります。（直せそうな気もしますが...）
音楽屋やDTP屋でos9を使用しているパソコンでネットをする場合、ほとんどIEです。ネスケ6.2を快適に使って喜んでいる人、私は知りません。動作遅すぎます。それでも本サイトの対象ブラウザに入れてしましました。でも最近のネスケ＆モジラ系はとても良いですね。
firefoxもいろいろダウンロードして使うオプションツールがあり便利です。他人のサイトのcss編集もfirefox上で出来ます。勉強にはもってこいのブラウザ。
これらのブラウザで全部同じ表示になるcssでのレイアウト方法をこれから説明していきます。

スワップイメージ

このサイトでは、スワップイメージ（カーソルを画像にのせると画像が変化し、カーソルを外すと元に戻る効果）をcssの背景画像で行うことを、ちょっと推奨したいと思います。え？ドリームウィーバーを使うのなら素直にdreamweaverのスワップイメージを使えばそれでいいじゃないかですって？
ごもっとも。単なる自己満足の世界かと思います。dreamweaverで制作しているとき、画像をcssの背景で入れるだなんて面倒くさい方法です。したがいまして、無理にお勧めしません。興味のない場合は横目でちらちら読んでください。しかしながら、スワップイメージに関しては、ひな形cssソースを用意しましたので、それを使うとそう面倒くさくもないと思います。ひな形ソースの特定の箇所を変更するだけですので。
dreamweaverのスワップイメージを使うとちょっとソースが綺麗じゃないから、もっと他に便利なのはないのかなとお考えの方は、こちらのロールオーバーイメージを利用するのが良いと思います。これは、個人的に利用率が高いです。
また、cssでのスワップイメージ（画像のロールオーバー）についてはロールオーバーのページで詳しく説明しています。

どうせなら正攻法でいきましょう、divタグのレイアウト。

これからお話をすすめるdivタグのレイアウト方法は、まっすぐな道を進んでいきたい人にお勧めかと思います。教科書的な正しい使い方で、どのブラウザでも崩れず同じ表示のレイアウトを説明します。（divlayoutブラウザの標準モード向けのほうでは違うレイアウト手法をご案内しております...。興味のある方はどうぞ。）
しかしながら、まっすぐな道を進むのは苦痛を伴います。株価だって上に下にうねうねしながら推移します。人間だって世の中全ては右か左か、上か下か、行くか戻るか、常に相反する動きが自然なのです。さて、このまっすぐなdivタグレイアウト方法、慣れないうちはやや頭を使います。しかしcssは意外と簡単。よく「興味があるということはすなわちそのことに関して自身には才能があるということだ」といいます。cssに興味があればきっとすぐにエキスパートになれるでしょう。

ページ作成の際、有用な基本cssソースと基本xhtmlソースの紹介。
これは、ほとんどのブラウザで同じ表示にするための基礎です。

cssでページを構築していく場合、便利な方法があります。
「基本のcss設定とxhtml設定を作っておき、まずはそこから手を付けてレイアウトしていく」という方法です。もちろんこれらを用意しました。レイアウトの基本となるソースです。醤油ではありません。
まず何も考えずこれらのソースに手を加えていくんだという発想で作ると良いでしょう。以下からどうぞ。

xhtmlの基本ソース

cssの基本ソース

dreamweaverを使用している場合は、新規ページを立ち上げ、そこに記述されているソースとこのxhtmlの基本ソースとを入れ替えてください。それだけで自動的にxhtmlモードでの制作がスタートします。
そして、保存するときは、いつも通り、〜.html（もしくは〜.htm）という拡張子で行ってください。
cssの基本ソースは、同様に新規cssページを立ち上げて、その中身とそっくり入れ替えてください。そして、default.css等という名前で保存してください。
これでxhtmlで書かれたhtmlファイルとcssファイルと2つ用意できました。準備okです。
ちなみに、ブラウザごとにcssファイルをたくさん用意するのではなく、一つだけで充分です。たくさんあると、ややこしいのです。一つでできるのならば、ひとつで充分。

xhtmlの基本ソースを見てコピペしてcssの基本ソースを見てコピペ...という作業が面倒くさい方、以下ボタンをクリックするとその２つのファイル入りのフォルダをダウンロードしますので、使ってみてください。
え、 ウィルスが入っているですって？？大丈夫です、が、気になる方はダウンロードをお控えください。
（※　全然たいしたこと無いファイルですが、万一これらのファイルを利用して何らかの不利益を被ったとしても当方は一切責任を負いません。）

zip圧縮形式のファイルです。ダウンロード後、解凍して、下図のようにご自身のパソコンで作成したフォルダの中に入れて使ってください。
解凍（自動解凍されなかったら解凍してください）すると、websiteというフォルダが出現します中にcss.とhtmlのデフォルトファイルが入っております。
両方とも、ホームページ作成のとっかかりファイルとしてドリームウィーバー(dreamweaver)などで開いてご利用ください。

divタグでレイアウトするとは、すなわち数値を扱うということです。
たとえば、ページの全体幅が760ピクセルで、そこに435ピクセルのdivを配置し、左のスペースが30ピクセルなら右のスペースはどのくらいあるかな？？なんて具合に数字計算する必要も出てくるでしょう。
見た目ですぐわかるサイズ計算ソフトを作ってみましたのでご利用ください。Windows版です。
よろしかったら以下ボタンをクリックしてダウンロードしてみてください。
zip圧縮形式です。解凍後、wsizeフォルダ内の、wsizeをダブルクリックすると起動します。
（※　万一これらのソフトを利用して何らかの不利益を被ったとしても当方は一切責任を負いません。）

空欄に数値を入れて計算ボタンを押すだけのシンプルなソフトウェアです。（下図はスクリーンショット）
widthとマージン、widthとpadding、heightとマージン、heightとpaddingの計算にご利用ください。
使い方：全体横幅と横幅に数値を入れ、一方のマージン（パディング）に数値を入れ計算ボタンを押すと他方の数値が計算されて出ます。
マージン（パディング）部分に 何も入れずに計算ボタンを押すと平均値が表示されます。ただし、小数点以下は表示されません。全体縦幅と縦幅についても同様です。
マージン（パディング）部分に表示されている状態で数値を入れ直すとマージン（パディング）部分の数値がクリアされます。

まずは基本知識から。html（xhtmlも同じ）とcssの関係について。

簡単に説明します。
divなどのタグに何か設定をしたい場合は、上図のようにclass="○○"もしくはid="○○"というかんじでhtmlファイルのほうのタグに入れます。○○の部分にはアルファベットの名前を入れます。
cssファイルに、htmlでclassとした場合は.（ドット）のあとにその名前を付けて{　}の間に設定を記述します。idとした場合は、#のあとにその名前をつけて同様に設定します。
注意事項は、名前はアルファベットから始める。アンダーバーを使わない。idの名前は大文字で。以上３点です。
classとidの使い分けですが、classは何度でも使うもの。idは１ページに１回ぽっきり使うものとしましょう。

では下のボタンを押して次のページへどうぞ。