HTML・CSSを学習し始めであれば、「なぜかCSSがうまく効かない！」と、困ってしまうことがあるはず。
そこで「CSSが効かない場合のよくある原因と確認すべきポイント3つ」をまとめてみました。
CSSが効かないよくある原因
「書き方が間違っている」「優先順位」「キャッシュ」の３パターンのどれかであることが多い。
書き方ルールの間違い
正しいルールで記述ができていないパターンです。
コメントアウトが間違っている
CSSでコメントアウトするには「/*〜*/」の記号を使います。
通常の書き方。
p{color:blue;}「/*」と「*/」で囲っている箇所がコメントアウトされる。
「color:red;」は反映されない。
/* p {
color : red;
} */ここでのよくある間違いとしては
・HTMLのコメントアウトの「<!-- -->」記号を使っていないか
・囲み始めを忘れている（「/*」の記号忘れ）
・囲み閉じを忘れている（「*/」の記号忘れ）
といったことが考えられるので、再度チェックしてみましょう。
「;（セミコロン）」が抜けている
正しい書き方。
p{color:blue;/* ←「;」で閉じられている。*/font-size:20px;}間違った書き方。
p{color:blue/* ←「;」がない。 */font-size:20px /* ←ちなみに最後は「;」がなくても反映される。 */}「{}」が間違っている
正しい書き方。プロパティが「{」「}」で正しく囲まれている
p{color:blue;font-size:20px;}間違った書き方。 最初の「{」が抜けていて反映されない。
p/* ←「{」が抜けている。 */color:blue;font-size:20px;}文法が間違っている
class="sample" がついているpタグにCSSを当てたい場合
正しい書き方
.sample{color:blue;font-size:20px;}間違った書き方（class名の前の「.」が抜けている）
sample{color:blue;font-size:20px;}pタグの中のspanタグにCSSを当てたい場合
正しい書き方
pspan{color:blue;font-size:20px;}間違った書き方（「p」と「span」の間が"全角"スペースになっている）
p span{color:blue;font-size:20px;}タイポ（スペル間違い）
※スペルミスのことを「タイポ」と呼ぶことが多いです。
（「誤植」を意味する「typographical error」から来ているそうです）
正しい書き方
div{margin:20px;}間違った書き方（「margin」の「i」が抜けている。）
div{margn:20px;}優先順位が低くなっている
優先順位が気づかず下がってしまってるパターンです。
優先順位とは？
CSSの記述が複雑になっていくと、1つの要素に対して複数のセレクタ、プロパティを記載してしまうことがあります。
その場合、「どちらを優先するのか」のルールが明確に決められているのです。
優先順位について
非常に複雑な計算で決まるのですが、最初はひとまず3つのルールを覚えればOKです。
- 「最後に書いたもの」が優先される
- 「要素型セレクタ」＜「classセレクタ 」＜「idセレクタ」 の順に優先される
- 「!important」が最優先される
※3→2→1の順番で優先度が高い。
「最後に書いたもの」が優先される
同じセレクタ内に同じプロパティが複数記載されている場合
p{color:red;color:yellow;color:blue;/* ←最後に書いたこちらが優先される。 */}複数のセレクタに同じプロパティが記載されている場合
p{color:red;}p{color:blue;/* ←最後に書いたこちらが優先される。*/}「要素型セレクタ」＜「classセレクタ 」＜「idセレクタ」 の順に優先される
さきほどの「最後に書いたもの」よりも、こちらのルールが優先されます。
class="sample" がついているpタグにCSSを当てたい場合
class名で指定したclassセレクタ。こちらが反映される
.sample{color:blue;font-size:20px;}要素名で指定した要素型セレクタ。こちらは反映されない。
p{color:blue;font-size:20px;}id = "demo" と class="sample" がついているdivタグにCSSを当てたい場合
id名で指定したidセレクタ。こちらが反映される
#demo{background-color:green;border:1pxsolid#cccccc;}class名で指定したclassセレクタ。こちらは反映されない。
.sample{background-color:red;border:2pxsolid#333333;}※他にも「擬似要素」「擬似クラス」といったものもあり、計算式はさらに複雑になりますが、学習初期段階では、冒頭でお伝えしたように、「要素型セレクタ」＜「classセレクタ 」＜「idセレクタ」を覚えておいて、後は徐々に知識をつけていければOKです。
「!important」が最優先される
id = "demo" と class="sample" がついているdivタグにCSSを当てたい場合
divタグで指定した要素型セレクタ。「!important」があるので優先される。
div{background-color:black!important;border:3pxdotted#666666!important;}id名で指定したidセレクタ。こちらは反映されない。
#demo{background-color:green;border:1pxsolid#cccccc;}class名で指定したclassセレクタ。こちらも反映されない。
.sample{background-color:red;border:2pxsolid#333333;}※「!important」は便利ではありますが、多用すると保守性が悪くなるため、極力使用しないことをオススメいたします。
キャッシュが残っている
意外とこれもよくある。キャッシュをクリアすればOK。
キャッシュとは？
キャッシュとは「1度開いたWEBページのデータをブラウザに保存しておくことで、次回同じページを開くときに短時間でパッと表示することができる仕組み」のことです。
非常に便利な機能ではありますが、CSSを編集しても反映されない場合は、ブラウザがこのキャッシュ（編集前のデータ）を表示している可能性があります。
キャッシュをクリアする方法（Google Chromeの場合）
ここでは2つの方法をご紹介します。
ショートカットキーでのスーパーリロード
// Macの場合
Cmd + Shift + R
// Windowsの場合
Shift + F5
ブラウザの「設定」からキャッシュをクリアする
- Google Chromeの右上のアイコン（家の形）を選択。
- 出てきた選択項目の中から「設定」を選択。
- 設定画面が別タブででてくるので、その中から「プライバシーとセキュリティ」を探す
- 「閲覧履歴データの削除」を選択。
- 「キャッシュされた画像とファイル」にチェックが入った状態で「データを削除」を選択（他のチェック項目は任意で選択ください）
※2020/6/26時点での方法です。バージョンアップにより手順は変更される可能性があります。
まとめ
うまく効かない場合、必ずどこかに原因があります。
そういう場合は上記の方法を１つずつ試してみましょう。
かずきち
プログラミング学習サイト「ウェブカツ!!」の顧問。
不動産、保険の営業マンから、エンジニアへ転身。
「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。
独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。
【ウェブカツ公式WEBサイト】
https://webukatu.com/