つまづいたらここが原因!CSSの基本

熟練者でもやってしまう、classやidの間違い


ひとつ例題を出しますね。 【HTMLに<p class=""class01"">テキスト</p>と書き、同じページの<head>内CSSに body{color:#000000;} #class01{color:#ff0000;} と記載したとします。このテキストは何色になるでしょうか。理由もお答えください。】 答えは…黒(#000000)です。「えっ?赤(#ff0000)じゃないの?」と思った人もいるかもしれません。理由は…HTMLのpタグに記述されているのは.class01なのに、CSSの指定は#class01になっているからです。#はidを表すので、pを赤字にしたい場合はCSSの記載を.class01{color:#ff0000}とするか、pタグの記述を<p id=""class01"">と変更する必要があります。特に手打ちでコーディングをしている場合は、熟練者でもたまにミスしてしまうポイントです。他にも単純にid名やclass名をタイプミスしてしまう場合もあります。表示が思い通りにならない場合は、まずここをチェックしてみてください。




CSSは後出し優先、の落とし穴


CSSは基本的に下に記述したものが優先されます。『修正したいけれど、あまり既存の記述をいじりたくない』という時は、追加修正の箇所を一番下に記載する、という方法が有効です。しかしたまに『CSSの一番下に記載したのに全然反映されない』ということがあります。 こういう時はそのCSSが『本当に一番下か』を疑ってみてください。例えば外部CSSファイルの一番下、という場合、そのリンクしているHTML内の更に下にCSSはありませんか?更に下に外部CSSリンクが存在したり、<style>でCSSが書かれていたり、<body>内のタグにCSSが書かれている、ということもあります。また、!importantがある値は最優先されますので、そこも意識してチェックしてみてください。 それでもダメなら、CSSの中に『条件付きセレクタ』があるか探してみましょう。例えばCSSの上の方に#id01 #koid01 p{color:#ffffff;}、下の方に#koid01 p{color:#000000;}があった場合、前者の方が優先されます。指定が細かい方が優先されるのです。ここも詰まりやすいポイントなので注意してくださいね。