2018.12.29

CSSが効かない時の対処法

先日、はてなブログのCSSを編集していると、突然CSSが反映されなくなるということがありました。気になって調べてみると、他の人も同じようにCSSが反映されなくなることが多々あるようです。

そこで今回は「CSSが効かない時の対処法」をまとめてみました。はてなブログを中心に説明しますが、他のブログでも効果があるので、ぜひ参考にしてみてください。

スマホで反映されない場合はこちらの記事を参考にしてみてください。

CSSの書き間違いをチェック

文法ミスによりCSSが反映されない場合が多いです。ここでは間違えやすいミスを紹介します。

{}を閉じ忘れるとCSSが効かなくなってしまいます。

コメントアウトのとじ忘れでは、それ以降にコメントがない場合全てのCSSが効かなくなってしまいます。ただ、有名なエディターではシンタックスハイライト（コードの色分け）により色で分かります。

セミコロンとコロンも間違えやすいポイントだと思います。特にUSキーボードだと同じキーなので間違えやすいのではないでしょうか。

何個か間違えやすいポイントを挙げましたが、目視ではなかなか見つけづらいと思います。そこで使えるのが文法チェックツールです。W3Cなどのツールを使うことで、自分のCSSのエラーを見つけることができます。

使い方は簡単で、CSSををコピペして「検証する」をクリックすれば検証が始まります。無料かつ簡単に使えるのでよければ使ってみてください。

ブラウザーから使える検証モードを使うことでCSSが反映されない原因を確認できます。検証モードはスマホでの表示やHTML・CSSを編集のデバッグができる便利なデベロッパーツールです。検証モードについて詳しくはサルワカさんのブログを参考にしてみてください。

参考

まずはCSSが反映されていない部分を右クリックして検証を選びます。今回は例として大見出しを選択します。

するとブラウザーの画面右側にHTMLとCSSなどが表示されます。大雑把に説明すると青が検証しているブログ、赤がHTML、緑がCSSを表しています。今回は大見出し（はてなブログではh3）を選択しているので赤枠のHTMLの画面ではh3が青く選択されています。

上の画像で緑枠で囲ったCSSの部分を下にスクロールしていくと、自分が書いたCSSが表示されていると思います。ここで取り消し線が引かれている場合は何かが原因で反映されていないということになります。（下の画像ではきちんと反映されています）

取り消し線が引かれている理由としては、効かせたいCSSの優先順位が低くなっていることや、先程書いた文法エラーが多いです。

が優先順位が原因の場合、同じ部分に対して複数のCSSが重複していることで最も優先順位の高いCSSが効いてしまい取り消し線が引かれて効かなくなってしまいます。

この対策として他のCSSを消去する方法や、CSSにコードを追加する方法があります。すぐに出来る対策としてはCSSで!importantをつける方法があります。

h1 {
  color:#000 !important; /* h1の色を強制的に黒にする */
}

しかし使いすぎはSEO的にもあまり良くないので、注意する必要があります。詳しい対策法はサルワカさんのサイトで解説されています。

参考

これが僕の「CSSが効かなかった」理由です。これが原因だと分かるまでに３時間くらいかかりました。

はてなブログのCSSには書く際にルールがあり、決まった場所に書かないと反映されません。特にはてなブログでテーマを使っている人は、あらかじめ書く場所が決まっていることが多いです。下の画像はデザイン編集のCSSを書くエディターの画面です。

自分でCSSを追加する際は、上の画像のようにコメント/*~~~*/の後に書く必要があります。このようなミスはかなり多いようなので、はてなブログでテーマを使っている人の中でCSSが効かなくて悩んでいる人は確認してみてください。