CSSレイアウト[本文2段組のレイアウト-0]基本のキ
CSSでのレイアウトを始める前に、これだけは押さえておきたい基本をピックアップ。● CSSは「箱」を指定するもの
● IDとCLASSの違い
● 後から書いた方が優先
● 画像のパスはCSS書類からのパスになる
● センター合わせは「マージンauto」
CSSは「箱」の様相を指定するもの
HTMLには body, h1, ul, p, img, a, divなどの「要素」がある。それらすべてが、「高さと幅のある箱＝ボックス（またはブロック）」だと考える。
<td>が１つしかないtableのようなもの。
CSSはその箱の見た目を指定をする。位置やサイズ・色・背景画像・囲み罫・文字サイズや色などを指定する。
HTMLに置いた箱は、上から下へ順番に表示される。
箱の中にもまた箱を入れられる。中の箱も同じように上から順に連なる。上から下へがデフォルトの並び方。横に並べたい時はCSSで「float（回り込み）」などの指定が必要。
※この箱は、marginやpadding、borderの構造を持つ。→TIPS「CSSのボックス構造」
IDとCLASSの違い
HTMLの各要素にCSS指定する時、例えばdiv要素になら<div id = "○○○">や、<div class = "□□□">と指定する。
この「id」と「class」のふたつの違いは、ズバリ使える回数。
「id」は、1枚のHTML書類の中で1回しか使えない。
「class」は何度でも使用可。
「id」は、タイトルやロゴやフッター、メニューボタンなど、そのページに1つしか無い要素に使用すること。
「class」のほうは、そのページで繰り返し使うものに使う。
このようにきちんと分けて使うと、スタイルシートの編集時に便利。
※詳しくは→TIPS「セレクタとは」
後から書いた方が優先
CSSは、後で記述した方（ブラウザが最後に読み込んだ方）が、前のものを上書きする。
例えば、
あるサイトで、背景色は白に指定したが、1ページだけ背景をライトイエローにしたい時。
そのページだけで使うCSSを作り、body {background-color : #ffffe0} とする。
この新しいCSSをこのページだけに追加で読み込ませるのだが、重要なのは全ページ用に作ったCSSより後に読み込ませること。
始めに指定した#ffffffを上書きするので、そのページだけ背景は#ffffe0(ライトイエロー)に。
※優先順位について、詳しくは→TIPS「CSS記述の優先度」
画像のパスはCSS書類からのパスになる
外部CSSファイルの場合、背景画像のパスはそのCSSファイルが基準になり、HTMLファイルと切り離される。
HTML上に画像ファイルまでのパスがあると、同じ画像を複数のHTMLで使う時、違う階層にあるHTMLなら、パスを書き直す必要がある。
外部CSSにすれば、画像のパスはそのCSSファイルからのパス。異なる階層にあるHTMLファイルで使っても同一のCSSで済む。編集も、1枚のCSSファイルを修正するだけでOK。
というわけで、複数のページで共有する画像はCSSで貼り付けるほうが良い。また、CSSはHTMLの<head>に書かずに外部ファイルにしたほうが良い。
※外部CSSファイルの作成について、詳しくは、次のページ→[1]外部CSSの読み込みを参照に。
センター合わせは「マージンauto」
<center>〜</center>タグはW3Cにより非推奨になった。でもCSSで簡単にセンタリング可能。
センター合わせにするCSSは、ボックスの左右のマージンを「auto」にするだけ。
ただ、この指定はオールドブラウザでは使えない。オールドブラウザでのセンタリングは<body>に行揃えのセンタリング指定をする。ただし、そのままではページ全体のテキストが全部センタリングされてしまうので、ボックスの中は左揃えに戻す。
例えば下記のように指定する。
body { text-align: center } ←オールドブラウザ用
#outline { text-align: left; ←オールドブラウザ用 margin: 0px auto ←モダンブラウザ用 }
（#outlineは全体を囲む１番大きなボックス。名前は何でもいい。）
★オールドブラウザとは（本サイト制作の2008年当時の）IE5以前のものを指しています。
いまではどのブラウザも「margin:auto」に対応していますので、body要素に上記の
「margin: ○px auto;」を指定するだけでセンタリングできます。（2011.06.27）
この「margin: 0px auto」という書き方は「ショートハンド」といわれるもの。意味は「上下のマージンは0px、左右のマージンはオート」。詳しくは→TIPS「CSSのショートハンド」
センター合わせと左合わせについて詳しくは→TIPS「センター合わせ・左合わせ」。オールド・モダンブラウザについては→TIPS「DOCTYPE宣言について」