【初心者必見！】CSSが反映されない時の対処法・見直すべきポイント

どうも、わいです。

Web制作やプログラミング初心者の人が躓いたり、挫折しやすいポイントとして

「そのエラーがなぜ起こっているのかが分からない」というのが多いと思います。

特に初心者のうちは、自分が何を分からないのかを分からないでしょうし

現に僕もweb制作を学習したての頃、今回お話しする2番目の対策をしていなかったために

「CSSが効かない！なんで！？」と悩んで、3日ほど原因を特定できずに無駄にしました。

今回は、過去の僕に語りかけるつもりで

自分が当てたCSSが反映されない時に見直すべきポイントを3つ紹介していきます。

①「.」や「#」の記入を忘れている、スペルが間違っている

まず1つ目は、「『.』や『#』の記入を忘れている、スペルが間違っている」ことです。

class名やid名を指定する際に、「.」や「#」の記入を忘れていたり

font-size, texr-align: center; などのスペルが間違っていたら、当然ですが反映されません。

エディターとしてVSCodeを利用している人は、タイプミスなどがあった際には赤線で表示されるので

「どこかが間違っているな」ということに気付けるでしょうが

僕の経験則上、下線部が直接引いてある箇所ではなく、その周辺にミスがあることもあったので

何回もCSSを当てていき

「自分は大抵ここでミスをしてしまうな」

「こういうミス、結構多いよな」

という感じで、ある程度ミスに慣れることは避けては通れないのかな、と思います。

②headタグ内に<link rel="stylesheet" href="style.css">が挿入されているかを確認する

2番目は、CSSを反映するlinkタグがきちんと挿入されているかを確認することです。

僕もWeb制作を学習したての頃、「CSSが効かない！」と悩んで3日ほど無駄にしましたが

CSSを反映するlinkタグを挿入していなかったことが原因でした。

当時の僕は、CSSファイルに内容を記載すれば勝手に反映されると思ってたんですよね。

また、cssファイルの名称が「styel.css」でない場合には

hrefの部分の名称も変更しないと反映されません。

③

あああ

まとめ

自分で当てたCSSが反映されない…」と悩んだ際は

①「.」や「#」の記入を忘れている、スペルが間違っている

②headタグ内に<link rel="stylesheet" href="style.css">が挿入されているかを確認する

③

を、冷静になって見直すようにしてみましょう。

もしこの記事やブログがためになったという人は、日々の励みになったり活力になりますので

応援メッセージや投げ銭を送ってくれると嬉しいです！