More than 3 years have passed since last update.

【初心者でもわかる】cssが効かない時に試したい10の事

Posted at 2021-04-01

どうも7noteです。cssが効かないと思ったときに試したい10の事

プログラミングはトライアンドエラーが大事だとよく聞きますが、プログラミング言語でなくスタイルシート言語であるcssもトライアンドエラーを繰り返す事がとても大事です。

でも分からないものはやっぱりわからない。そんなcssが効かなくて困った時に試せるような事をまとめましたので、お試しあれ。

誰かの役に立てればと、思います。

もしサーバー上に構築しているのであれば、cssファイルをちゃんとサーバーにアップロードしましたか？
上がってないファイルは読み込めないので効きません。

プロパティは正しく書けていますか？1文字でも誤字や脱字があると効きません。コロン（ : ）だとおもったらセミコロン（ ; ）を描いていたりはよくあることです。逆もしかり。見直してみましょう。

HTMLを見直すのがめんどくさくてクラス名を手打ちすると間違える原因になりやすいです。クラス名やid名はできるだけHTMLからコピペするようにしましょう。

よく見るとHTMLとcssで入れ子構造(ネスト)がズレてることは、そこそこの経験者でもたまにやってしまうことがあります。
もう一度よく見直してみましょう。

中にはインライン要素にしか効かないcss、ブロック要素にしか効かないcssがあります。
「プロパティ名」で検索して、解説サイトを見てみましょう。

どんなに書いてもcssファイルを読み込んでなければ反映されません。ブラウザで右クリックして「ページのソースを表示」から、cssを読み込んでいる場所から読みたいcssが読み込めているか確認しましょう。

cssには優先順位があります。同じ要素に対してcssを指定していたとしても、指定の仕方で優先されるcssがあります。
もし同じ要素に同じプロパティを指定していた場合、優先順位が高い方が反映されます。

レスポンシブサイトを作る際にスマホ専用などのcssを書く場合があります。もし触っていた箇所がスマホ用のcssが書かれているところなら、どんなに触ってもpc表示の時には反映されません。@media screen and ()を指定しているところを触ってないか、確認してみましょう。

いや、ないとは思うけどね。でも、たまにコメントアウト外し忘れてたりするので。

要素がどっかいったら、背景色や文字にわかりやすい色をつけてみましょう。borderでも構いません。大きさが指定されてないかもしれないし、思ってもないところに表示されるかもしれません。色をつけて要素がどこにあるか、またそもそもCSSが効いているかチェックしてみましょう。

cssをやる上で、効かないなんてことはしょっちゅうあるものです。とくに始めたての頃はcssのルールやクセを覚えるのにかなり時間がかかるものですし、経験しないとなかなか覚えられない事も多いです。

ゴリゴリcssかけますってひとも、昔は何度もトライアンドエラーで挑戦してcssをマスターしているはずです。
何度もトライして、ゆっくり1つずつ覚えていきましょう。

それでもわからなかったら、他の人に聞いてみましょう。独学でやってる人も、質問箱的なところで聞けば優しく教えてくれるので怖がらずにどんどん質問してみましょう。
私も人に聞いてるときに説明しながら頭の中で整理されて「あ、わかった。」と勝手に自己解決することもあります。人に話すって大切ですね。