2023.04.14今回の記事では、現役WEBデザイナー兼コーダーの筆者が、CSSがなぜか効かない理由と対処法について解説していきます。「何が原因なのか特定が難しい」など、お悩みの方にご覧いただきたい内容となります。筆者の経験上、CSSが効かない理由はある程度パターン化されています。それでは、順番に見ていきましょう。・CSSファイルが読み込まれていない・全角スペースを使っている・コピーミスやスペルミス・セミコロン(;)が抜けている・優先順位で負けている・!importantが邪魔をしている・リセットCSSが邪魔をしている・キャッシュが邪魔をしているCSSファイルが読み込まれていないCSSファイルがしっかりと読み込まれているか確認をしてみてください。上記の画像のように、読み込ませるCSSファイルがどの階層にあるかによって読み込ませ方が変わってきます。読み込ませるCSSファイルのパスの階層が間違っていると、CSSが効かないのでご注意ください。全角スペースを使っているCSS内で、全角スペースが使われている場合、CSSが効かない原因にもなります。CSSを編集する時は、半角を使うようにしましょう。コピーミスやスペルミスとても単純ですが、意外と多いです。指定したid名やclass名が、完全に一致しているか確認してみてください。class="text">晴れです。red;}コピーミスをして尻切れしていたり、単純にスペルミスをしていたり。伝える必要があります。セミコロン(;)が抜けている下記のようにセミコロン(;)が抜けていると、CSSは反映されません。*/}意外と見落とす部分なのでご注意ください。優先順位で負けているCSSには、「一番最後(下)に書いたものが優先される」という大前提の考え方に加えて、他にも細かな優先度のルールが存在します。!importantstyle属性で指定したCSSstyleタグで指定したCSSidセレクタクラス、属性セレクタ要素セレクタ簡単に書くとこのようなルールに沿ってCSSが適用されていきます。CSSの指定が効かない場合は、この優先度を確認してみてください。!importantが邪魔をしている1つ前でも軽く触れていますが、「!important」が指定されている部分は最強となり、どんな指定にも負けなくなります。red;}何をやってもCSSが効かない場合は、上記のような指定がないか確認してみてください。リセットCSSが邪魔をしているリセットCSSは、ブラウザのデフォルトのCSSを打ち消してくれるものですが、読み込ませる順番にご注意ください。--></head>上記の場合だと、自分で書いたCSSまで、リセットCSSが打ち消してしまうという事になります。リセットCSSは、必ず自作のCSSファイルの前に書くようにしてください。キャッシュが邪魔をしているキャッシュとは、訪問した「ウェブページの情報」を一時的に保存する仕組み(またはその一時的なデータそのもの)の事です。キャッシュデータ(更新前のページ)を表示し続ける場合があります。キャッシュを削除するには、スーパーリロードをお試しください。まとめ筆者は、2023年現在、約2年半ほどWEBデザイナー兼コーダーとして勤務していますが、CSSが効かない場合は、今回ご紹介した内容で、全て解決できています。CSSが効かなくてお悩みの方は、今回ご紹介した方法を、上から順番に確認してみてください。2023.05.13CSSCSS【CSS】基本的な書き方について。2023.05.13CSS【闇バイト】どんな仕事内容があるのか?探し方、処罰についても徹底解説!【プログラミング】なぜ9割の人が挫折するのか?原因や対策方法をご紹介!ホームWEB制作CSSkazu27歳、法学部出身の現役WEBデザイナーです。資格は、WEBデザイン技能検定3級、ワープロ検定2級、情報処理検定2級を取得しています。旅行が好きで色々な場所に行っています。このブログでは、IT企業の現場で経験した事や勉強した事、解説記事や副業等、ITならではの、ちょっと知ってるだけでも違うアレコレをご紹介しています。【HTML】brタグの使い方のご紹介!改行されない(効かない)場合の対処法もご紹介!サンプル付き!2023.02.192023.05.13【2023年最新】Googleアドセンスの審査に通らない!合格する為のポイントをまとめてみた。2023.01.232023.05.28【悪用】AirTag(エアタグ)に注意!ストーカー、車に設置され住所特定も?対策方法を考えてみた。副業系ホーム検索トップサイドバータイトルとURLをコピーしました。