CSSの変更がブラウザで反映されないときにチェックすべきこと

テンプレートの色やフォントを変えて、より自分好みのデザインにするには、CSSの編集が不可欠です。

しかし、サイトのCSSを書き換えたはずなのに、ブラウザで見るとなぜか反映されない場合があります。どうして反映されないのか分からず調査に時間を食ってしまい、途方に暮れることも……。

この記事では、CSSが上手く反映されないときにチェックすべき項目を紹介します。上から順番にチェックしていけば、きっと反映されるように修正できるはず。ぜひ参考にしてみてください。

ブラウザにキャッシュが残っていないか

最もよくあるのがこのパターンです。

サイトを訪問するたびに、画像やCSSなどのすべてのファイルをサーバーから読み込んでいると、読み込むファイルの容量が膨大になるため、表示が遅くなってしまいます。

サイトの読み込みを高速化するため、ブラウザにはキャッシュという機能が搭載されています。一度訪問したサイトのファイルをPC・スマホなどの端末上に保存しておいて、次に訪問したときには端末上に保存しておいたファイルを使って表示する、というものです。

ブラウザに、前回サイトを訪問した際のキャッシュが残っていると、せっかくCSSを書き換えてアップロードしても、前回読み込んだときのCSSが適用されてしまいます。そのため、CSSの変更が反映されていないように見えることがあるのです。

この現象は、ブラウザのキャッシュをクリアすることで解決します。キャッシュをクリアする方法はブラウザによって違うため、「お使いのブラウザ名＋キャッシュクリア」などのワードでGoogle等で検索してください。

キャッシュをクリアしてページを再読み込みすれば、最新のCSSが適用されて、問題が解決する場合があります。それでも解決しなければ、次の項目をチェックしてみてください。

CSSのキャッシュを残さず毎回リロードさせる方法

実は、CSS読み込みタグに少し追記すると、CSSを更新するごとに訪問者に読み込みしなおさせることもできます。詳しくは以下の記事をご参照ください。

サイト更新ごとにCSSファイルを新しく読み込ませてキャッシュ問題を回避する方法

サイト内のCSSファイルに変更を加えたとき、訪問者にキャッシュを読み込ませず、CSSファイルの更新ごとに新しいファイルを訪問者に読み込ませる方法を紹介します。HTMLベタ打ちサイトの場合と、PHP製サイトの場合のやり方を解説。

CSSの文法は間違っていないか

CSSに限ったことではありませんが、プログラミング言語を扱うときは、余計な1文字が入ってしまったり、逆に1文字だけ足りなかったりするだけで、意図通りに動かなくなってしまいます。よくある文法の誤りは以下の４つです。

波カッコの数が合っていない
スペースが全角になっている
行末にセミコロンの打ち忘れ
クオーテーションマークの誤り

ひとつずつ、具体例を紹介します。CSSの記述が正しく書けているか、一箇所を編集するごとに、細かく確認するクセをつけましょう。

波カッコの数が合っていない

CSSを記述している波カッコ {} の閉じカッコが抜けていたり、逆に余分だったりすると、CSSがうまく動かない原因になります。

body {
padding: 0px;
margin: 0px;

a {
text-decoration: none;
color: pink;
}
}

通常、CSSで波カッコが二重になることはありません。しかしレスポンシブ対応のテンプレートでは、波カッコが一部で二重の入れ子構造になっていることがありますので、注意して編集しましょう。

下の例では、最初の header h1 では波カッコが一重ですが、最後の header h1 では波カッコが入れ子で二重になっています。この場合は特に誤りではなく、これで正常に動作します。

header h1 {
  font-size: 40px; 
  /* 基本のフォントサイズが40px */
}

@media screen and (max-width: 767px) {
  header h1 {
    font-size: 25px;
    /* ウインドウの横幅が767px以下のときはフォントサイズ25px */
  }
}

詳しくは「レスポンシブ対応の記述になっていないか」の項目を参照してください。

スペースが全角になっている

半角スペースであるべきところが全角スペースになっている、といううっかりミスもありがちです。

div.box {
padding: 10px;
margin: 20px auto;
background-color:　#fcfcfc;
}

上の例では #fcfcfc; の直前が全角スペースになっています。ぱっと見ただけでは半角なのか、全角なのか判断できません。

テキストエディタには検索機能がついているはずなので、全角スペースで検索してみて、不要なところに入っていないか確認しましょう。

行末にセミコロンの打ち忘れ

CSSでは、ひとつの値を書くごとに、行末に半角セミコロン ; を打つ必要があります。これを打ち忘れたり、半角コロン : を間違えて打ってしまったりすると、CSSが効かなくなります。

a.btn {
display: block;
color: white
background-color: black;
padding: 3px 20px;
}

クオーテーションマークの誤り

フォントを指定する場合などに、フォント名を半角ダブルクオーテーション "" もしくは半角シングルクオーテーション '' で囲む必要があります。

しかし、ここを誤って全角にしてしまったり、よく似た別の記号 `` にしてしまうと、CSSが効かなくなってしまいます。

font-family: `メイリオ`, Meiryo,sans-serif;

他のCSSの記述が優先されていないか

CSSには優先順位が設定されていて、優先順位の高いものほど優先して適用されます。あなたの記述したCSSよりも優先順位の高い記述が、実はCSS内に存在しているかもしれません。

以下に基本的なCSSの優先順位の決まりを紹介します。ただしCSSの優先順位は、それぞれの決まりが絡み合うことでかなり複雑になり、Web制作のプロでも間違うことがあるくらいです。なので、あくまで参考程度にしてください。

ちなみに、紹介しているもののうち、上から下へ向かうにつれて優先度が低くなります。

!importantが最も優先される

a {
color: black !important;
}

a {
color: pink;
}

CSSでは、値の後に !important と書き足すことで、その記述を優先させることができます。

上の例では a に対して color: black と color: pink のふたつの値が指定されていますが、 !important の付けられている black が優先されます。

IDが指定されると優先度が上がる

例えば、以下のようなHTMLが書かれていたとします。

<a id="example" href="#">リンク1</a>
<a href="#">リンク2</a>

これに対して、CSSが以下のように書かれています。

a#example {
color: black;
}

a {
color: pink;
}

CSSで、半角シャープ # が頭についているものは、HTMLに与えられたIDを表します。

この場合、「リンク2」の文字列はピンク色になりますが、ID「example」がついているほうの「リンク1」は黒になります。

クラスが指定されると優先度が上がる

IDと同様、CSSでクラスが指定されていると、クラスが指定されていないものよりも優先度が上がります。

a.example {
color: black; 
}

a {
color: pink;
}

CSSで、半角ドット . が頭についているものは、HTMLに与えられたクラスを表します。

この場合、クラスを持たないaリンクはピンク色に、exampleクラスを持つリンクは黒になります。

ただし、クラスとIDでは、IDの方が優先順位が高くなります。

CSSが入れ子で書かれていると優先度が上がる

例えば、以下のようなHTMLがあるとします。

div a {
color: pink;
}

a {
color: black;
}

div a のように半角スペースで区切って書くことで「divの中のa」という意味になります。

このように書くと、普通のaリンクは黒に、div要素の中に入っているaリンクはピンク色になります。

下の方に書かれていると優先度が上がる

CSSの指定そのものの優先度が同じ場合は、下に書かれている方が優先されます。

a {
color: pink;
}

a {
color: black;
}

このような場合、リンクの色はピンクではなく黒になります。

レスポンシブ対応の記述になっていないか

レスポンシブ対応とは、スマホから見てもパソコンから見てもデザインが崩れないようなWebデザインのことを指します。当サイトで配布しているテンプレートはすべてがレスポンシブ対応デザインです。

レスポンシブ対応サイトのCSSでは、見ている端末の横幅に応じてCSSを切り替える仕組みになっています。例えば以下のような感じです。

header h1 {
  font-size: 40px; // 基本のフォントサイズが40px
}

@media screen and (max-width: 767px) {
  header h1 {
    font-size: 25px; // ウインドウの横幅が767px以下のときはフォントサイズ25px
  }
}

この例では、header内のh1のフォントサイズが、通常は40pxですが、ウインドウの横幅が767px以下（スマホサイズ）のときは、フォントサイズを25pxに切り替えています。

@media screen and (max-width: 767px) { ～ } の波カッコの中に書かれているCSSは、ブラウザのウインドウの横幅が767px以下のときのみ適用されます。

同じheader h1でも、条件によって値が変わるように、CSSファイル内の２か所で値を指定されているというわけです。

CSSを書き換えても、該当する部分がレスポンシブ対応になっていると、実は別のところでも端末の横幅に応じて値を指定されていて、デザインが反映されていないように見える場合があります。キャッシュをクリアしてもCSSが反映されない場合は、同じ要素のCSSが別のところでも指定されていないか確認してみてください。

必殺技！CSSの検証ができる「デベロッパーツール」

さて、ここまでCSSが効かないときに考えられるいろいろな原因を紹介してきましたが、ひとつひとつ丁寧に見ていくのは少し骨が折れそうです。

そこで、ブラウザに備えられている「デベロッパーツール」という便利なツールを使ってみましょう。このツールを使えば、ブラウザでのサイトの実際の表示を見ながら、どの部分にどんなCSSが効いているかを検証することができます。

詳しい使い方は、下の記事で詳しく紹介しています。ぜひ使ってみてください。

デベロッパーツールの使い方を画像付き解説！CSS編集の強力な味方にしよう

CSSを編集してサイトをカスタマイズしたいけど、どういじればいいの？思うようにカスタマイズできない……。デベロッパーツールを使えば一発解決！ブラウザからCSSの編集・プレビューをすることができる、Web制作者にとっては心強いツールです。この記事ではデベロッパーツールの使いかたを画像付きで解説します。