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

スポンサーリンク
CSS
この記事は約3分で読めます。
スポンサーリンク
こんにちは、widenのUNOです。 CSSが全然効かないってことおりますよね。 今回は、CSSが効かない原因と対処法をご紹介致します。
スポンサーリンク

この記事を書いた人

UNO
ウェブサイト制作と投資を愛するブロガー
【経歴】
・東京在住
・外資系企業就職
・自粛期間に複業スタート
・2021年2月から本格的にブログ開始
・半年で月間2万PV達成
・1年で月間5万PV達成
・2023年月間6.7万PV達成


CSSが効かない原因

ミスコードによる原因

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

HTML上ミス

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

CSS内で全角スペースを使ってる

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

CSS内の記述が間違っている

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

CSSの優先順位による問題

CSSの基本的な優先順位

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

CSSの指定による優先順位

CSSにはスタイルを指定する方法がいくつかあります。 具体的な指定方法と優先度はこのような関係となっており、 上から順番に優先度が高くなっています。
優先度セレクタ種類コード例
1HTMLの要素に直接CSSを記載[HTML] <div style=”width: 100px; height: 100px;”></div>
2HTMLの要素を特定したid指定[HTML] <div id=”sample”><div>[CSS]div#sample{background: red;}
3id指定[HTML] <div id=”sample”><div>[CSS]#sample{background: green;}
4HTML要素を特定したclass指定[HTML] <div class=”sample”><div>[CSS]div.sample{background: black;}
5class指定[HTML] <div class=”sample”><div>[CSS].sample{background: green;}
6タイプ指定[HTML] <div><div>[CSS]div{background: green;}

どうしても効かない最終手段

どうしてもCSSが効かない、原因がわからない方は最終手段があります。 それは !important; を使うこと!
[CSS]div{background: green !important;}
これを利用すると優先順位など関係なしにスタイルが適応されます。 是非参考にしてみてください。
タイトルとURLをコピーしました