CSSが適用されない時に確認すべき観点

はじめに

本記事では、文法のミスでCSSが適用されないことについてまとめた。
基本、文法のミスはケアレスミスでおきることだが、
そのケアレスミスで時間を奪わないように気を付けたい。

結論から

CSSが適用されないケースは下記の通り
■タグやクラスの記述間違い
■複数のタグやクラスを指定しているとき、HTMLに半角スペースを入れていない
 ※または、半角スペースが全角スペースになっている
■CSSの「{}」「:」「;」の記述漏れ

詳細

『タグやクラスの記述間違い』

よく起きるのがHTMLで記述されたクラスとCSSで指定したクラスが異なることだ。
タグは短いものが多いため間違うことはあまりないが、クラスは自分で設定することができるため、
HTMLとCSSで一致してないことがある。

[HTML]

<div class="practice ">
  <p>HTML</p>
</div>

[CSS]

/*本来は指定するクラスを"practice"とすべきだが、スペルミスによりCSSが適用されない*/
.praktice {
  color: white;
}

対策：HTMLで記述したクラスをCSSで指定する際、打たずにコピぺする。
（対策があまりにアナログで申し訳ないが、大切なことなので記述させていただく）

『複数のタグやクラスを指定しているとき、HTMLに半角スペースを入れていない』
 ※または、半角スペースが全角スペースになっている

[HTML]

<!--半角スペースが入っていない-->
<a class="btnlogin">ログイン</a>

<!--半角スペースが全角スペースになっている-->
<a class="btn　login">ログイン</a>

<!--正-->
<a class="btn login">ログイン</a>

半角スペースが入っていない場合、確認すれば見つけることが可能だ。
しかし厄介なのが、全角スペースが入っている場合だ。
全角スペースの場合、自身の目で見抜くのはなかなか難しい。

対策：常時「スペース」（空白）を半角で入力する設定にしてしまう

※常時「スペース」（空白）を半角で入力する設定

windows10

①IMEのオプションを右クリック
 ※Google 日本語入力（IME）のインストールがされていない場合、下記のリンクを参照
  Windows10 - Google 日本語入力（IME）のインストール

②プロパティを選択

③詳細設定を選択

④スペースの入力を常に半角にして「適用」を押し、「OK」を押す

macOSの場合

①IMEのオプションを右クリック
 ※Google 日本語入力（IME）のインストールがされていない場合、下記のリンクを参照
  Mac - Google 日本語入力（IME）のインストール

②環境設定を選択

③スペース入力を半角にし、「適用」、「OK」を押す

※Windows10もmacも半角を選択している状態で全角スペースを入力したい場合は、
「Shift」+「Space」で入力できます。

『CSSの「{}」「:」「;」の記述漏れ』

[CSS]

/*「{}」の記述漏れ*/
p {
  color: white;

/*「:」の記述漏れ*/
p {
  color white;
}

/*「;」の記述漏れ*/
p {
  color: white
}

対策：言語を補完してくれるようなテキストエディタを使用する 例：VSCode等
（簡易な説明で申し訳ありません。）

まとめ

ケアレスミスで時間を費やすことは非常にもったいないことです。
自分なりにどうやったらケアレスミスを減らせるかを考えて対策を打つべきでしょう。
システムが補完してくれるのであれば、全力で頼るのも手段の一つではあると思うます。
本記事で少しでも参考にすることがあればと思います。
また、他にもケアレスミスを減らすいい方法があれば、ご教授いただけたら幸いです。

※今回文法のミスを記載しましたが他にもCSSが適用されないケースはあります。
下記にも参照を記述しておきます。
サルワカ（CSSが効かない・反映されないときの対処法まとめ）