CSSが効かない！？確認すべきポイント3つを解説！

HTMLを学習し始めた方は、CSSにも挑戦されているかと思います。

文字の色や大きさを変えたり、レイアウトを変えたりと

いろんなことが操作できる感覚に楽しさを感じる方もいらっしゃると思います。

ですが、調べた内容で書いているはずなのに、

「なぜかCSSがうまく効かない！」と、困ってしまうことがありませんか？

そこで今回はCSSが効かない場合について、

・よくある原因と確認すべきポイント3つ

をご紹介します。

・コピペも試したのにうまく反映されない！
・CSSが一部しか反映されない！

とお困りの方は、ぜひ参考にしてみてください。

目次 [非表示]

1 CSSが効かないよくある原因
2 まとめ

CSSが効かないよくある原因

書き方ルールの間違い

正しいルールで記述ができていないと上手く反映されません。

よくある書き間違いについて見ていきましょう！

コメントアウトが間違っている

CSSでコメントアウトするには「/〜/」の記号を使います。

//通常の書き方。
p {
   color : blue;
}


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

//通常の書き方。

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　//←最後は「;」がなくても反映される。

}

「{}」が間違っている

//正しい書き方。（プロパティが「{」「}」で正しく囲まれている）
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;
}

// 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;
}

// 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;
}

//正しい書き方

div {

margin:20px;

}

// 間違った書き方（「margin」の「i」が抜けている。）

div {

margn:20px;

}

優先順位が低くなっている

優先順位とは？

CSSの記述が少しずつ複雑になっていくと、1つの要素に対して

複数のセレクタ、プロパティを記載してしまうことがあります。

その場合、「どちらを優先するのか」のルールが明確に決められているのです。

優先順位について

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

「最後に書いたもの」が優先される
「要素型セレクタ」＜「classセレクタ 」＜「idセレクタ」　の順に優先される
「!important」が最優先される

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

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

//複数のセレクタに同じプロパティが記載されている場合
p {
   color:red;
}

p {
   color:blue;  //←最後に書いたこちらが優先される。
}

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

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;
}

// 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;
}

// 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;
}

// 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」は便利ではありますが、多用すると保守性が悪くなるため、極力使用しないことをオススメいたします。

キャッシュが残っている

キャッシュとは？

キャッシュとは「1度開いたWEBページのデータをブラウザに保存しておくことで、次回同じページを開くときに短時間でパッと表示することができる仕組み」のことです。

非常に便利な機能ではありますが、CSSを編集しても反映されない場合は、

ブラウザがこのキャッシュ（編集前のデータ）を表示している可能性があります。

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

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

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

// Macの場合
Cmd + Shift + R

// Windowsの場合
Shift + F5

// Macの場合

Cmd + Shift + R

// Windowsの場合

Shift + F5

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

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

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

まとめ

以上、CSSが効かない場合のポイントとして

・よくある原因と確認すべきポイント3つ

をご紹介しました。

うまく効かない場合、必ずどこかに原因があります。

プログラミング学習を始めたばかりでCSSでお困りの方は、ぜひ参考にしてみてください。

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。