こんにちは、マークアップエンジニアの草野です。
今回はCSSが思うように表示されない場合、どういう点に注目すれば原因にあたりをつけることができるか、
という点に着目して自力で不具合箇所を特定するために必要なチェック項目を紹介します。
【２】目視・自力で不具合箇所を特定
HTMLとCSSの紐付けに問題がある場合
一部のスタイルだけが適用されないのではなく、そもそもCSS自体が全く効いていない状態で表示される場合は、そのCSSファイルがHTMLに正しく紐付けされていない可能性が高くなります。CSSへのファイルパスや、指定しているファイル名の指定を再確認しましょう。
特定のセレクタに記述したスタイルだけ全く効かない場合
ある特定のセレクタに対してだけ、何を指定しても一切スタイルが反映されない場合は、プロパティではなくセレクタの記述に問題がある可能性が高くなります。指定したセレクタのスペルが違っていたり、指定したセレクタで目的の要素が正しく指定できていないようなケースが考えられます。セレクタ名というのはユーザが任意で設定するものであるので、ツールで自動的にエラーを見つけることが困難です。従って、自分で「あ、これはセレクタが効いてないな」ということに気づく必要があります。
セレクタが効いていなければ、全てのスタイル指定は一切無効となりますので、そこが判断ポイントとなります。
気づきにくいうっかりミスの場合
初心者にありがちなうっかりミスのうち、気付きにくいものに次の項目があります。
1.全角文字の混入（特に全角スペース）
2.編集後の未保存
3.編集しているファイルとブラウザで表示しているファイルが違う
いずれも無意識でやっている場合が多いので、案外自分で気づくのが難しかったりします。
こういうこともある、という可能性を頭に入れておきましょう。
CSS仕様通りの挙動の場合
例えばdisplay:block;が指定されている要素ではvertical-alignが無効となるなど、CSSの仕様で無効となるケースが定義されているようなものは、いくら指定しても反映されません。仕様に沿った形でデザインを再現するようにプロパティの指定方法を再検討する必要があります。デベロッパーツールで確認すれば適用されていないことは確認できますが、「なぜ適用されないのか？」という原因については仕様を知識として知っていないと回避方法や代替手段なども見つけられないため、初心者がつまづきやすいポイントです。これについては仕様解説をきちんとしている技術書やブログ記事などで地道に勉強しましょう。
ブラウザキャッシュの問題
編集内容をサーバにアップロードして確認しているような場合、外部CSS、JS、画像などのファイルがブラウザにキャッシュされており、単純な再読込ではキャッシュのほうが読み込まれて最新のデータが反映されないことがあります。
ブラウザのキャッシュを削除して再読込したり、該当ファイルを直接ブラウザで開いて再読込することを試してみましょう。
ブラウザ側のサポート状況の問題
指定したプロパティによっては、ブラウザ側がそもそもサポートしていない、あるいはバグにより正しく表示できないという状況もあり得ます。特定のブラウザ環境でだけ表示がおかしい、といったケースの場合はブラウザのサポート状況を調査する必要があります。
ブラウザ環境ごとのサポート状況を知りたい場合には「Can I use…」で該当のプロパティ等を検索してみましょう。また、バグについては「“ブラウザ名” “起こっている現象” バグ」といったキーワードで検索してみると解決策が見つかりやすくなります。
まとめ
いかがでしょうか？ CSSが反映されない事態に遭遇すると、つい真っ先に「ブラウザのバグ」を疑ってしまうかもしれませんが、今のブラウザ環境ではバグによって表示がおかしくなるケースはむしろ稀で、大半がユーザー自身のミスか、CSSの仕様を知らないだけ、といったことが原因です。
ツールを活用することで原因特定を簡単にすることもできますが、ツールでは見つけられない問題も多々あります。
自力で原因の特定と解決ができるように「どういうミスが有りうるのか？」ということを頭にいれておきましょう。
