プログラミング覚え書き

WEB製作覚え書き

ノート代わりに勉強した内容をまとめています。

CSS:エラー箇所確認方法

 

エラー箇所特定手順

1.ブラウザで確認
2.問題個所を検証ツールで選択

 

CSSパネルの状態

1.「!」と打消し線が表示されている

 ◇問題個所
 タイプミスの可能性が高いので対象プロパティを再確認
 ※「!」がない場合は優先度で採用されていない

 

   f:id:midori_x:20191216111903p:plain

  

2.「!」と打消し線が表示されている&値にプロパティ名が含まれている

 ◇問題個所
 セミコロン忘れ、もしくは全角「;」かも

    f:id:midori_x:20191216112227p:plain

 

 

3.記述したはずのセレクタごと表示されない

 ◇問題個所
 表示されないセレクタより上にある
 「{}」のセットがどこかで崩れている
 もしくは「{}」が全角で記述されている可能性あり

 

4.「!」と打消し線が複数表示されていて値がない

 ◇問題個所
 プロパティ名の後に「:」ではなく「;」を記述