大阪府豊中市でホームページ制作|スマートフォンアプリ開発を行なっているImpreateSoft（インプレイトソフト）です。
WordPress（ワードプレス）でホームページ制作をしていると、色々とカスタマイズをしたくなることが多くなります。
今回はそのカスタマイズの中でも、デザイン部分としてよくいじるCSSに関してのコラムです。
あれ？なぜか効かないCSS
CSSをいじっていると、たまになぜか効かないことがあるCSS。
今回はそのCSSが効かないときの原因と対処法をいくつかご紹介します。
ブラウザのキャッシュ
ブラウザのキャッシュ機能が邪魔をしていることがあります。
Google Chromeを使っている場合、一番簡単な方法はシークレットウィンドウで対象のページを開くこと。
シークレットウィンドウは、Macの場合「command + Shift + n」キー、Windowsの場合「Ctrl + Shift + n」キーで開くことが出来ます。
サーバーのキャッシュ
ブラウザのキャッシュとは別でサーバー側でキャッシュを持っている場合があります。
この場合は、サーバーのキャッシュを切ることをオススメします。
Xサーバーの場合、mod_pagespeedをOFFにしてください。
また、WordPressのキャッシュ系のプラグインを使っている場合はそれらもOFFにしてみてください。
全角スペースが入っている
意外な落とし穴として存在するのが、CSSのソースコード内に存在する「全角スペース」です。
全角スペースが入っているとCSSのソースコードがうまく動作しなくなるので、テキストエディタなどの検索機能を活用して全角スペースを削除してください。
HTMLのコメントアウトを使っている
CSS内のソースコードのコメントアウトを間違えてHTMLのソースコード「<!–コメント–>」を使ってしまっているパターン。
この場合もCSSのソースコードがうまく動作しなくなるので、上記のコメントアウト文を見つけたら削除しましょう。
ちなみにCSSのコメントアウトは、「/*コメント*/」となります。
セミコロンが抜けている
こちらも意外と忘れがちになるのがセミコロン「;」が、ソースコード内で抜けている場合。
こちらもCSSのソースコードがうまく動作しなくなります。
そのため、機能しないCSSのコード内の近くにセミコロンが抜けていないかをよくチェックしましょう。
まとめ
このようにCSSが効かない原因は様々ですが、案外うっかりミスや設定ミス、キャッシュが関わっている場合などが大変の理由なので、まずは冷静にその辺りの対処をしてみてください。
