ゼロイチ

WordpressやWEB技術ネタ

開発

CSSが効かないと思ったらチェックすること

投稿日:2016年8月11日 更新日:

コーディングしているときに、「あれ、CSSが効かねえ」って小ハマりすることありますよね。

・CSSファイルを更新したのに、反映されない

・CSSファイルが反映されているのに新規記述が読み込まれない

CSSが効かない原因はたいてい単純な問題なことが多いです。焦って無駄な記述を増やしてしまわないよう落ち着いてチェックしていきましょう。

初級〜中級者の方向けのチェック方法をご紹介します。

 

すんません、キャッシュじゃないですか?

ファイルを修正したのに、チェック担当者に「あれ、まだなおってないんだけど」と言われたら、まず疑うのがキャッシュです。WEBに疎い人は、なぜか毎回キャッシュのせいで騒いでいます。ブラウザのキャッシュをクリアしましょう。

他のキャッシュ対策テクニックとしては、ファイルを読み込む記述 href=”example.css” に引数を付けて href=”example.css?20160811″ とかにすれば別のファイルと認識し、新規のファイルとして読み込んでくれます。

まず、ファイルちゃんと読み込んでますか?

ファイルをちゃんと読んでいるかとりあえずチェックです。style.cssを読んでいるつもりが、記述がrel=”styl.css”になっていてファイルがそもそも読み込まれていないパターンです。また階層に関しても注意です。相対パス、ルート相対パス、絶対パスなどです。怪しい場合は、実際にブラウザにURLを入力して、ファイルが存在するか確認しましょう。

 

きみ〜、クラス名が違っているよ

結構やっちゃいますね。単純にIDの【#】とクラス名の【.】を間違えていたり、コピペミスで一部の文字が切れていたりします。

コラ!書式が間違っているよ

セミコロン【;】が抜けていたり、コロン【:】になっていたりの書式ミスもよくあります。

あとは全角文字列が入っていたり、コメントの入れ方が問題のケースもあります。

だめだよ。クラス名が数字から始まっている文字列

最近やらかしました。クラス名には数字は使えるのですが、先頭で使ってはいけません。たとえば、【100en-item】とかだといつまでたっても反映されません。5分くらい「あれー、あれー」状態でした。こんなときは【item-100en】とかにしておきましょう。

一番多いと思います。CSSの適用順序の問題

CSSには適用の優先度があります。ざっとあげると以下のようなルールです。

  • 後から記述したほうが適用される
  • クラス名指定よりID名指定のほうが優先度が高い
  • 階層指定が深いほうが優先度が高い
  • !importantは最強

 

まとめ

CSSが効かない原因はの適用順序の問題がほとんどじゃないでしょうか。それでもうっかり、上記のようなミスをしてしまうことがります。

お役に立てれば幸いです。

PR

PR

-開発
-

管理人

関連記事

git init した時にエラーになる時に対処法

git init した時にエラーになる時に対処法 Reinitialized existing Git repository in Gitリポジトリは既に作成されているのでinitする必要はない場合に …

CSSスプライト用の画像を簡単に作成できるCSS Sprite Generatorが便利

サイト高速表示のために使える技術は全て導入すべきです。高速化技術の中でもメジャーなのがCSSスプライトです。 でも、CSSスプライト用の画像を作成するのって大変ですよね。 間隔調整とかも大変ですが、画 …

GAEでのSSL独自ドメイン設定手順(ムームードメイン)

GAEでの独自ドメイン設定手順(ムームードメイン)をご紹介します。 目次1 ドメインは最初に取得しておく2 GAEの設定画面より認証用テキストを取得する3 ムームードメイン管理画面にてTXTレコードを …

ChromeのCookieを個別に削除する2つの方法。設定画面から or デベロッパーツールから

「あー、Cookie削除したい」 「でも全部消すのは嫌だ!」 ChromeのCookieを削除したいと思っても全て消してしまうのは困りますね。他のサイトのログイン情報は残しつつ、該当のサイトのCook …

「下書きをプレビューする権限がありません。」→ありますよ?【WordPress】

WordPressで記事を編集し、さてそろそろレイアウトを確認しようかな。プレビューボタンをポチッとな。 下書きをプレビューする権限がありません。 いやいや権限はありますよ!だって登録ユーザって私だけ …