【CSS】CSSが反映されない時にチェックしたい３つのポイント

更新したはずのスタイルシートの内容が反映されない！
このidだけ、このclassだけ、この要素だけスタイルが効かない！
ブラウザ上でスタイルシートの中身を見ても更新されているのに、ページ上には反映されない
いくらブラウザのリロードボタンを押しても変わってくれない…

などなど、うまくスタイルが効かない状況に出くわす事は誰しも一度はあると思います。
スタイルが反映されない問題の原因は多岐にわたるので、心当たりのあるものから一つ一つ確認していきましょう。

今回はCSSが反映されない場合にチェックすべき点をいくつか紹介します。

まずはキャッシュの確認

ブラウザにはページを迅速に表示させるための キャッシュ機能 が付いています。
ページが表示されて一度読み込まれたスタイルシートは、ブラウザにキャッシュとして保存されます。
このキャッシュが更新されなければ、いくらファイルを更新しても 古いスタイル が読み込まれるため
ページに変更点が反映されません。

確認：ブラウザキャッシュの削除、またはスーパーリロード

おかしいな？と思った時は最初にブラウザのキャッシュを削除するか、
スーパーリロード を試してみましょう。

スーパーリロードとは「キャッシュの読み込みをさせずにページを表示する」方法です。
毎度キャッシュのクリアをする手間を省けるので、ちょっとした確認のためならスーパーリロードをお勧めします。

それぞれのブラウザでスーパーリロードを行う方法をまとめました。

キー１つ押すだけで確認ができます。
頻繁に確認する場合、いちいちキャッシュ削除画面を開かなくて済むのでこの方法はとっても便利ですね。

Chromeでキャッシュの削除とハード再読み込み

ちなみにChromeでは、更に強力な「キャッシュの消去とハード再読み込み」が存在します。
この機能はスーパーリロードと違ってキャッシュも削除するため、確実に全てのキャッシュ効果をなくしたいときに活用できます。稀にスーパーリロードでも無視されないキャッシュがあるので、そんな時はこの機能を使います。
ショートカットは存在しないので、以下の方法で再読み込みします。

これでブラウザからはまっさらの状態でサイトの確認ができます。

対策：スタイルシートをキャッシュさせないようにする

もしスタイルが反映されない原因がスタイルシートのキャッシュにある場合は、
今後もキャッシュさせないようにする方法として、呼び出すスタイルシート名の後ろに ダミーのパラメーター をつけることをお勧めします。やり方は簡単で、半角の疑問符の後ろに好きな文字列を入れるだけです。

このパラメーターを変えることでブラウザからは 別のファイルとして認識される 仕組みなので、内容はなんでもOKです。
更新した日付やバージョンなどを入れると管理しやすいですね。
スタイルの更新をしたらここを変えてブラウザに知らせてあげます。

WordPressのビューキャッシュが呼び出されている可能性

ブラウザ側に問題がない場合、WordPress側のキャッシュを疑ってみます。

便利なプラグインがたくさんあるWordPressなので、キャッシュプラグインも様々です。
中でも「ビューキャッシュ」に分類されるタイプのキャッシュプラグインは、外観そのままをキャッシュすることで高速化を図っています。
このビューキャッシュが残っていると、どんなにブラウザ側からキャッシュを削除しても
呼び出し元が過去のデータのため、新しいものが反映されることはありません。
よく使われる WP Super Cache はビューキャッシュに当たります。

キャッシュプラグインの持つキャッシュを削除することで、外観に反映されるかを確認します。
管理画面からプラグインページに行き、キャッシュ削除をした後はブラウザでもスーパーリロードなどの再読み込みも忘れずに。
ブラウザとWP両方のキャッシュをクリアしても解決しない場合は、問題はキャッシュ以外となります。

呼び出すCSSのファイル名が間違っている

頑張って書いたCSSをそもそも呼び出していなかったということも絶対にないとは言い切れないので
念のため、ソースコードのヘッダーを確認しましょう。

<link rel="stylesheet" type="text/css" href="/styles.css" />

style.css　と　styles.css　の間違いだったり（sがついているかついていないか）、
ディレクトリパスが間違っているなどなど……。

WordPressでなら、スタイルシートのパスに テーマディレクトリ ではなく ブログURL が入っていたり、
子テーマを利用しているケースでは「子テーマのテンプレートパス」を指定するはずが
「親テーマのテンプレートパス」が入っていた、……なんて例もあるかもしれません。

CSS、HTMLの記述ミスがある

スタイルにコーディングミスがあると、エラー付近のスタイルは反映されません。
よくあるコーディングミスのいくつかを例に出してみます。

コメントアウトに失敗している（アスタリスク抜け、スラッシュ抜け、二重スラッシュ等）

/* コメント（アスタリスク抜け 下全てコメントアウトされてエラー） /

/＊　コメント（全角記号 コメントされずにエラー） ＊/

// コメント（二重スラッシュ コメントされずにエラー）

スタイルシートでのコメントアウト（読み込ませない部分を囲うもの）では、
半角アスタリスク、スラッシュを以下のように組み合わせたものを使います。

/* （コメントしたい記述） */

アスタリスクやスラッシュが抜けていたり全角だったりすると、下全てがコメントアウト状態になったり
コメントされずにコーディングエラーとなってしまい、周囲のスタイルが無視されてしまいます。

ちなみにCSSでは、WordPress（PHP）でよく使う // （二重スラッシュのコメントアウト）は使えず、エラーになります。

// これはコメントされません…。
.koreha_mushisaremasu {
	font-size: 100px;
}

波括弧　}　の閉じに失敗している

div {
	padding: 10px;

p {
	margin: 0 0 0 10px;
}

閉じる前に波括弧が始まっているので、pタグのスタイルは無視されます。

セミコロン　; が抜けている

.red {
	color: #ff0000
	background: #ffa0a7;
}

行末記号がないことでフォントのカラー、背景両方とも反映されません。

プロパティ名が間違っている

p {
	clor: #666;
}

無効なプロパティとされ無視されます。

セレクタ名が間違っている

q {
	color: #666;
}

存在しないセレクタなのでスタイルを変更したいセレクタに反映されません。

スタイル設定が重複している

<div id="wrapper">
    <div id="content">
         <p>テキスト</p>
    </div>
</div>

#content p {
	color: #ff0000;
}

...

#wrapper p {
	color: #0000ff;
}

どちらかを優先させたい場合は、要素にクラス名を付与して区別化するか、HTML側で要素の構造の見直し、
それができなければ応急処置になりますが !important を使うのも手です。

#content p {
	color: #ff0000 !important;/*このスタイルが優先される*/
}

全角スペースが混じっている

p {
	color: #ededed;
	　
}

ぱっと見気付けない部分です。

スタイルに限らず、全角スペースやコーディングミスを警告してくれるエディタを使用するのをおすすめします。

ブラウザが対応していないスタイルを使用している

ブラウザによっては使用できないスタイルも存在します。
反映されないプロパティ名で調べてみるといいかもしれません。

まとめ

思いつくものや今まで経験したものをざっと並べてみました。

他にも原因は多々あると思いますので、一度ブラウザにある機能の「要素を検証」などで
コーディングミスを洗い出してみるといいかもしれません。
ケアレスミスは誰しもありますが、今回ご紹介したケースをあらかじめ念頭に入れておけば
詰まっても解決までサクサクいけるようになります。

スタイルに問題がないのに反映されない場合は、一旦ブラウザを再起動も試してみるといいかもしれません。
（ハードリロードまでやった場合ブラウザの再起動もあまり意味をなさない気もしますが……）

または、WordPressがプロキシサーバを経由している場合 プロキシサーバのキャッシュ が影響しているケースもあります。確認しているページのURLや呼び出しているCSSのパスに、ダミーのパラメーター（?20190101 など）を追加してみて、反映されるようであればその可能性があります。

それでもダメなら…
反映したいスタイルシートのアップロード先が間違っていた！とか、
確認しているページURL自体が違っていた！なんて頓珍漢なこともあったりなかったり……嫌なことを思い出しました。