こんにちは、マークアップエンジニアの草野です。
CSSを書いていると、時々思ったような表示にならないことがあって困りますよね?
特に初心者の頃は何が原因なのか見当がつかず、無駄に時間だけが過ぎていくなんていうこともあるかと思います。
そこで今日は、特に初心者が自分で書いたコードがうまく表示されない場合にどうやって問題箇所を特定していけば良いのか紹介したいと思います。
【1】ツールを使ってミスをチェック
HTMLの文法チェック
まず最初に、W3Cの文法チェックツールなどを使って、HTMLの文法チェックを行い、構文エラーが無いかどうか確認しておきましょう。
HTML側に重大な構文エラー存在していると、それが表示崩れの原因だったりすることもあるからです。問題が確実にCSS側にあることを確認するためにも、HTMLはクリーンな状態にしておく必要があります。
CSSの文法チェック
次に、CSSをW3Cの文法チェックツールなどを使ってチェックします。単純なスペルミスなどであればツールが確実におかしいところを見つけて教えてくれます。
なお閉じカッコが抜けている等の重大な構文エラーがある場合は「文法解析エラー」として解析エラーが発生した箇所のセレクタ名と行数を教えてくれますが、「閉じカッコがありません」等の具体的なエラー箇所は教えてくれませんので、それは自分で探す必要があります。
デベロッパーツールで現在のCSS適用状況をチェック
Google Chrome Developer Toolは、Chromeに付属している開発者ツールです。
表示がおかしいと思われる要素をブラウザの画面上で右クリック→検証で呼び出すと、
該当の要素に現在適用されているCSSのスタイルの状態を確認することができます。
もしスペルミスや利用できないプロパティなどの記述があった場合には図のような表示でスタイルが適用されていないことを視覚的に示してくれます。
その記述がどこに記載されているかは、セレクタの右肩にファイル名と行数が表示されますので、目視で探すより遥かに早く修正箇所を特定することができます。
また、次のような表示になっている場合は、他のセレクタによって上書きされていることを示しています。
複数のセレクタから同時に同じ要素・同じプロパティに異なる値が指定された場合、CSSセレクタの仕様に従って優先順位・あるいは詳細度の高いセレクタで指定された値が反映され、他の指定は無視されてしまいます。
自分で書いたCSSなら身に覚えがあるかもしれませんが、他人が書いたCSSの一部を編集している場合、他にどんな指定がされているのか全てを把握することは困難ですので、そのようなケースでは特に重要な機能になります。
今回は各種チェックツールを使って問題箇所を特定する方法を紹介しました。
これらについては既に活用している人も多いかもしれませんね。
次回は、目視など自力で不具合箇所を特定する際にチェックする項目を紹介したいと思います。