今回の記事では、現役WEBデザイナー兼コーダーの筆者が、CSSがなぜか効かない理由と対処法について解説していきます。
「なぜか書いたCSSが上手く効かなくて困っている」
「何が原因なのか特定が難しい」
など、お悩みの方にご覧いただきたい内容となります。
目次
CSSが効かない時に考えられる理由と対処法
筆者の経験上、CSSが効かない理由はある程度パターン化されています。それでは、順番に見ていきましょう。
・CSSファイルが読み込まれていない
・全角スペースを使っている
・コピーミスやスペルミス
・セミコロン（;）が抜けている
・優先順位で負けている
・!importantが邪魔をしている
・リセットCSSが邪魔をしている
・キャッシュが邪魔をしている
CSSファイルが読み込まれていない
CSSファイルがしっかりと読み込まれているか確認をしてみてください。
上記の画像のように、読み込ませるCSSファイルがどの階層にあるかによって読み込ませ方が変わってきます。
読み込ませるCSSファイルのパスの階層が間違っていると、CSSが効かないのでご注意ください。
全角スペースを使っている
CSS内で、全角スペースが使われている場合、CSSが効かない原因にもなります。
CSSを編集する時は、半角を使うようにしましょう。
コピーミスやスペルミス
とても単純ですが、意外と多いです。
指定したid名やclass名が、完全に一致しているか確認してみてください。
<h1 id="midasi">今日の天気</h1>
<p class="text">晴れです。<p>/*「midasi」と指定したが、「i」の部分がコピーミスで尻切れしている*/
#midas {
font-size: 25px;
}
/*「text」と指定したが、スペルミスしている */
.tect {
color: red;
}コピーミスをして尻切れしていたり、単純にスペルミスをしていたり。
コンピュータは、融通が効かないので、一文字一文字正確に伝える必要があります。
セミコロン（;）が抜けている
下記のようにセミコロン（;）が抜けていると、CSSは反映されません。
.text {
font-size: 20px;
color: red /* ←セミコロンが抜けている */
}意外と見落とす部分なのでご注意ください。
優先順位で負けている
CSSには、「一番最後（下）に書いたものが優先される」という大前提の考え方に加えて、他にも細かな優先度のルールが存在します。
- !important
- style属性で指定したCSS
- styleタグで指定したCSS
- idセレクタ
- クラス、属性セレクタ
- 要素セレクタ
簡単に書くとこのようなルールに沿ってCSSが適用されていきます。
CSSの指定が効かない場合は、この優先度を確認してみてください。
!importantが邪魔をしている
1つ前でも軽く触れていますが、「!important」が指定されている部分は最強となり、どんな指定にも負けなくなります。
.text {
font-size: 20px !important; /* ←最強の指定*/
color: red;
}何をやってもCSSが効かない場合は、上記のような指定がないか確認してみてください。
リセットCSSが邪魔をしている
リセットCSSは、ブラウザのデフォルトのCSSを打ち消してくれるものですが、読み込ませる順番にご注意ください。
<head>
<meta charset="utf-8">
<title>練習用ページ</title>
<link rel="stylesheet" href="style.css"> <!-- ←自作のCSSが先に書いてある -->
<link rel="stylesheet" href="reset.css"> <!-- ←リセットCSSが後に書いてある -->
</head>上記の場合だと、自分で書いたCSSまで、リセットCSSが打ち消してしまうという事になります。
リセットCSSは、必ず自作のCSSファイルの前に書くようにしてください。
キャッシュが邪魔をしている
キャッシュとは、訪問した「ウェブページの情報」を一時的に保存する仕組み（またはその一時的なデータそのもの）の事です。
よく訪問するページの表示スピードが上がるというメリットがありますが、キャッシュデータはキャッシュした時点の情報のため、ウェブページの更新があってもその内容が反映されず、 キャッシュデータ（更新前のページ）を表示し続ける場合があります。
キャッシュを削除するには、スーパーリロードをお試しください。
環境により異なる場合もありますが、Windowsの場合「Shift + F5」、Macの場合「Cmd + Shift + R」で解決できます。
まとめ
筆者は、2023年現在、約2年半ほどWEBデザイナー兼コーダーとして勤務していますが、CSSが効かない場合は、今回ご紹介した内容で、全て解決できています。
CSSが効かなくてお悩みの方は、今回ご紹介した方法を、上から順番に確認してみてください。
コメント