CSSを書いて保存して・・・ブラウザでチェックしたら反映されていない。
サイトを作っているとよくある現象ですが、原因を調べる手順をまとめました。
書き間違い？上書きされてる？
CSSの書き間違いか、CSSが別のなにかで上書きされているかです。
書き間違いの場合は、検証したときに記述したクラスが出てきません。
それ以外の場合のとき、CSSの優先順位を見直します。
更に、CSSの優先順位を把握することで運営のし易いサイト設計をするためにCSSの優先順位を学びます。
CSSの優先順位に影響する要素
1. 誰の指定か
2. 詳細度
3. 指定の順序
4. important
1. 誰の指定か
ブラウザーのデフォルトのスタイルと閲覧者が設定出来るスタイルと製作者によるスタイルがあるので何が影響しているのか注意します。
2. 詳細度
セレクタの書き方により優先順位が変わります。
CSSの優先順位<></h1></div>
この時、
div#header h1 ＞ #header h1 ＞ di.header h1 ＞ .header h1 ＞ div h1 ＞ h1 ＞ *
の順で優先度が変化します。この優先度は指定の順序にかかわりません。
3. 指定の順序
原則として、よりタグに近く、より後から読み込まれたスタイルが優先されます。
HTMLファイルのヘッダーに記述する外部から読み込むCSS。
それより後に、styleタグを使って記述するCSS。更にbody内のタグに直接記述するCSSの優先度は以下の通りです。
タグに直接記述（最優先） ＞ ヘッドのstyleタグに記述 ＞ 外部から読み込む
このように、タグに近いスタイルが反映されます。
ただし、IDやクラス名を追加したり、要素名を追加することで、先に読み込まれたスタイルが反映されます。
4. important命令
指定の順序を覆すことのできる魔法の言葉
制御しやすい、運用しやすいプロパティの指定を目指すため
セレクタに強い指定をしないこと！
CSSでプロパティに値を設定するとき、idでプロパティを選んだらどうなるか。
後に記述するとき、クラス名ではオーバーライドが出来ないため、id指定が多くなります。
それを!importantで上書きしたら、以降!importantでしかプロパティを選べなくなります。
なるべく最小限の上書きをしましょう。
スタイルが当たらない 優先順位を検証する 親要素から指定？ クラス名？
必ずしも後に記述したものが適用されるわけではない
・開発者モードで邪魔している指定を把握→継承は表示されないので親要素やスタイルシートもチェック
適用されない理由
記述ミス、記述より強い指定で邪魔されている、
↓
原因がわかったら、より強い状態で書き込む（スタイルを制御すること）
↓
反映されたかチェック
まとめ
ポイントは要素の状態を知ることが重要
形が違う、動きがちがう → どこから、何の指示があるのか？
打ち消せない指定は存在しない！原因を追究しよう！
チェックポイントは4つ。
1. 誰の指定か
2. 詳細度
3. 指定の順序
4. important
検証モードで見るとすぐに解決するため、困った時は「F12」を使います。