CSSが適用されない時に確認する5つのこと htmlとcss-新潟のホームページ制作会社 (株)アテンド

CSSを頑張って書いたのに適用されないときに確認すべき箇所

とても頑張ってホームページのデザインをして、CSSを書いたのに全然デザインが反映されなかったり、一部だけ適用されない・・・という事が時々あります。
その時に注意して確認してもらいたい部分を紹介します。

間違えていない！と思っていても、意外な部分で間違いが見つかるものです。
うまく適用されなくても焦らず、どこに間違いがあるのかを考えましょう。

1.コロン（:）セミコロン（;）は間違えていないか

以前（第16回：CSSの文法とホームページに適用させる3つの方）に紹介した様に、CSSはプロパティの後ろにはコロン（:）、値の後ろにはセミコロン（;）を付けるというルールになっています。これを間違えてしまっていると、間違えている部分以降のCSSが一部適用されない。という現象になります。
一部のデザインが適用されない場合、デザインしたホームページと、書いたCSSとを見比べて、どこが適用されていないのかを調べてみてください。
そのCSSの付近に間違いがあるかもしれません。

2.class名、id名が数字から始まっていないか

数字から始まるclass名やid名を付けてしまうと、基本的にはそのCSSは動作しません。

次の例はよくないclass名です。

.3title {
　　font-size:30px;
}

class名が数字から始まっていますね。このように数字から始まってしまうとデザインが反映されません。
CSSに使うclass名やid名を考えるとき、数字を先頭に置きたくなる場面があるかもしれませんが、それはNGですので注意してください。
ただし数字が全く使えない、というわけではありません。数字を途中に入れる事は問題ないので安心してください。

3.波括弧（{}）は間違えていないか

CSSを書く時に、ミスタイプすることなくキーボードを叩ければいいのですが、それはなかなか難しいことです。
もし入力を間違えたら「Back Space」キーや「Delete」キーを押しますよね。
その時に波括弧（{}）まで消してしまったり、既に書いてあるのに波括弧を二重に付けてしまう場合があります。
この場合も間違えている部分以降のCSSが一部適用されない。という現象になります。

また、波括弧（{}）は半角での入力になります。
全角で入力することのないようにしてください。

4.CSSのプロパティと値は間違えていないか

class名やid名は任意で設定しても問題ありませんが、プロパティと値はそれぞれスペルが決まっています。
記述に間違いがないか確認してみてください。

5.CSSのリンクは正しいか

そもそも参照先のCSSを正しく指定できていない場合もあります。
CSSを外部ファイルにする方法でホームページへ適用させていて、CSSが全く反映されない場合、そのCSSへのリンクが正しく設置されているのかをもう一度確認してみてください。
参照先にCSSファイルがなければCSSを反映させられません。もし間違えていたら記述を修正するか、CSSファイルを正しい場所へ設置してみてください。