CSSがブラウザに反映されない時はいくつか原因があります。
今回は、考えられる原因とその対処法をご紹介します。
反映されない原因
・キャッシュが残っている。
・CSSが機能していない。
・他の記述が優先されている。
・書いたCSSが確認できない。
・レイアウトのミス。
キャッシュが残っている場合
キャッシュ = 過去に閲覧したWebサイトのファイルデータ（htmlファイルやcssファイル、画像など）を
パソコンの容量として一時的に保存してからブラウザに再利用させる機能。
つまり、簡単にまとめると過去の閲覧情報を残すことで、次のサイト表示速度を上げるということです。
「解決方法」
スーパーリロードする。
スーパーリロード = キャッシュを破棄して最新のデータを読み込む。
・Windows：CtrlキーとF5キーを同時押し
・Mac ：commandキーとshiftキーとRキーを同時押し
CSSが機能していない
CSSがしっかり機能しているかは、デベロッパーツールで確認できます。
デベロッパーツール = 無料でWEBサイトの状態確認や検証ができる。
「確認方法」
ブラウザ上で右クリック→検証→反映されてないコードは黒線で囲んである所のように、⚠︎注意マークと横線が入っています。
スペルミスや全角スペースが入っていないか、記述が間違っていないかなどを確認しましょう。
他の記述が優先されていないか
先程と違って横線のみの場合は、書き方に間違いはないが、この記述は反映されていないということです。
原因はCSSの適用優先順位によるものです。
「解決方法」
・上の方に同じCSSが反映されていることがある為、反映されているCSSを削除する。
・削除したくない場合は、CSSの優先順位を上げる。
→セレクタを長くする、もしくはIDで指定する。
<div id="menu"> // htmlでid指定。
# menu { // cssは#から記述。
color: red; // セレクタ：menu プロパティ：color 値：red
}
CSSが確認できない
書いたはずのCSSがデベロッパーツールで確認できない場合は、そもそもCSSが読み込まれていないか、セレクタ名を間違えている可能性があります。
・CSS読み込み → <link rel="stylesheet" href="sample.css">
・セレクタ名ミス
1.ID名の前に「#」をつけていない。
2.class名の前に「.」をつけていない。
3.つづりミス。
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="sample.css">
<title>CSS読み込み方法</title>
</head>
<body>
<h1></h1>
</body>
</html>
レイアウトのミス
上記の方法でも解決できないということは、記述ミスではなくCSSの仕様に問題があるかもしれません。
具体的には下記のことが考えられます。
・float、positionの解除忘れ。
・幅や高さの指定による問題。
・ブロック要素とインライン要素による問題。etc...
こちらの解決方法に関しては、この記事では省かせていただきます。
なお、下記のサイトにて詳しく解決方法が記載されていますのでご覧になってみてください。
対処法：(https://www.sejuku.net/blog/100015)
参考元はこちら
対処法：(https://www.sejuku.net/blog/100015)
セレクタ：(https://www.asobou.co.jp/blog/web/css-selectors#CSSHTMLCSS)
CSS読み込み：(https://techacademy.jp/magazine/9647)