CSSが反映されない時の原因は？確認チェックリスト
スタイルシートが反映されていなくて「CSSが反映されないのはなぜ！？」と、お困りの方は下記７つのポイントを改めて確認してみてください。
私はよくどれかで躓いています…。ちょっとしたミスで何時間もロスしてしまうのはもったいないので、同じことでお困りの方の力に少しでもなれれば幸いです！！
１．外部スタイルシートのファイルを読み込んでいるか
２．内部スタイルシートの記述はあっているか
３．class名、id名はあっているか
４．class名、id名が数字で始まっていないか
５．記述のルールは守られているか
６．外部スタイルシートのファイルの文字コードはあっているか
７．キャッシュが残っていないか
１．外部スタイルシートのファイルを読み込んでいるか
こちらは外部スタイルシートを指定している場合ですが、改めてパスやファイル名が合っているか確認してみてください。
確認の仕方は、適用しているページを表示してソースを表示。
(Chromeであればページの右クリック→ソースを表示。またはCtrl＋Uで表示できます。)
パスやファイル名はあっているか
ページのソースを開いて、指定しているCSSのファイルパスをhttp～.cssまでコピーし、ブラウザのURL欄に張り付けてみてください。
そこで指定しているCSSファイルが開けば問題ないですが、「404エラー」など見つからない場合はパスやファイル名が間違っている可能性があります。
記述場所、指定タグはあっているか
<head>～</head>の中に記載されているか。
タグ例：<link rel=”stylesheet” type=”text/css” href=”パス/ファイル名.css”>
２．内部スタイルシートの記述はあっているか
コードのスペルミスをしていないか
スペルや記号（＜、＞、：、；）がきちんとあっているか。
特に閉じタグを忘れていないか確認しましょう。
また、どこかのサイトからコピペした際に、全角になっていることもよくあります。
基本的にcssは半角英数字記号なので、すべて半角になっているか確認しましょう。
記述場所はあっているか
<head>～</head>の中に記載されているか。
【タグ例】
<head>
<style type=”text/css”>
p {color:blue; line-height:1.5;}
</style>
</head>
３．class名、id名はあっているか
スペルミスをしていないか
例：htmlとcssのclass名やid名が一致していない。
html： <div class=”blog_top“>テキスト</div>
css：.top_blog{ color:#000000; }
４．class名、id名が数字で始まっていないか
記述のルールとして数字や-(ハイフン)で始まっていると認識されません
.-top{ color:#ffffff;}
.01div{ border:1px solid #ffffff; }
上記のような数字やハイフンで始まっているクラスは使用できません。
５．記述のルールは守られているか
class名、id名の終わりにきちんと始まりと閉じカッコが存在しているか
私はこの凡ミスをやりがちです。以下は例。
.top_title1{ color:#aaaaaa;}
.top_title2{ color:#bbbbbb; ←閉じかっこが抜けている
.top_title3{ color:#cccccc;}
class名、id名の前にピリオドが抜けていないか
見つけるのが結構しんどいミス。以下は例。
top_title{ color:#dddddd;}
正解は .top_title{ color:#dddddd;}
スタイル指定の最後がコロンで終わっているか
例：.class_name{ color:#000000;font-size:120%; }
６．外部スタイルシートのファイルの文字コードはあっているか
WordPressの場合は、UTF-8(BOMなし)が推奨されています。
※UTF-8には、BOMありとBOMなしがあるので、注意が必要です。
最近の主流はUTF-8なので、文字コード？？という方はUTF-8に変換して様子を見るのもありです。
Windowsのメモ帳で作成した場合に意図しない文字コードになり、文字化けや正しく反映されない恐れがあります
Windowsのメモ帳で作成したファイルはShift-JISで作成されるため、注意が必要です。
※元はUTF-8のファイルであっても、メモ帳で修正して保存した場合はファイルの文字コードがShift-JISになります。必ずテキストエディタを使って下さい！
※Windowsで無料で使えるテキストエディタには、「サクラエディタ（Sakura Editor）」や「TeraPad」などがあります。
ちなみに私個人は「サクラエディタ（Sakura Editor）」を使用しています。他にもたくさんあるので、お好みで…
７．キャッシュが残っていないか
修正したのに反映されていない場合はキャッシュが残っている可能性があります。
ブラウザのキャッシュクリアを実施し、もう一度反映されているか確認してみましょう。
たまにサーバーの方のキャッシュが残っていてブラウザでいくらクリアしても更新されない場合があります。
その場合は違うブラウザで確認したり、Chromeであればシークレットウィンドウで確認したりしてみましょう。
そもそもサーバーの設定でキャッシュがONになっているとキャッシュがクリアされないので、サーバーの設定を見直してみましょう。
サーバーキャッシュについては、レンタルサーバーによって異なります。参考になれば…。
■さくらレンタルサーバー：PHPキャッシュ機能 APCu について
https://help.sakura.ad.jp/360000105521/
■エックスサーバー：サーバーキャッシュ設定
https://www.xserver.ne.jp/manual/man_server_cache.php