Help us understand the problem. What is going on with this article?

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

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

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

「書き方が間違っている」「優先順位」「キャッシュ」の3パターンのどれかであることが多い。

書き方ルールの間違い

正しいルールで記述ができていないパターンです。

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

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時点での方法です。バージョンアップにより手順は変更される可能性があります。

 

まとめ

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


かずきち

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

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

kazukichi
元競売屋と保険営業のエンジニア。 TwitterでNo1人気のWEBプログラミング学習サービス『ウェブカツ!!』や、WordPressテンプレ販売『CRAZY WP』など多数運営。 http://webukatu.com/ http://crazy-wp.com/
https://webukatu.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした