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

HTML・CSSを学習し始めであれば、**「なぜかCSSがうまく効かない！」**と、困ってしまうことがあるはず。
そこで**「CSSが効かない場合のよくある原因と確認すべきポイント3つ」**をまとめてみました。

# CSSが効かないよくある原因
「書き方が間違っている」「優先順位」「キャッシュ」の３パターンのどれかであることが多い。

## 書き方ルールの間違い
正しいルールで記述ができていないパターンです。

### コメントアウトが間違っている
CSSでコメントアウトするには「/\*〜\*/」の記号を使います。


通常の書き方。

```CSS
p {
   color : blue;
}
```
「/\*」と「*/」で囲っている箇所がコメントアウトされる。
「color:red;」は反映されない。

```CSS
/* p {
   color : red;
} */
```
ここでのよくある間違いとしては

> **・HTMLのコメントアウトの「<!--&nbsp; -->」記号を使っていないか**
> **・囲み始めを忘れている（「/*」の記号忘れ）**
> **・囲み閉じを忘れている（「*/」の記号忘れ）**

といったことが考えられるので、再度チェックしてみましょう。

### 「;（セミコロン）」が抜けている

正しい書き方。

```CSS
p {
   color : blue; /* ←「;」で閉じられている。*/
   font-size:20px;
}
```
間違った書き方。

```CSS
p {
   color : blue  /* ←「;」がない。 */
   font-size:20px　/* ←ちなみに最後は「;」がなくても反映される。 */
}
```

### 「{}」が間違っている

正しい書き方。プロパティが「{」「}」で正しく囲まれている

```CSS
p {
   color : blue; 
   font-size:20px;
}
```
間違った書き方。 最初の「{」が抜けていて反映されない。

```CSS
p     /* ←「{」が抜けている。 */
   color : blue;
   font-size:20px;
}
```

### 文法が間違っている

#### class="sample"　がついているpタグにCSSを当てたい場合
正しい書き方

```CSS
.sample {
   color:blue;
   font-size:20px;
}
```
間違った書き方（class名の前の「.」が抜けている）

```CSS
sample {
   color:blue;
   font-size:20px;
}
```


#### pタグの中のspanタグにCSSを当てたい場合
正しい書き方

```CSS
p span {
   color:blue;
   font-size:20px;
}
```
間違った書き方（「p」と「span」の間が"全角"スペースになっている）

```CSS
p　span {
   color:blue;
   font-size:20px;
}
```


### タイポ（スペル間違い）
※スペルミスのことを「タイポ」と呼ぶことが多いです。
（「誤植」を意味する「typographical error」から来ているそうです）

正しい書き方

```CSS
div {
   margin:20px;
}
```
間違った書き方（「margin」の「i」が抜けている。）

```CSS
div {
   margn:20px;
}
```

## 優先順位が低くなっている
優先順位が気づかず下がってしまってるパターンです。

### 優先順位とは？
CSSの記述が複雑になっていくと、1つの要素に対して複数のセレクタ、プロパティを記載してしまうことがあります。
その場合、「どちらを優先するのか」のルールが明確に決められているのです。


### 優先順位について
非常に複雑な計算で決まるのですが、最初はひとまず3つのルールを覚えればOKです。

1.  **「最後に書いたもの」が優先される**
2.  **「要素型セレクタ」**＜**「classセレクタ**&nbsp;」＜**「idセレクタ」　の順に優先される**
3.  **「!important」が最優先される**

※3→2→1の順番で優先度が高い。


#### **「最後に書いたもの」が優先される**

##### 同じセレクタ内に同じプロパティが複数記載されている場合

```CSS
p {
   color:red;
   color:yellow;
   color:blue;  /* ←最後に書いたこちらが優先される。 */
}
```
複数のセレクタに同じプロパティが記載されている場合

```CSS
p {
   color:red;
}

p {
   color:blue;  /* ←最後に書いたこちらが優先される。*/
}
```
#### **「要素型セレクタ」**＜**「classセレクタ**&nbsp;」＜**「idセレクタ」　の順に優先される**
さきほどの「最後に書いたもの」よりも、こちらのルールが優先されます。


##### class="sample"　がついているpタグにCSSを当てたい場合
class名で指定したclassセレクタ。こちらが反映される

```CSS
.sample {
   color:blue;
   font-size:20px;
}
```
要素名で指定した要素型セレクタ。こちらは反映されない。

```CSS
p {
   color:blue;
   font-size:20px;
}
```


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

id名で指定したidセレクタ。こちらが反映される

```CSS
#demo {
   background-color:green;
   border:1px solid #cccccc;
}
```
class名で指定したclassセレクタ。こちらは反映されない。

```CSS
.sample {
   background-color:red;
   border:2px solid #333333;
}
```
※他にも「擬似要素」「擬似クラス」といったものもあり、計算式はさらに複雑になりますが、学習初期段階では、冒頭でお伝えしたように、**「要素型セレクタ」＜「classセレクタ&nbsp;」＜「idセレクタ」**を覚えておいて、後は徐々に知識をつけていければOKです。


#### **「!important」が最優先される**


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

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

```CSS
div {
   background-color:black !important;
   border:3px dotted #666666 !important;
}
```
id名で指定したidセレクタ。こちらは反映されない。

```CSS
#demo {
   background-color:green;
   border:1px solid #cccccc;
}
```
class名で指定したclassセレクタ。こちらも反映されない。

```CSS
.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.  「キャッシュされた画像とファイル」にチェックが入った状態で「データを削除」を選択（他のチェック項目は任意で選択ください）
&nbsp;

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

&nbsp;

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

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

【ウェブカツ公式WEBサイト】
[https://webukatu.com/](https://webukatu.com/?utm_source=blog&utm_medium=bl02&utm_campaign=blog_pr)