CSSが反映されない時の原因は？確認チェックリスト

スタイルシートが反映されていなくて「CSSが反映されないのはなぜ！？」と、お困りの方は下記７つのポイントを改めて確認してみてください。
私はよくどれかで躓いています…。ちょっとしたミスで何時間もロスしてしまうのはもったいないので、同じことでお困りの方の力に少しでもなれれば幸いです！！
※随時追記しています。

目次
１．外部スタイルシートのファイルを読み込んでいるか
２．内部スタイルシートの記述はあっているか
３．class名、id名はあっているか
４．class名、id名が数字で始まっていないか
５．記述のルールは守られているか
６．外部スタイルシートのファイルの文字コードはあっているか
７．キャッシュが残っていないか
補足：WordPressでページごとに異なる外部cssファイルを指定する方法(メモ書き)

１．外部スタイルシートのファイルを読み込んでいるか

こちらは外部スタイルシートを指定している場合ですが、改めてパスやファイル名が合っているか確認してみてください。
確認の仕方は、適用しているページを表示してソースを表示。
(Chromeであればページの右クリック→ソースを表示。またはCtrl＋Uで表示できます。)

パスやファイル名はあっているか

ページのソースを開いて、指定しているCSSのファイルパスをhttp～.cssまでコピーし、ブラウザのURL欄に張り付けてみてください。
そこで指定しているCSSファイルが開けば問題ないですが、「404エラー」など見つからない場合はパスやファイル名が間違っている可能性があります。

記述場所、指定タグはあっているか

<head>～</head>の中に記載されているか。
タグ例：<link rel=”stylesheet” type=”text/css” href=”パス/ファイル名.css”>
※一応HTML5.2からbodyの中にかけるようですが、Javascriptを利用したりするので、あまり詳しくない方は従来通りheadの中のほうがいいと思います。

２．内部スタイルシートの記述はあっているか

コードのスペルミスをしていないか

スペルや記号（＜、＞、：、；）がきちんとあっているか。
特に閉じタグを忘れていないか確認しましょう。
特にレスポンシブデザインのためにメディアクエリを使用して、入れ子になってる場合には要注意です。開まりと閉じカッコの対比を確認し、過不足が無いように気を付けましょう。(最近これで苦しんだので何度でも強調したいです)
また、どこかのサイトからコピペした際に、記号やアルファベットが全角になっていることもよくあります。
基本的にcssは半角英数字記号なので、すべて半角になっているか確認しましょう。
「サクラエディタ（Sakura Editor）」など、エディタの機能で「全角→半角」変換機能があったりするので、活用すると便利です。

記述場所はあっているか

<head>～</head>の中に記載されているか。
【タグ例】
　<head>
　　<style type=”text/css”>
　　　p {color:blue; line-height:1.5;}
　　</style>
　</head>

※最近はHTML5.2からbodyの中にかけるようになっています。何を言っているかわからない場合は従来通り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名の指定方法は間違っていないか

classは.class名、idは#id名で指定する。以下は例

classの場合

html： <div class=”div_class“>テキスト</div>
css：.div_class{ color:#00ff00; }

idの場合

html： <div id=”div_id“>テキスト</div>
css：#div_id{ color:#00ff00; }

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）」を使用しています。他にもたくさんあるので、お好みで…

７．キャッシュが残っていないか

修正したのに反映されていない場合はキャッシュが残っている可能性があります。
ブラウザのキャッシュクリアを実施し、もう一度反映されているか確認してみましょう。
ちなみにiPhoneはめちゃめちゃキャッシュが強いです。残ります。サイトを修正してクライアントさんに確認をお願いしたときに「変わってない」と言われることが多々あります。キャッシュの消し方がわからない場合は『スーパーリロード』とかで検索して、キャッシュを消してもらったうえでもう一度確認をしてみることを進めます。

あとは、ハード側の問題ではなくサーバーの方のキャッシュが残っていてブラウザでいくらクリアしても更新されない場合があります。
その場合は違うブラウザで確認したり、Chromeであればシークレットウィンドウで確認したりしてみましょう。
そもそもサーバーの設定でキャッシュがONになっているとキャッシュがクリアされない(手動で削除できるサーバーも有)ので、サーバーの設定を見直してみましょう。

サーバーキャッシュについては、レンタルサーバーによって異なります。参考になれば…。

■さくらレンタルサーバー：PHPキャッシュ機能 APCu について
https://help.sakura.ad.jp/360000105521/

■エックスサーバー：サーバーキャッシュ設定
https://www.xserver.ne.jp/manual/man_server_cache.php