CSSが効かない問題は、初心者だけでなく実務でも頻繁に起きます。
原因のほとんどは「単純な見落とし」です。焦って書き直す前に、順番に確認する習慣を持つだけで解決速度が大きく変わります。
ここでは、実務でも使うチェックリストを整理します。
1. そもそもCSSファイルが読み込まれているか
まず疑うべきはここです。
・linkタグのパスが間違っている
・ビルド後のファイルを見ている
・WordPressやフレームワーク側で読み込み漏れ
・キャッシュが残っている
ブラウザの開発者ツールで「Network」を見て、CSSが読み込まれているか確認します。
意外ですが、ここで詰まっているケースはかなり多いです。
2. セレクタが正しいか
書いたクラス名とHTMLのクラス名が一致しているかを確認します。
ありがちなミスは次の通りです。
・スペルミス
・ハイフンとアンダースコアの混在
・BEMの命名ズレ
・クラスを付け忘れている
開発者ツールで要素をクリックし、右側にCSSが表示されるかを見ると一瞬で分かります。
3. 優先順位（Specificity）で負けていないか
CSSは後から書いたもの、または強いセレクタが勝ちます。
例えば次のようなケースです。
・より詳細なセレクタに上書きされている
・別のCSSファイルに負けている
・インラインスタイルがある
・importantが付いている
開発者ツールの「打ち消し線」がヒントになります。
ここを見ずに悩み続けるのは時間の無駄です。
4. displayやpositionの影響を受けていないか
CSSが効いていないのではなく、「表示条件」が満たされていないだけのことがあります。
よくある例です。
・display none になっている
・overflow hidden に隠れている
・positionの影響で見えない場所にある
・z-indexの重なりで埋もれている
特にz-indexは、親要素の影響も受けるので注意が必要です。
5. サイズ指定の衝突
高さや幅が効かない場合は次を疑います。
・親要素に高さがない
・flexやgridの影響
・min-heightが指定されている
・box-sizingの違い
特に高さ問題は「親を見ろ」が鉄則です。
6. メディアクエリに入っていないか
レスポンシブ対応中によく起きます。
・条件が間違っている
・ブレークポイントの認識違い
・想定外の幅で確認している
今の画面幅がどのCSSに該当しているかを確認します。
7. JavaScriptに上書きされていないか
最近はこれがかなり多いです。
・JSがstyleを書き換えている
・ライブラリがクラスを付け替えている
・アニメーションで値が変わる
SlickやSwiper、GSAPを使っている場合は特に疑うべきポイントです。
8. キャッシュ問題
ブラウザやサーバーのキャッシュが残っていると、修正が反映されません。
・強制リロード
・シークレットウィンドウ
・キャッシュ削除
WordPressではこれが頻発します。
9. ビルド環境の問題
SassやViteを使っている場合は注意です。
・watchが止まっている
・コンパイルエラーが出ている
・古いファイルを見ている
「保存したのに変わらない」はほぼここです。
10. ライブラリCSSに上書きされている
実務では一番多い原因です。
・slick.css
・normalize.css
・reset.css
・UIフレームワーク
ライブラリは想像以上に強いスタイルを持っています。
結論：CSSが効かない時は「推測しない」
闇雲に書き直す人が多いですが、それは最悪の対応です。
原因を特定せずに触ると、技術負債が増えるだけです。
正しい順番はこうです。
1 観察する
2 DevToolsで確認する
3 原因を特定する
4 最小修正する
この思考を徹底すると、CSSデバッグ速度は劇的に上がります。
