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

カテゴリ:初心者向け 2008年3月 1日 17:40

ということで、かなり独断と偏見によってこのエントリーを書いてますがw
Yahoo! 知恵袋のような質問系のところでたまに見かける問題や、
以前自分で陥った間違い(勘違い)についてまとめてみました。
知ってると大したことない問題でも、知らないとその修正にかなりの時間を費やしたりします。
そういう人たちに知っておいてもらいたいことを 7 個ほど書き出してみました。

書いていくうちに、すごい長くなってしまいました(;´д`)

▼EntryMore▼

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

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

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

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

外部 CSS ファイルを読み込み忘れた。(CSS ファイルの読み込みパスが違う)

なさそうでわりとあります。

ID と class の指定を間違えた。

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

子孫セレクタの構造が間違ってた。

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

途中のプロパティのセミコロンを付け忘れてた。

なぜかたまに忘れるんです・・。

別のところで詳細度の高いセレクタで書いているのを忘れていた。

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

  詳細度
通常セレクタ(bodyとか) 1
クラスセレクタ(.contentとか) 1 10
(勘違いで 1 と書いていました・・正しくは 10 です)
IDセレクタ(#containerとか) 100
直接指定(style="color:#fff"とか) 1000

上記のような詳細度付けがあり、指定されたスタイルの書き方によって詳細度を決定します。
たとえば、#container #headLine .contents { ... }という指定があったとすると、ID セレクタの詳細度は 100 なので、#container(100) #headerLine(100) .contents(10)となります。

詳細度は単純に足し算なので、この場合は詳細度は「210」となります。

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

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

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

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

Float使用時に背景が表示されないイメージ

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

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

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

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

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

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

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

Float使用時に背景が表示されないイメージ

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

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

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

のような書き方です。

100%幅によるカラム落ち

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

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

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

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

この記事のカテゴリー一覧を見る⇒初心者向け

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/65

トラックバック

CSSの7の間違いエントリー。

はたしてこのサイトを見ている人がどのくらいいるのか不明ですが、ここにたどり着くっ...

bySevenStyleWeb | Blog 2008年3月 3日 16:54

CSS 初心者(ビギナー)向けの人用のまとめ

最初にこういうカテゴリーをつくっておくべきでしたよね... 今からだと遅いので、...

byCSS Lecture 2008年5月21日 18:41

コメント

1 - CSS勉強中 さん

リストをCSSで装飾するの項目の</li<のあとを改行せずに書くか閉じかっこが逆だと思います…

2008年5月27日 10:46

2 - えど Author Profile Pageさん

1 - CSS勉強中 さん本当だ・・。nご指摘ありがとうございました!nさっそく直しました・・。

2008年5月27日 21:31

3 - ありがとうございます!! さん

「リストをCSSで装飾すると不明な余白ができる」nすごく助かりました!!nいつもとcssの組みを少し変えたら、n今回はIE6だけ下余白が発生してしまって困っておりました。n普段はサイズ固定で背景画像を置くか、文字なら display:inline;で横並びに使うことが多く、nこの状態に出会わなかったようで^^;nありがとうございました!

2008年6月28日 15:18

4 - えど Author Profile Pageさん

>>3 - ありがとうございます!!さんnお役に立てたようでなによりです。n知っていればすぐのことでも、知らないと時間かかったりしますよね・・。

2008年6月30日 09:42

5 - CSS 初心者 さん

私は、CSS勉強中、WEB業界に入って半年経たない未熟もんです(汗)。その前にWEBスクールに通っていましたが、やっぱっりまだまだ現場には対応できません。nhttp://www.studycss.net/こんなん見てみたり、WEB標準の教科書を読んでみたりと色々してますが・・・。また、なにかお勧めのもん等あれば教えていただきたく思います!!

2008年8月 5日 10:21

6 - えど Author Profile Pageさん

>>5 - CSS初心者さんnWEB標準の教科書はもう読まれているのですね。n自分では、その本が一番勉強になりました。nまさに目から鱗の情報満載だったのを覚えてます。n智識的には、その本を熟読すれば相当なものになると思います。nただ、CSSの挙動は"経験"によるところがとても多いと思っています。n不具合や想像とは全然違う動きなど。nそういったものを、実際に作っていく過程で見、n対処法を覚え(または編み出し)ていく。nそうすることで予め想定通りに書いていけるようになると思ってます。nなので、なんでもいいので色々なサイトを作ってみるのがいいと思います。nあと、「こうしたらどうなるかな?」って思いついたCSSを実際に書いてみると思った通りになったり、思った通りじゃないにしてもnとても面白い結果になったりと発見が多いので、nテスト用CSSをたまに書いてみるのも楽しいと思いますよ(*'-')

2008年8月 5日 12:50

7 - はるみ さん

管理人様。貴サイトではヘッダー固定をされている様ですが、メインコンテンツ部分とヘッダー部分の間に透明部分(メインコンテンツをスクロールさせるとフェードアウトしているかのように見える)の処理はどのようにされているのでしょうか?n

2008年8月 5日 16:12

8 - えど Author Profile Pageさん

>>7 - はるみさんヘッダ部分ですが、特にむずかしいことはしていません。n単純に、白い背景が徐々に透明になっていくような画像を作成します。nそれをPNG形式で書き出し、それを固定配置したヘッダ部分の背景として指定しているだけです。nただ、IE6はPNGに正式に対応していない&固定配置ができないという理由から、IE6だけはGIF画像を指定し、かつコンテンツに合わせてスクロールするように指定を分けています。

2008年8月 5日 16:34

9 - モケココ さん

セレクタの優先度ですが、nclassは"1"ではなくて"10"だったと記憶するのですが、、、、nhttp://www.stylish-style.com/csstec/base/order.html

2009年5月27日 10:46

10 - えど Author Profile Pageさん

>>9 - モケココ さんコメント・ご指摘ありがとうございます。nすみません、クラスセレクタの個別性は 10 でした・・。n修正しておきます!

2009年5月27日 11:17