CSSが効かない！キャッシュ削除や構文検証してみよう
CSSでサイトデザインをしていると、ふとした時に「CSSが効いてない？」と思うことがあります。
ここでは、CSSが効いてないと思った時に試したい、3つの方法をまとめています。
基本的な部分のチェック
まずは基本的な部分でミスがないか確認してみましょう！
最初からまるっきりCSSファイルが効いてない、という時は、HTMLファイルに書かれているCSSファイルへのパスが間違っている事があるので、フォルダ名や階層数などを、一度チェックしてみましょう。
また、CSSファイルの先頭行に「宣言文」がない時や、CSSファイルから他のCSSファイルを読み込む指定をしている場合は、書く順番によって正しく動作しない事があります。
まずは最初に宣言文があるかをチェック。
CSSファイルから他のCSSファイルを読み込んでいる場合は、宣言文のすぐあとでインポートしているかを確認してみます。
@charset "UTF-8";
@import url("sample.css");
インポートの前に宣言文以外のものがあると、エラーになってしまいます。
ブラウザのキャッシュを削除する
CSSの調整をしていて、途中でCSSが効かなくなった時は、ブラウザのキャッシュを削除してみましょう。
私の場合、CSSが効かないと思う時の90%くらいは、ブラウザのキャッシュが原因です。
キャッシュは素早いブラウジングなどのために、一度読み込んだファイルなどのデータを一時的に保存しておく機能ですが……
CSSをいじっていると、新しいデータを読み込んでくれない原因になったりもします。
そういった時は、ブラウザの「履歴」から「キャッシュを削除」すると解決できます。
ブラウザによって移動の仕方が違いますが、Chromeの場合は、ブラウザのメニューから「履歴」ページへ飛んで、ページのメインメニューから「閲覧履歴データの削除」をクリック。
「キャッシュされた画像とファイル」にチェックを入れて「データを削除」を押せば完了です。
Firefoxの場合は、ブラウザのメニューから「ブラウジングライブラリー」をクリック。
「履歴＞最近の履歴を消去」と進むとポップアップが出てくるので、「キャッシュ」にチェックを入れて「OK」を押せば完了です。
CSS構文検証でエラーをチェックする
それでも解決しない場合は、どこかで構文エラーがあるのかも知れません。
CSSの構文エラーは自分で見るけるのは大変なので、構文チェックをしてくれるWEBサービスを活用してみましょう。
「W3C CSS 検証ページ」では、無料でCSSファイルの構文チェックをしてくれます。
アップロード機能を使うと、一瞬でPCにあるローカルファイルを検証することが出来ます。
構文ミスがある場合は、エラーがあるところを教えてくれるので、CSSファイルの改修に役立ちます。
リンクなどは正確、キャッシュも削除済み、となったら、あとはCSS構文の検証を試してみましょう。
CSS構文の検証は、完成したCSSをサーバーにUPする前に、一度チェックしてみると安心です。
CSSが効かない！余談
CSSが効かない！という時、私の場合はキャッシュ削除でおおよそは解決しますが……
たまに長時間CSSをいじっていると、途中でキャッシュを削除してもCSSが効かない、、、という事もあったります。
ミスもなし、キャッシュ削除もした、構文エラーも心当たりがない。
そういう時は、潔くいったんPCの電源を落として（シャットダウン）、少し時間をおいてから再開したりしています。
そうすると、再開した時に改善している事もあり、何より自分が疲れている場合もあるので、適度に休むようにしています。
ブラウザなどの更新が途中になっている時もうまくう動かない事があるので、PCを常時ネット接続していない時は、ブラウザの更新をかけてみるのもいいかも知れません。
