こんにちは、makeshopの近藤です。
いつもmakeshopをご利用いただきありがとうございます。

今回はCSSの指定が効かない場合に考えられる原因、および解決法をご紹介いたします！

こんなお悩みありませんか？

・見よう見真似でCSSを書いてみたけど効いてないかも？
・CSSが読み込まれていない

CSSが効かない場合に考えられる原因6つ

その1 コメントアウトの位置が違う！

複数行コメントアウト（/* ここにコメント */）で囲んだ時にやりがちな間違いです。
今一度コメントアウトの位置を確認してみましょう！

その2 全角スペースを使っている！

CSS内で全角スペースの記述はNGです。
使っている部分はないかファイル内検索で調べてみましょう！

その3 セミコロンが抜けている！

下記のようにセミコロン（;）が抜けるとエラーになってしまい、指定が読み込まれません。

#sample {
  margin: 90px  /* ←セミコロン抜け */
  width: 350px;
}

見落としやすい部分なので再確認してみましょう！

その4 カッコ{}が多い！少ない！

下記のようにカッコ{}が多くても少なくてもエラーになってしまい、指定が読み込まれません！

▼{}が多いパターン

#sample {
  margin: 90px;
  width: 350px;
}} /* ←カッコが多い */

▼{}が少ないパターン

#sample  /* ←カッコが少ない（抜けている） */
  margin: 90px;
  width: 350px;
}

こちらも見落としやすい部分なので再確認してみましょう！

その5 HTMLのコメントアウト<!–– ––>が使用されている！

コメントアウトには種類があり、CSS内で使えるコメントアウトは /* ここにコメント */ のみとなります。
ごっちゃになりやすいですが注意して使用しましょう！

その6 CSSの指定がかぶっている！

指定されたCSSの要素がかぶっている場合、決まっている優先度に従いCSSが解釈されます。
基本的にCSSやHTMLはブラウザが上から順番に読み込んでいくので、指定がかぶっている場合は下部に記述されているものにどんどんスタイルが上書きされていく特徴があります。（上部のスタイルが打ち消されます）
しかし、要素を組み合わせることでこの特徴が適用されない場合もあります。

よくある上書きパターンを何個か例としてあげてみます。

上書きされるパターンその1

全く同じ要素を誤って二箇所に書いてしまっていたパターン。
前述のとおりブラウザは上から順番にスタイルを読み込むので、上部で指定しても思い通りにスタイルが効かない場合があります。

#sample {
  margin: 90px;
  width: 350px;
}
#sample {
  margin: 100px;
  width: 400px;
}

処理結果：margin 100px、width 400px
余分なスタイルの指定を削除し、正しく指定できるように変更しましょう！

上書きされるパターンその2

styleタグを使いHTMLに直書きしているパターン。
HTMLへの直書きはCSSを読み込むよりも優先度が高いので、CSSをいくら更新してもスタイルが打ち消されてしまします。

▼HTML

<div id="sample" style="margin: 90px; width: 350px;">
  さんぷる
</div>

▼CSS

#sample {
  margin: 100px;
  width: 400px;
}

処理結果：margin 90px、width 350px
直書きのstyleを削除し、CSSで指定し直しましょう！

上書きされるパターンその3

他の指定箇所で詳細に場所が指定されているパターン。
CSSは場所を詳細に記載する事で、より優先度が高い指定になります。

#wrapper div#sample {
  margin: 90px;
  width: 350px;
}
#sample {
  margin: 100px;
  width: 400px;
}

処理結果：margin 90px、width 350px
詳細に書かれている指定箇所にスタイルの指定を追記するか、詳細に書くのを辞めて統合しましょう！

注意して見てみてください！

CSSの優先順位については、関連記事：【初めてのHTML/CSS】CSS（スタイルシート）の優先順位を覚えておこう！をご参考ください。

いかがでしたでしょうか。
ぜひご確認ください！それではまた！