CSSが効かない！ときに確認すること
HTMLを書いて、CSSもちゃんと書いた。
なのに、
「あれ？CSSが効かない……」
Web制作を始めたばかりの頃は、かなりよくあるトラブルです。
でも、CSSそのものが間違っているとは限りません。
実際には、CSSファイルが読み込まれていない・セレクタが合っていない・別のCSSに上書きされているなど、原因はいくつかあります。
今回は、CSSが効かないときに確認したいポイントを、初心者でもチェックしやすい順番でまとめます。
① CSSファイルがちゃんと読み込まれている？
まず確認したいのが、CSSファイル自体がHTMLに読み込まれているかです。
HTMLの<head>内に、CSSを読み込む記述があるか確認します。
<link rel=”stylesheet” href=”css/style.css”>
ここでよくあるのが、ファイルのパスが間違っているケースです。
例えば、
index.html
css/
└ style.css
という構成なら、
<link rel=”stylesheet” href=”css/style.css”>
でOKです。
一方で、CSSファイルがHTMLと同じ階層なら、
<link rel=”stylesheet” href=”style.css”>
になります。
チェックすること
- CSSファイルの名前は合っている？
- フォルダ名は合っている？
- css/style.cssなどのパスは正しい？
- ファイルの拡張子は.cssになっている？
「CSSを書いたのに何も変わらない」なら、まずここを疑います。
② class名・id名がHTMLと一致している？
次に確認したいのが、HTMLとCSSの指定が一致しているかです。
HTMLが、
<p class=”text”>こんにちは</p>
なら、CSSは、
.text {
color: red;
}
です。
例えば、
.txt {
color: red;
}
としていたら、HTMLのtextとCSSのtxtが違うので効きません。
たった1文字の違いでも、CSSは容赦なく効きません。
よくあるミス
<div class=”content”></div>
.contents {
color: red;
}
contentとcontentsで違っています。
「合っているはず」と思わず、HTMLとCSSを見比べるのがポイントです。
③ セレクタの書き方は合っている？
classには.、idには#を付けます。
.text {
color: red;
}
#text {
color: red;
}
HTMLが、
<p class=”text”>こんにちは</p>
なのに、
#text {
color: red;
}
としていたら効きません。
覚えておきたい基本
HTMLCSSclass=”text”.textid=”text”#text
ここも初心者がつまずきやすいポイントです。
④ CSSの記述ミスがない？
CSSの記述そのものにミスがないかも確認します。
例えば、
.text {
color: red
font-size: 20px;
}
colorの後ろに;がありません。
正しくは、
.text {
color: red;
font-size: 20px;
}
です。
また、{や}の閉じ忘れも要注意。
.text {
color: red;
.title {
font-size: 24px;
}
このような状態だと、後ろのCSSまで正しく解釈されないことがあります。
VS Codeを使っているなら、コードの色やエラー表示もチェックしてみましょう。
⑤ CSSが別のCSSに上書きされていない？
「CSSは合っているのに効かない」というときに、かなり重要なのがこれ。
別のCSSに上書きされているケースです。
例えば、
.text {
color: red;
}
と書いているのに、別の場所で、
.text {
color: blue;
}
と指定されていたら、どちらが適用されるかを確認する必要があります。
特に、
- より詳細度の高いセレクタ
- 後から記述されたCSS
- !important
などが関係すると、思ったCSSが適用されないことがあります。
⑥ DevToolsで「どのCSSが効いているか」を確認する
ここまで確認しても原因が分からない場合は、ブラウザのDevToolsを使うのがおすすめです。
Chromeなら、対象の要素を右クリックして、
「検証」
を選択します。
すると、HTMLとCSSを確認できます。
例えば、
.text {
color: red;
}
と書いているのに、DevToolsを見ると、
.text {
color: blue;
}
に打ち消し線が入っていることがあります。
これは、
「このCSSは書かれているけど、別のCSSが優先されている」
ということ。
CSSが効かないときは、**「書いたCSSを見る」だけではなく「ブラウザで実際に何が適用されているかを見る」**のがポイントです。
⑦ 「効いていない」のではなく、変化が分かりにくいだけかも
意外とあるのがこれ。
CSSはちゃんと効いているけれど、見た目の変化が分かりにくいケースです。
例えば、
margin-top: 20px;
を指定しても、周囲の要素との関係によっては変化に気づきにくいことがあります。
そんなときは、一時的に背景色や枠線を付けてみるのがおすすめです。
.text {
background: yellow;
outline: 1px solid red;
}
これで、
「そもそもこの要素が選択されているのか？」
を確認できます。
CSSが効かないときの確認順
原因を探すときは、闇雲にCSSを書き換えるより、上から順番に確認すると効率的です。
まずはこの順番
- CSSファイルが読み込まれている？
- CSSファイルのパスは合っている？
- class名・id名はHTMLと一致している？
- セレクタの書き方は合っている？
- CSSの記述ミスはない？
- 別のCSSに上書きされていない？
- DevToolsで実際に適用されているCSSを確認する
- そもそも変化が分かりにくいだけではない？
「とりあえずCSSを書き直す」は遠回り
CSSが効かないと、つい
「ここかな？」
「いや、こっちかな？」
とCSSをどんどん書き換えたくなります。
でも、それをやると原因が分からないままコードだけが複雑になることがあります。
CSSが効かないときこそ、
「なぜ効かないのか？」を1つずつ確認する
ことが大切です。
特にWeb制作を始めたばかりなら、DevToolsを見る習慣をつけておくと、今後かなり役立ちます。
「CSSが効かない＝CSSの書き方が間違っている」
とは限りません。
まずは、
- 「そもそも読み込まれている？」
- 「その要素に適用されている？」
- 「他のCSSに負けていない？」
この3つを疑ってみてください。
CSSのトラブルは、原因が分かると意外とあっさり解決できます。
