CSSの指定が効かない！！？という場面に出くわすことはよくあると思います。
CSSの指定が効かない場合、いろんな原因が考えられます。
この記事ではCSSの指定が効かない場合の原因と解決方法をご紹介したいと思います。

CSSファイルが正しく読み込めていない

HTMLファイルとCSSファイルを別々に管理している場合に考えられる原因です。
まずはCSSファイルが正しく読み込めているか確認してみましょう。

ファイル名や参照するディレクトリが間違っている

CSSファイル名を間違えている場合や、CSSファイルがアップロードされているディレクトリと異なるディレクトリを参照しようとしている場合、正しくCSSファイルを読み込むことが出来ません。
レイアウトが全く反映されないという場合は、この原因を疑ってみましょう。

root/
　├ css/
　│　└ style.css
　└ index.html

<!-- // ファイル名が間違っている -->
<link rel="stylesheet" href="css/styles.css">

<!-- // 参照するディレクトリが間違っている -->
<link rel="stylesheet" href="style.css">

CSSファイルをサーバーにアップし忘れている

そもそもCSSファイルをサーバーにアップロードし忘れている場合、正しくCSSファイルを読み込むことが出来ません。
ローカル環境では反映するのにサーバー上では反映しない場合は、この原因が考えられます。

root/
　├ css/
　│　└ （style.css）
　└ index.html

<!-- // CSSファイルをサーバーにアップし忘れている -->
<link rel="stylesheet" href="css/style.css">

記述ミスをしている

CSSファイル内で記述ミスをしている場合、その指定やその直後の指定がうまく反映しません。
一部分だけ指定が反映しない場合は、この原因が考えられます。

全角空白がある

CSSの記述の際、半角空白は問題ありませんが、全角空白があると、その部分の指定がうまく反映しません。

/* 全角空白がある */
p{
　color: red;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

}（カッコ）を忘れている

}（カッコ）を忘れていると、その記述は反映するけど、その直後の指定がうまく反映しません。
CSSが反映しない場合、その記述を疑うだけでなく、その直前の記述も確認するようにしましょう。

/* }（カッコ）を忘れている */
p{
    color: red;

p span{
    color: blue;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

数値から始まるID名やクラス名を指定している

ID名やクラス名は半角英字からと決まっています。半角数値から始まるID名やクラス名はうまく反映しません。
一部分だけ指定が反映しない場合は、この原因が考えられます。

/* ID名やクラス名の1文字目が数値のものは反映しない */
#1id{
    color: red;
}
#id1{
    color: red;
}
.1class{
    color: red;
}
.class1{
    color: red;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

優先順位が影響している

同じタグに同じプロパティの値が複数の指定がしてある場合、CSSの優先順位に沿ってどの指定が反映するか決まります。
CSSの優先順位は多くありますが、以下がその一部です。

• ファイルの下に書いてある記述ほど優先される
• 詳細なタグ指定がしてある記述ほど優先される
• !importantは最優先される

ファイルの下に書いてある記述ほど優先される

CSSは上から下に向かって処理されます。
そのため、あとから指定した指定が優先して反映するようになっています。
うまくCSSの指定が反映しない場合、その記述より後ろや後から読み込んでいるファイルに上書きされる指定がされていないか確認してみましょう。

 /* あとから指定した内容が反映される */
p{
    color: red;
}
p{
    color: blue;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

詳細なタグ指定がしてある記述ほど優先される

CSSの指定は細かく親要素から子要素、さらには孫要素へと細かくピンポイントで指定することが出来ます。
そして、細かく指定してある方がたとえ、その後ろに記述したとしても細かく指定してある記述の方が優先して反映するようになっています。
うまくCSSの指定が反映しない場合、その記述より詳細な指定がされていないか確認してみましょう。

/* 詳細なタグ指定がしてある記述が反映される */
p span{
    color: red;
}
span{
    color: blue;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

!importantは最優先される

CSSの記述は!importantを指定することが出来ます。この指定をすることでどんな指定方法よりも優先して反映されるようになります。
CSSファイルの最後に記述している場合や、詳細に指定していてもうまく反映しない場合は、どこかで!importantが指定されていないか確認してみましょう。

/* どこに書いてあっても!importantが設定されている記述が最優先される */
span{
    color: green !important;
}
span{
    color: red;
}
p span{
    color: blue;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ブラウザキャッシュが影響している

上のどの原因にも当てはまらない場合、ブラウザキャッシュやサーバーキャッシュ、WordPressの場合、キャッシュ系プラグインの可能性が考えられます。
キャッシュをクリアしてみて反映するか確認してみましょう。

まとめ

いかがでしたか？
CSSはプログラミングと違い、比較的簡単に記述することが出来ますが、思わぬ落とし穴が潜んでいることもあります。
CSSの指定が反映しない場合は、これらの可能性があるため焦らず原因を見つけていきましょう。