CSSが効かない！？確認すべきポイント3つを解説！ byウェブカツ

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を当てたい場合

正しい書き方

p span {
   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です。

1. 「最後に書いたもの」が優先される
2. 「要素型セレクタ」＜「classセレクタ 」＜「idセレクタ」　の順に優先される
3. 「!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:1px solid #cccccc;
}

class名で指定したclassセレクタ。こちらは反映されない。

.sample {
   background-color:red;
   border:2px solid #333333;
}

※他にも「擬似要素」「擬似クラス」といったものもあり、計算式はさらに複雑になりますが、学習初期段階では、冒頭でお伝えしたように、「要素型セレクタ」＜「classセレクタ 」＜「idセレクタ」を覚えておいて、後は徐々に知識をつけていければOKです。

「!important」が最優先される

id = "demo" と　class="sample"　がついているdivタグにCSSを当てたい場合

divタグで指定した要素型セレクタ。「!important」があるので優先される。

div {
   background-color:black !important;
   border:3px dotted #666666 !important;
}

id名で指定したidセレクタ。こちらは反映されない。

#demo {
   background-color:green;
   border:1px solid #cccccc;
}

class名で指定したclassセレクタ。こちらも反映されない。

.sample {
   background-color:red;
   border:2px solid #333333;
}

※「!important」は便利ではありますが、多用すると保守性が悪くなるため、極力使用しないことをオススメいたします。

キャッシュが残っている

意外とこれもよくある。キャッシュをクリアすればOK。

キャッシュとは？

キャッシュとは「1度開いたWEBページのデータをブラウザに保存しておくことで、次回同じページを開くときに短時間でパッと表示することができる仕組み」のことです。
非常に便利な機能ではありますが、CSSを編集しても反映されない場合は、ブラウザがこのキャッシュ（編集前のデータ）を表示している可能性があります。

キャッシュをクリアする方法（Google Chromeの場合）

ここでは2つの方法をご紹介します。

ショートカットキーでのスーパーリロード

// Macの場合
Cmd + Shift + R

// Windowsの場合
Shift + F5

ブラウザの「設定」からキャッシュをクリアする

1. Google Chromeの右上のアイコン（家の形）を選択。
2. 出てきた選択項目の中から「設定」を選択。
3. 設定画面が別タブででてくるので、その中から「プライバシーとセキュリティ」を探す
4. 「閲覧履歴データの削除」を選択。
5. 「キャッシュされた画像とファイル」にチェックが入った状態で「データを削除」を選択（他のチェック項目は任意で選択ください）  

※2020/6/26時点での方法です。バージョンアップにより手順は変更される可能性があります。

 

まとめ

うまく効かない場合、必ずどこかに原因があります。
そういう場合は上記の方法を１つずつ試してみましょう。

---

かずきち

プログラミング学習サイト「ウェブカツ!!」の顧問。
不動産、保険の営業マンから、エンジニアへ転身。
「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。
独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。

【ウェブカツ公式WEBサイト】
https://webukatu.com/