すべてのブログから「#CSSが効かない」タグの検索結果

CSSを書いたのに、「あれ？全然変わらない…」Web制作をしていると、こんなことがよくあります。コードは合っているように見えるのに反映されないと、どこを直せばいいのか分からなくなりますよね。今回は、CSSが効かないときに私が確認しているポイントを5つまとめてみます。① スペルミスがないか確認するまず確認したいのが、意外と多い単純な入力ミス。.title {  backgroud-color: green;}これではbackgroundの「n」が抜けているので反映されません。プロパティ名だけでなく、;を忘れていないか{ }が閉じているかクラス名が間違っていないかなども確認します。「絶対合ってる！」と思っているときほど、単純なミスだったりします② HTMLとCSSのクラス名は同じ？HTMLでは、<div class="staff-card">なのにCSSでは、.staff_card {  padding: 20px;}となっていれば、もちろんCSSは効きません。-と_の違い、大文字・小文字なども要チェックです。CSSだけを見るのではなく、HTML側のクラス名と見比べてみます。③ 他のCSSに負けていない？CSSには優先順位があります。例えば、.card {  color: green;}#staff .card {  color: black;}この場合、より詳細に指定されている#staff .cardの方が優先されます。「CSSは書いてあるのに色が変わらない！」というときは、別のCSSで上書きされていないか確認してみます。Chromeの検証ツールを見ると、どのCSSが