【爆速バグ修正】CSSが効かない時の対処法完全版！【フローチャート付き！】

Web制作を学習中のみなさんこんにちは！

HTMLやCSSを書いていて、「CSSが効かない！」「文字色が変わらない…」「背景画像が表示されない…」なんて困ったことはありませんか？

せっかく頑張って書いたCSSが反映されないと焦りますよね。でも安心してください。CSSが効かない原因にはパターンがあるので、1つ1つ確認していけば必ず解決できます！

この記事では、CSSが反映されない時の原因とその解決方法を初心者にもわかりやすく解説します。これを読めば「エラーで2時間も悩んだ…」なんてこととお別れできるはずです！

CSSトラブルをサクッと解決して、案件処理がスピーディーに進められるようになりましょう。時間短縮はそのまま「時給アップ」にもつながります！エラー対処は学ぶ価値ありですよ！

バグ修正だけじゃなくコーディングそのものを爆速にして利益を上げたい人のための本を購入するにはこちら！

【脱・初心者&利益倍増】ツールを駆使して爆速コーダーになるためのパーフェクトガイドブック - セカヤサBooks

この本ではコーディングの速度について考えていこうと思います。Web制作、ことHTML/CSSのコーディングを仕事にする上でそのスピードは必ず問われます。同じクオリティなら早い方がいいですからね（どんな仕事もそうですが）。しかしコーディング領...

フローチャート
デベロッパーツールで状況を確認する
CSSが見当たらなかった場合
CSSはある場合
CSSトラブルを解決してコーディングスピードを爆上げ！

フローチャート

詳細は本記事で解説しますが、CSSが効かなかった時のフローチャートです！ダウンロードしていつでも使えるようにするのがおすすめ！

デベロッパーツールで状況を確認する

CSSが効かない時、まずは「デベロッパーツール（検証ツール、開発者ツールとも）」を使ってみましょう！
これはブラウザに用意されたデバッグ用のツールで、HTMLやCSSの状態を詳しく確認することができます。

デベロッパーツールを使うと次のようなことが簡単にわかります！

CSSが正しく適用されているかどうか
CSSにエラーがある場合、その原因が表示される
スタイルが上書きされている場合、その競合状態を確認できる

開き方は以下の2通り！

ショートカットキーで開く
- Mac：「Command」 + 「Shift」 +「C」
- Windows：「Ctrl」+「Shift」+「I」
画面上部のメニューから選ぶ（右クリックから選択できる場合もあります）
- Google Chrome：「表示」→「開発 / 管理」→「要素の検証」
- Microsoft Edge：「ツール」→「開発者」→「要素の検査」
- Firefox：「ツール」→「ブラウザーツール」→「ウェブ開発ツール」
- Safari：「開発」→「Webインスペクタを表示」

デベロッパーツールを開くと次のように、画面表示部分、HTML部分、CSS部分が出てきますね💻

状態を知りたいHTML要素を選択して、CSS部分を見てみます。そうすると適用されているCSSの内容とそれが書かれている場所（ファイル名：行数）が表示されます。

もしCSSに問題があるとこうやって分かりやすく表示されます！これはありがたいですね！

表示がされていればすぐに修正方法が分かるんですが、「そもそもCSSが表示されてない！」なんてことも…

次の章からは表示が見つからなかった場合と見つかった場合に分けて解説していきます！

CSSが見当たらなかった場合

デベロッパーツールでHTML要素を選んでもCSSが表示されない場合は、CSSファイルが正しく読み込まれていない可能性があります！

次の4つのポイントを確認してみましょう！

対策1：headタグ内のlinkタグが間違っていないか確認する

最初にlinkタグの読み込みが間違っていないかを確認しましょう！コードを確認して、パスの書き方やファイル名が間違っていないかを確認してください。

<head>
  <!-- HTMLファイルと同じ場所にstyle.cssがある場合 -->
  <link rel="stylesheet" href="./style.css" />
</head>

あるいはCSSファイル側の名前が間違っていないかも合わせて確認しましょう。linkタグではstyle.cssと書いているけどファイル名はstyles.cssだったなんてことはよくあります。

また、コード上には書いてあるつもりでも実際のページでは実は読み込まれていないという可能性もあります。必ずデベロッパーツールからheadタグの中を探して、本当にlinkタグでCSSが読み込まれているか確認しましょう！

特にWordPressで開発している時はよく見たらページ上にlinkタグがないってことが起きやすいです。読み込み方が間違っていないかもチェックしてくださいね。

対策2：CSSを書いたファイルが正しいか確認する

ちゃんとCSSを書いたはずだし、linkタグもあるはずなのに反映されない！という時はコードを書いたファイルが本当にそのページで読み込まれているファイルかを確認して下さい。

複数ページを開発していてCSSファイルが複数あるときに起こりがちです。

対策3：キャッシュを削除する

linkタグもあってるしコードを書いたファイルもあってるのにCSSが反映されない…という時はキャッシュが悪さをしている可能性があります。

キャッシュとはブラウザがページ読み込みを早めるために一時的に保存してあるデータのことです。

このキャッシュを削除して最新のHTML/CSSを読み込むことで反映されることがありますので必ず試してみて下さい！ショートカットキーを使ってスーパーリロードというキャッシュを削除しながら再読み込みする方法がおすすめ！

Windows：Ctrl + Shift + R
Mac：Command + Shift + R（SafariのみCommand + Option + R）

これを押せばキャッシュが削除されます！毎回これをする癖をつけておくと良いですね！

対策4：Sassのコンパイルが上手くいっているか確認する

もしSassを使っているなら、最終的に読み込まれる方のCSSファイルの中身を必ず確認して下さい！

Sassには書いたけどコンパイルが出来ていなくてCSSの方にコードが反映されていない可能性があります。

CSSはある場合

デベロッパーツールでCSSが見つかった場合でもスタイルが正しく反映されないことがありますCSSの表示状態によって、原因をかなり絞り込むことができます！

以下の3つの状態がよく見られる問題です。それぞれ原因と解決方法を詳しく解説していきます！

取り消し線で消されている
別のCSSに上書きされている可能性があります。
注意マークが出ている
プロパティや値に間違いがあるかもしれません。
半透明になっている
無効なプロパティや適用されないスタイルがある場合に起きます。

取り消し線で消されている

CSSプロパティが取り消し線で消されている場合、スタイルが被ってしまっている可能性が高いです。上記の画像だとcolorが2箇所から指定されていますね。

プロパティが被った場合、それらを同時に適用することは出来ません。CSSにはこれを決めるためのポイント制のようなものがあって、それによってどれが優先されるかが決まります。

では対策を見ていきましょう。

対策1：いらないものを削除する

もし複数指定されている中で不要なものがあるなら削除してしまいましょう！適用されていないCSSは削除するのが基本です。

対策2：適用したい方の点数を上げる（あまりおすすめではない）

ざっくり説明すると、セレクタの種類によってポイントが違います。点数は以下の通り。

タグセレクタ：1ポイント
クラスや属性セレクタ：10ポイント
idセレクタ：100ポイント

この点数が高いほど優先されます。同点の場合は後に書いたものが優先されます。

次のコードを見てみましょう。どれが適用されるでしょうか！

#button {
  color: pink;
  /* これはidセレクタなので100ポイント */
}

button {
  color: red;
  /* これはタグセレクタなので1ポイント */
} 

.button {
  color: blue;
  /* これはクラスセレクタなので10ポイント */
}

#button {
  color: green;
  /* これはidセレクタなので100ポイント */
}

正解は、最後の color: green; でした！

点数が高いidセレクタが優先されるのでpinkかgreenになり、後から書いたものが優先されるルールによってgreenになるということです！

ちなみに複数セレクタの場合は足し算になります。というわけで適用させたいCSSのセレクタを工夫して点数を上げれば適用される可能性があります。

ただし無理に複雑なセレクタを増やすのはおすすめしません。単純に読みにくくなりますし、コードを書いているうちにイタチごっこのようにどんどん数が増えていく可能性もあります。

できれば対策1のいらないCSSを削除する方針がおすすめです。

ちなみにこのポイント制の仕組みは「詳細度」と呼ばれています。詳しくは次のリンクを読んでみてください。