CSSが効かない・反映されない原因と直し方チェックリスト

見本サイトからCSSをコピペしたのに、なぜか見た目が変わらない。
そんな経験はありませんか？

これはCSSを触る人ならほぼ全員が一度は通る道です。
原因は、だいたい決まったパターンに絞られます。

この記事では、CSSが効かない・反映されないときの原因を、よくある順番にチェックリスト形式でまとめました。
上から順に確認していけば、ほとんどの場合は自分で直せますよ。

それでは、ひとつずつ見ていきましょう。

CSSが反映されないときは、まずキャッシュを疑う

CSSを正しく書いたのに反映されないとき、いちばん多い原因がキャッシュです。

キャッシュとは、ページの表示を速くするために、ブラウザやサーバーが一時的に保存している古いデータのことです。

この古いデータのほうが表示されていると、CSS自体はきちんと追加できているのに、見た目は変わらないままになります。

ブラウザのスーパーリロードを試す

まず試してほしいのが、キャッシュを無視してページを読み込み直す「スーパーリロード」です。

これだけで直るケースがかなり多いので、CSSを変更したら毎回やる癖をつけておくのがおすすめです。

スマホで確認している場合は、ブラウザの設定から閲覧履歴とキャッシュを削除してみてください。

プラグインとサーバーのキャッシュも確認する

スーパーリロードで直らないときは、WordPress側とサーバー側のキャッシュを疑います。

また、レンタルサーバー側にもキャッシュ機能があります。
たとえば私が使っているロリポップには「ロリポップ！アクセラレータ」というキャッシュ機能があり、これが有効だとCSSの反映が遅れることがあります。
ユーザー専用ページからキャッシュのクリアができるので、心当たりがある方は確認してみてください。

エックスサーバーなど他のサーバーにも同じようなキャッシュ機能があるので、お使いのサーバーの管理画面を一度のぞいてみるのがおすすめです。

コードの書き間違いがないか確認する

キャッシュを消しても変わらないときは、コード自体の書き間違いを疑いましょう。
CSSは1文字違うだけで動かなくなる、なかなか厳しい世界です。

全角スペース・全角記号がまざっている

日本語ユーザーの場合、いちばん多いのが全角文字がまざっているケースです。

見た目はほとんど同じなのに、全角スペースや全角のコロン・セミコロンが1つあるだけで、そこから先のCSSが効かなくなります。

/* NG例：全角スペースと全角記号がまざっている */
.sample {
　color：red；
}
/* OK例：すべて半角で書く */
.sample {
color: red;
}

NG例は、行の頭に全角スペース、コロンとセミコロンに全角記号を使っています。
並べてみても、ほとんど見分けがつきませんよね。

対策は、コードを書くときに日本語入力をオフにしておくこと。
そして怪しいときは、疑わしい行をいったん消して半角で打ち直すのが確実です。

セミコロンや閉じカッコの付け忘れ

もうひとつの定番が、行末のセミコロン（;）や、閉じカッコ（}）の付け忘れです。

/* NG例：セミコロンを忘れると、前後の行を巻き込んで効かなくなる */
.sample {
  color: red
  font-size: 18px;
}
/* NG例：閉じカッコを忘れると、それより後ろのCSSが効かなくなる */
.sample {
color: red;

.sample2 {
font-size: 18px;
}

セミコロン忘れはその前後の行だけに影響しますが、閉じカッコ忘れはそれ以降のCSSすべてに影響します。

「途中までは効いているのに、ある場所から下が全部効かない」というときは、閉じカッコ忘れをまず疑ってみてください。

クラス名とセレクタが合っているか確認する

コードにミスがなさそうなら、次はHTMLとCSSの対応を確認します。

HTMLのclassとCSSのセレクタは対応している？

CSSは、HTML側のclass属性と、CSS側のセレクタ（どこに効かせるかの指定）が一致してはじめて効きます。

<div class="sample-box">この箱に色をつけたい</div>

/* OK例：クラス名の前にドットを付ける */
.sample-box {
  background: #f0f8ff;
}
/* NG例：ドットがないと「sample-boxというタグ」を探しにいってしまう */
sample-box {
background: #f0f8ff;
}

クラス名をセレクタに使うときは、先頭のドット（.）を忘れないようにしましょう。

スペルミスとコピペ漏れ

クラス名のスペルミスも定番です。
buttonがbuttunになっていたり、ハイフンとアンダースコアを取り違えていたり。

また、当ブログのようなコピペ見本を使う場合、HTMLとCSSはセットでコピーする必要があります。
CSSだけコピーしてクラス名を自分で書き写すと、写し間違いが起きやすいので、なるべく丸ごとコピペしてくださいね。

CSSを貼る場所が間違っていないか

コードが正しくても、貼る場所を間違えると効きません。

CSSは「追加CSS」に貼るのが基本

WordPressでCSSを追加する場所は、管理画面の［外観］→［カスタマイズ］→［追加CSS］が基本です。
SANGOをはじめ、多くのテーマでこの場所が使えます。

追加CSSに貼っておけば、テーマを更新してもCSSが消えません。
初心者の方は、まずここに貼るのがおすすめです。

カスタムHTMLブロックにCSSだけ貼っても効かない

記事の中にデザインを入れたいとき、カスタムHTMLブロックを使うことがあります。
このとき、CSSだけをそのまま貼っても効きません。

カスタムHTMLブロックの中身はHTMLとして扱われるため、CSSはstyleタグで囲む必要があります。
囲まずに貼ると、CSSがただの文字としてそのまま画面に表示されてしまいます。

<style>.cw-sample { color: red; }</style><p class="cw-sample">この文字が赤くなります</p>

CSSの優先順位で負けていないか

ここまで確認しても効かない場合、CSSどうしの優先順位で負けている可能性があります。

基本は「あとから書いたほうが勝つ」

同じ相手に同じ指定をした場合、CSSはあとから読み込まれたほうが勝ちます。

.sample {
  color: red;
}
.sample {
color: blue; /* あとに書いたこちらが勝って、青になる */
}

ただし、セレクタの書き方が具体的なほど強くなるというルールもあります（正式には詳細度と呼ばれます）。

/* タグ名+クラスの指定は、クラス単独より強い */
p.sample {
  color: green; /* 先に書いても、こちらが勝つ */
}
.sample {
color: blue;
}

「あとに書いたのに効かない」ときは、先に書かれたCSSのほうが具体的で強い、というケースが多いです。

!importantは最後の手段として正しく使う

どうしても勝てないときの切り札が!importantです。
指定の後ろに付けると、優先順位を無視して最優先で適用されます。

.sample {
  color: red !important;
}

ただし、!importantだらけになると、あとから自分が上書きしたくなったときに苦労します。
まずはセレクタの見直しで対応して、どうしても必要な場所にだけ使うのがおすすめです。

テーマのデザインが強くて上書きされる場合

WordPressの場合、テーマ自体が持っているデザインに負けているケースもよくあります。

たとえば当ブログで使っているSANGOは、フォームやテーブルにあらかじめきれいなデザインが用意されています。
その分、自分のCSSで上書きしようとすると、テーマ側の指定が強くて効かないことがあるんです。

実際、当ブログのフォームデザインの見本とテーブルデザインの見本では、SANGOで確認したところ、背景色や枠線、角丸、影の指定に!importantが必要でした。

/* SANGOでテーブルの枠線を変えたいときの例 */
.cw-table th,
.cw-table td {
  border: 1px solid #d8d8d8 !important;
}

逆に言うと、テーマが変われば必要な書き方も変わります。
他のテーマでは!importantなしで効くことも多いので、「見本どおりに貼ったのに効かない」ときは、お使いのテーマのデザインが強い可能性を疑ってみてください。

検証ツールで「効かない原因」を突き止める

「どのCSSが勝っているのか分からない」というときに役立つのが、ブラウザに最初から入っている検証ツールです。
少しだけレベルアップした方法ですが、使えるようになると原因探しが一気に楽になります。

開き方は次のとおりです。

使い方は、次の3ステップだけ覚えれば十分です。

このとき、打ち消し線が引かれているCSSがあれば、それは他のCSSに上書きされて負けているサインです。
どのCSSに負けているかもその場で分かるので、セレクタを見直すか!importantを付けるかの判断ができます。

自分の書いたCSSがそもそも一覧に出てこない場合は、クラス名の間違いや貼る場所の間違いなど、前半のチェック項目に戻って確認してみてください。

それでも直らないときの細かい落とし穴

最後に、見落としやすい細かい原因をまとめておきます。

メディアクエリの範囲外で確認している

スマホ用のCSSをメディアクエリ（画面幅による切り替え）の中に書いた場合、パソコンの広い画面ではそもそも適用されません。

/* 画面幅600px以下のときだけ効くCSS */
@media (max-width: 600px) {
  .sample {
    font-size: 14px;
  }
}

「スマホでは効くのにパソコンでは効かない」ときは、まずメディアクエリの範囲を確認しましょう。
逆のケースも同じです。

hoverなどの綴りミス

:hover（マウスを乗せたとき）などの指定は、綴りを1文字間違えるだけで丸ごと無効になります。
hoberやhorverになっていないか、見直してみてください。

beforeやafterのcontent忘れ

::beforeや::afterで飾りを付けるタイプのCSSは、contentの指定が必須です。
中身が空でもいいので、content: “”; が入っているか確認しましょう。

/* contentがないと、::beforeは表示されない */
.sample::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #7fb69e;
}

コメントの閉じ忘れ

CSSのコメントは /* から */ までがひとまとまりです。
閉じの */ を忘れると、そこから先のCSSがすべてコメント扱いになって効かなくなります。

/* 閉じ忘れの例：ここから下のCSSがすべてコメント扱いになる
.sample {
  color: red;
}

まとめ：上から順にチェックすれば直せる

最後に、この記事のチェックリストをまとめておきます。

CSSが効かないときは焦りがちですが、原因はこの記事のどれかに当てはまることがほとんどです。
上から順に落ち着いて確認すれば、きっと直せますよ。

デザインの見本を探している方は、こちらの記事もあわせてどうぞ。