どうも7noteです。cssが効かないと思ったときに試したい10の事
プログラミングはトライアンドエラーが大事だとよく聞きますが、プログラミング言語でなくスタイルシート言語であるcssもトライアンドエラーを繰り返す事がとても大事です。
でも分からないものはやっぱりわからない。そんなcssが効かなくて困った時に試せるような事をまとめましたので、お試しあれ。
誰かの役に立てればと、思います。
1.サーバーにファイルはあがっているかチェック
もしサーバー上に構築しているのであれば、cssファイルをちゃんとサーバーにアップロードしましたか?
上がってないファイルは読み込めないので効きません。
2.誤字脱字をチェック
プロパティは正しく書けていますか?1文字でも誤字や脱字があると効きません。コロン( : )だとおもったらセミコロン( ; )を描いていたりはよくあることです。逆もしかり。見直してみましょう。
3.要素名・クラス名・id名が正しいか確認する
HTMLを見直すのがめんどくさくてクラス名を手打ちすると間違える原因になりやすいです。クラス名やid名はできるだけHTMLからコピペするようにしましょう。
4.タグの入れ子構造と、cssの入れ子構造が違ってないか確認
よく見るとHTMLとcssで入れ子構造(ネスト)がズレてることは、そこそこの経験者でもたまにやってしまうことがあります。
もう一度よく見直してみましょう。
5.そのcssは本当に効くものなのかチェック
中にはインライン要素にしか効かないcss、ブロック要素にしか効かないcssがあります。
「プロパティ名」で検索して、解説サイトを見てみましょう。
6.そもそもcssが読み込めているか確認する
どんなに書いてもcssファイルを読み込んでなければ反映されません。ブラウザで右クリックして「ページのソースを表示」から、cssを読み込んでいる場所から読みたいcssが読み込めているか確認しましょう。
7.重複して指定していないか確認する
cssには優先順位があります。同じ要素に対してcssを指定していたとしても、指定の仕方で優先されるcssがあります。
もし同じ要素に同じプロパティを指定していた場合、優先順位が高い方が反映されます。
CSSの優先順位参考記事:https://qiita.com/tatane616/items/22d86d89307cb08bffc5
8.ウィンドウサイズによって切り分けていないか確認する。
レスポンシブサイトを作る際にスマホ専用などのcssを書く場合があります。もし触っていた箇所がスマホ用のcssが書かれているところなら、どんなに触ってもpc表示の時には反映されません。@media screen and ()
を指定しているところを触ってないか、確認してみましょう。
9.ないと思うけど、コメントアウトしてる?
いや、ないとは思うけどね。でも、たまにコメントアウト外し忘れてたりするので。
10.とりあえず色をつけてみる
要素がどっかいったら、背景色や文字にわかりやすい色をつけてみましょう。borderでも構いません。大きさが指定されてないかもしれないし、思ってもないところに表示されるかもしれません。色をつけて要素がどこにあるか、またそもそもCSSが効いているかチェックしてみましょう。
まとめ
cssをやる上で、効かないなんてことはしょっちゅうあるものです。とくに始めたての頃はcssのルールやクセを覚えるのにかなり時間がかかるものですし、経験しないとなかなか覚えられない事も多いです。
ゴリゴリcssかけますってひとも、昔は何度もトライアンドエラーで挑戦してcssをマスターしているはずです。
何度もトライして、ゆっくり1つずつ覚えていきましょう。
それでもわからなかったら、他の人に聞いてみましょう。独学でやってる人も、質問箱的なところで聞けば優しく教えてくれるので怖がらずにどんどん質問してみましょう。
私も人に聞いてるときに説明しながら頭の中で整理されて「あ、わかった。」と勝手に自己解決することもあります。人に話すって大切ですね。
おそまつ!
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ