no-image

スタイルが当たらない!CSSが効かない!原因を説明しよう。

「あれ?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 + Cmac

で、開発者モードの状態で更に Cmd + Shift + C をすることで、素早く要素が選択できます。

 

ショートカットも覚えると爆速で診断可能になりますよー。