デフォルトCSSを初期化しよう

各ブラウザ（IE とか Firefox とか）には、デフォルトスタイルシートというものが存在します。
デフォルトスタイルシートとは、各ブラウザが独自に持っているスタイルシートのことです。
すべてのブラウザで、このデフォルトスタイルシートは共通ではありません。
そのために、この初期化をしていないと、IE にはない余白が、Firefox では余白がある！
なんてことになっちゃったりします。

なので、まずはそれを初期化しましょう。
デフォルトスタイルシートを初期化するのは簡単です。
主要なセレクタ（p とか div とか）に対して個別にスタイルを指定した初期化用 CSS を作成して、デフォルトスタイルシートを上書きするだけです。（デフォルトスタイルシートは優先順位が一番下）
初期化用だけのスタイルを書いて、それを外部ファイル化しておくと各ページにそれを読み込ませればいいのでさらに簡単になります。
（ちなみに、これが今自分で使用している初期化用CSSです⇒初期化用CSS）

ブラウザごとの CSS の解釈の違い

「デフォルト CSS を初期化しよう」でも書いたように、各ブラウザの動作は共通ではありません。
そのために、自分でチェックした環境では特に問題なかったものでも、見る人の環境の違い（ブラウザの違い）によってレイアウトが崩れていたり、ということがあります。
できれば、すべてのブラウザでチェックするのが望ましいですが、Mac を持っていなかったり、古くて手にいれづらいブラウザなんかもあると思います。
なので、現状では IE6、IE7、Firefox、Win 版 Safari、Opera あたりのブラウザでチェックすれば、見る人のほとんどの環境を網羅できるので問題ないと思います。

ここであえて IE6 と IE7 で分けたのには理由があります。
それは、IE6 はどちらかというと古いブラウザで、CSS の解釈に他のブラウザと比べるとかなり大きな違いがあるためです。
主な違いはIE6 のバグによる動作の違いがほとんどです。

よく言われるものでいえば、IE6 のボックスモデルの解釈の違いがあります。
これは、CSS で定義されている幅の決定方法がwidth+padding+margin+borderというものに対し、IE6 の幅を決定する計算が、width-(padding+margin+border)（すみません、width からは margin は引かれません）width-(padding+border)+marginという結果に基づいて幅が決定される、というものです。
これのために、CSS の定義通りに CSS を書くと、当然 IE6 ではレイアウトが崩れる要因になります。

そのために CSS ハックを使って IE6 だけ別のスタイルを指定したり、
IE6 でも同じように表示されるような CSS の書き方をする必要が出てくるわけです。

その詳しい書き方は長くなってしまうのでここでは割愛しますが、
以前のエントリーで「目で見るボックスレイアウト」という、余白などの動きを
実際に細かく指定して、それがどういう動きをするのか見ながら覚えられるように、というコンセプトで作ったツールがあるのでよかったら使って見てください。

CSSが適用されない！

これは初心者でなくてもたまにあることだと思いますが。
自分が経験して、ちょっとてこづったものを書いてみたいと思います。

floatした子ボックスを持つ親ボックスの背景が表示されない

これは比較的よく聞きますね。自分も昔、知るまでしばらくかかりました。
float、CSS レイアウトでは必須ですよね。
で、よく使われるわりにわりと落とし穴的なことが多い。
そして一番出くわすのが、この背景が表示されないです。

なぜ、こういうことが起こるのか。概念が分かっていれば、むしろ納得のことなのですが、知らない人にとっては「？？？」となるばかり。
ということで、概念を図にしてみました↓

図のように、float を指定した要素はその名の通り「浮き上がり」ます。
そのため、親ボックス（上の図では青のところ）は、子ボックス（上の図ではオレンジのところ）の存在を把握できないため、子ボックスのある位置まで背景が伸びないのです。

しかし、float した要素をクリアする要素（上の図では緑のところ）を置くことによって、その位置まで親ボックスの背景が伸びるため、要素すべてを囲うように表示される、というわけです。

しかし、後続する要素がなかったりしてクリアができない場合もありますよね。
そんなときは親ボックスそのものにクリアを適用するハックがあります。
ハックについては [clearfix] どんなブラウザでもクリアするワザ【最終版？】 を参考にしてください。

画像の下に不明な余白ができる

これは割りと気づかない人は気づかないかもしれません。
画像やインライン要素にはvertical-alignプロパティというものがあります。
（table のセルの場合は、縦の配置位置）
このプロパティの値には、topやmiddle、bottomといった位置に関するものがあります。

さて、なぜ画像の下に不明な余白ができるのか、ということですが、
このvertical-alignのデフォルト値はbaselineという値になります。
そして画像のベースラインは、画像自体よりやや下にあるのです。
そのため、画像と、画像のベースラインの隙間が、この不明な余白の正体だったのです。

なので、img 要素にvertical-align: bottomを指定しておけば、この不明な余白はなくなります。

リストをCSSで装飾すると不明な余白ができる

これは、IE6 で起きる現象です。
IE6 にはかなりのバグがあり、上で書いたような解釈の違いも含めて問題がたくさんあります。
この、リストタグを使ったメニューを作るときなんかによく起きる現象なので、今回のエントリーに含めて見ました。

理由はとても単純で、</li>の後ろの改行文字が、実際に見た目に表れてしまう、というものです。
なので、</li>のあとを改行せずに書くか、もしくはタグ内に改行を含めてしまう、というやり方もあります。

のような書き方です。

100%幅によるカラム落ち

これは IE6 で起こる問題です。
ほんとに IE6 の問題は多いですねｗ

100% 幅によるカラム落ちとは、floatを使ったレイアウトを行う際に発生する現象です。
通常、floatを使ったレイアウトの場合、floatする要素に幅を指定すると思います。
そのとき、内包するfloatボックスの幅の合計が100%になるように指定すると、
IE6 の場合、カラム落ち（float しているボックスが横に並ばず、下に落ちてしまうこと）
してしまいます。

解決方法としては、幅の合計が100%にならないように調整するか、
もしくはpxで指定することでこの現象を回避できます。

いやー、こんな長いエントリーは初めてかもｗ
みなさんのお役に立てば幸いです。
（もしなにか間違いとか発見したら連絡ください(;´д｀)）