CSSが効かない原因と対処法

こんにちは、widenのUNOです。 CSSが全然効かないってことおりますよね。今回は、CSSが効かない原因と対処法をご紹介致します。

CSSが効かない原因

正しくないコードを書いた事による原因を挙げていきます。

HTML上でのCSSの指定方法やclass名が間違っている場合は、正しく動作しません。 class名や指定方法が間違っていないかもう一度確認してみて下さい。

CSS内では全角スペースを使用することができないため、エラーとなってしまいます。検索機能や置換機能を用いて確認してみてください。

セミコロン ; のつけ忘れやカーリーブラケット {} の付け忘れなどがある場合は正しく動作しません。また、余分に付けてしまっていることも原因として考えられます。

CSSの基本的な優先順位は、下に書いたものから優先的に適応されます。ブラウザはHTMLやCSSを上から順番に読み込むため、後から読み込んだCSSを最優先して適用させる特徴があります。

CSSにはスタイルを指定する方法がいくつかあります。具体的な指定方法と優先度はこのような関係となっており、上から順番に優先度が高くなっています。

優先度	セレクタ種類	コード例
1	HTMLの要素に直接CSSを記載	[HTML] <div style=”width: 100px; height: 100px;”></div>
2	HTMLの要素を特定したid指定	[HTML] <div id=”sample”><div>[CSS]div#sample{background: red;}
3	id指定	[HTML] <div id=”sample”><div>[CSS]#sample{background: green;}
4	HTML要素を特定したclass指定	[HTML] <div class=”sample”><div>[CSS]div.sample{background: black;}
5	class指定	[HTML] <div class=”sample”><div>[CSS].sample{background: green;}
6	タイプ指定	[HTML] <div><div>[CSS]div{background: green;}