「あれ？CSSが反映されない！」ちゃんとCSSを書いたのに。
原因がわからずに、焦った経験があります。
だけど、診断のやり方さえわかれば怖くありません。というお話しです。
これは、とある20世紀の物語。
とある制作会社で働いている「ドラえ○ん」と「のび太君」が今日も遅くまで仕事をしています。
のび太「あれっあれっ？ドラえ○んー！CSSが効かないよー。」
ドラ「えー。のび太君のせいじゃないのー？」
のび太「そんなことないよ。だって、ちゃんと書いたもん。」
ドラ「どらどら。ちょっと見せてみなよ。」
こうして、のび太君のコードを見たドラちゃんの第一声。
ドラ「のび太くん。検証モードで要素を選択しても、CSSが当たってないことが判明したよ。」
のび太「え！。どゆこと？ドラえ○ん。」
ドラ「つまり、のび太君の書いたCSSに問題があるってこと。」
のび太「助けて～。ドラえ○ん～～～～～～～～～。」
とぅるるるるるとぅるるるるるとぅるるるるるとぅるるるる、るるる、るるる、るるる、るるる、るるるるるるるるー・・・・
「ちゃんと書いたのに、スタイルがあたらない。なんでか分からない。」
誰もが経験することです。
だから、焦らなくて大丈夫。
まず最初に確認するのが、ドラえ○んがやったことです。
検証モードで要素を選択して、CSSが当たっているか見ましょう。
要素を選択したときには、その要素に当たっている指定を全てみることが可能です。
ちなみに、優先度が高い順に記載されています。
CSSが当たってない場合に考えられるのは
「書き間違え」
です。
・プロパティ名がちがう
・セレクタ名がちがう
・途中でCSSのクラス名を変えたけど、HTML側のクラスを変更し忘れてた
・「{}」波カッコ の閉じ忘れ
・「;」セミコロンを忘れてる
・idとクラスを勘違い
などが考えられます。
次に、検証モードで要素を選択したときに、CSSが当たっているのに、当たっていない場合。
そのときは、他の指定で上書きされているはずなので、優先順位を高くすればいいのです。
優先順位はブログでも書きましたが、importantが最強です。
https://michiweb.net/cre-css-priority/
ただし、試しにimportantを使用するのはいいですが、実際に多用するとimportantだらけになってカオスなCSSが出来上がってしまうためにやめましょう。
そんな方は「CSS設計 SMACSS」などで色々勉強しましょう。
それでもCSSが効かない場合は・・・
・キャッシュのせい
・ファイルのパスがちがう（相対パスやルート相対パス、開発環境の違いで起きる。）
・そもそもファイルを保存してなかった。
とくに、「キャッシュ」のせいで迷うのは時間の無駄です。
Chromeの場合、
Macの人は「Cmd + R」または「Cmd + Shift + R」
Winの人は「Ctr + F5」または「Ctr + Shift + R」
などの癖をつけましょう。
ちなみにキャッシュクリアには他にも方法があります。
設定＞その他のツール＞閲覧履歴の消去
開発者モード＞右クリック＞キャッシュの消去とハード再読み込み
最強なのは「閲覧履歴の消去」ですが、日常的に使うのは「ハード再読み込み」の「Cmd + Shift + R」（Mac）ですねー。
あと、もらったファイルを確認したらスタイルが当たってなかったとき。
ルート相対パスで書かれている場合は、MAMPPなどで開発環境を整えてから作業を開始しましょう。
あ、ファイルを保存し忘れて反映してないことも・・・・ありますよねwww
まじで気をつけましょう。
まとめ
まずは開発者モードで、どちらが原因か探る
１.書き間違え
2.優先順位が低い
1.の「書き間違え」場合は記述を確認。
validatorツールでも確認できる場合もありますが、目視が手っ取り早い。
2.の「優先順位が低い」場合は、優先順位をあげる。もしくは上書きしている側の優先度を下げる。
この場合はCSSの設計も見直す必要がある場合があります。
なれるとすぐに解決することができます。
「開発者モードで、要素を選択する」これを素早くできるようになりましょう。
開発者モードのショートカット：Cmd + Shift + C（mac）
で、開発者モードの状態で更に Cmd + Shift + C をすることで、素早く要素が選択できます。
ショートカットも覚えると爆速で診断可能になりますよー。