cssが効かない！そんなときに確認したいこと

こんにちは、幸鈴です。

私は独学とオンラインスクールでwebデザインを学んでいます。

コーディングしていく中でcssが効かなくて困ったことが何度もあり、今でもなくなりません。
その都度調べていくうちに自分が何度もやってしまう間違いや、オンラインスクールで指摘してもらって気づいた間違いがあったのでまとめました。

参考にしていただけると嬉しいです。

閉じタグの位置が違う

コードが長くなっていくと構造が複雑になっていくため、どのタグがどの閉じタグなのか分かりにくくなってしまう。

対策

• コメントで書いておく。

スペルミス

• セレクタのスペルミス




• プロパティ名のスペルミス

対策

• htmlで書いたクラス名やid名をコピペして使う。

reset.cssがstyle.cssの後ろにある

後ろに書くにつれて上書き保存されていく形式のため、headタグの中でcssを読み込むときにreset.cssがstyle.cssの後ろに来ていると、せっかく書いたcssが読み込まれてはreset.cssに打ち消されていってしまいます。

対策

• headタグの閉じタグ直前にstyle.cssが来るように書く。
• テンプレートを作っておく。

まとめ

cssをちゃんと書いているはずなのに効いていないということはどこかが間違っている、ということです。

自分が間違いやすいポイントをまとめておくと、いざcssが効かないときでも確認するポイントが分かっているのでただ闇雲に探すよりは手間が少しは省けるかと思います。

最後に確認するところをもう一度まとめておきます。