初心者が陥りそうなCSSの7の間違い

▼EntryMore▼

デフォルト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)という結果に基づいて幅が決定される、というものです。
これのために、CSSの定義通りにCSSを書くと、当然IE6ではレイアウトが崩れる要因になります。

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

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

CSSが適用されない！

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

・外部CSSファイルを読み込み忘れた。（CSSファイルの読み込みパスが違う）
なさそうでわりとあります。

・IDとclassの指定を間違えた。
ずっとIDに対するCSSを書いていて、たまにclass用のCSSを書こうとしたときなんかにやります。
（.contentとしなければならないところを#.contentとしていた、とか）

・子孫セレクタの構造が間違ってた。
これもわりとよくあります。似たような構造のCSSを書いているときに、
それをコピーしてCSSのプロパティだけを編集して、構造を修正し忘れたりとか。

・途中のプロパティのセミコロンを付け忘れてた。
なぜかたまに忘れるんです・・。

・別のところで優先度の高いセレクタで書いているのを忘れていた。
これ、気づかないと一番やっかいな代物です。
CSSには優先度というものがあり、その優先度のもっとも高いスタイルを適用します。
そのため、新しくスタイルを追加しようとして優先度の低い指定でCSSを書いても
別の場所で書かれている優先度の高いスタイルが適用されているために
何度やってもスタイルが変更されない、なんてことになります。

	優先度
通常セレクタ(bodyとか)	1
クラスセレクタ(.contentとか)	1
IDセレクタ(#containerとか)	100
直接指定(style="color:#fff"とか)	1000

上記のような優先度付けがあり、指定されたスタイルの書き方によって優先度を決定します。
たとえば、

#container #headLine .contents { ... }

という指定があったとすると、IDセレクタの優先度は100なので、

#container(100) #headerLine(100) .contents(1)

となります。
優先度は単純に足し算なので、この場合は優先度は「201」となります。

なので、#articles .contents { ... }と書いたとしても、当然優先度の高いスタイルが適用されるのでいくら更新してもスタイルは変更されません。

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

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

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

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

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

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

これは割りと気づかない人は気づかないかもしれません。
画像やインライン要素には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で指定することでこの現象を回避できます。


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