CSSが効かない時に確認すること

cssを変更したはずなのに変更したcssが効いてないことがありますよね。今回かなりハマったので、健忘録としてまとめておきます。

今回以外にも、過去に何度かCSSが効かなくてハマったことがあるので、CSSが効かない時に私が通常チェックする箇所をまとめました。

今回の症状

WordPressでスマホ用の表示メディアクエリ（@media）を使った部分のcssを変更したのに、PCのChromeで確認したらcssが反映されているのに、safari、iOSのChromeとsafariともcssが反映されていない。

CSSの記述がおかしくないか

全角スペース / “（ダブルクォーテーション）

よくある記述ミスの中でも見つけにくいものが、本来なら半角スペースで記述しなければいけない箇所を全角スペースで記述している場合です。

.hoge{
　display: none;
}

上のコードには「display: none; 」の前のスペースが全角になっています。肉眼で確認するのは難しく、見落としてしまうことが多いので気をつけましょう。正しくはこちら。

.hoge{
 display: none;
}

また、ネットやノートアプリなどからコピペした時など、”（ダブルクォーテーション）が全角になっている時があります。こちらもよくあるミスです。

<div class=“hoge”></div>

上のコードの”は全角になっています。正しくはこちら。

<div class="hoge"></div>

idとclassを間違えている

こちらもよくあるミスですが、idで指定したのにCSSの方ではclassで記述している場合、もしくはその逆です。

HTML
<div class="hoge">
 <p>これはテキストです。</p>
</div>

CSS
#hoge{
 padding:20px;
}

上のコードではHTMLにclassを指定しているのにも関わらず、CSSではid指定の記述をしているのでCSSが反映しません。正しくはこちら。

HTML
<div class="hoge">
 <p>これはテキストです。</p>
</div>

CSS
.hoge{
 padding:20px;
}

コメントアウトの記述は正しいか

これも過去実際にあった間違いですが、コメントアウトが正しく記述されていませんでした。

 / * ここにコメント */

上のコードには「/」の後に半角スペースが入っているので、その後のCSSが認識しません。正しくはこちら。

/* ここにコメント */

コードがしっかり閉じてるか

CSSの一部を削除した場合など、片方の「}」が残ってしまったり、末尾の「}」が削除されてしまったりすることがあります。特にメディアクエリの「}」を閉じ忘れると、それ以降のCSSが効かなくなるので、コードがしっかり閉じてるか確認します。

@media screen and (max-width:768px){
.hoge{
 display: none;
}

上のコードは最後の「}」が閉じ忘れています。正しくはこちら。

@media screen and (max-width:768px){
.hoge{
 display: none;
}
}

更新時にスーパーリロード（強制更新）しているか

CSSを変更した後、通常の更新だけだと変更したCSSが反映されないことがあるので、確認するにはブラウザ上からスーパーリロード（強制更新）する必要があります。

これは以前のCSSデータがブラウザのキャッシュに残っているからで、スーパーリロードすればキャッシュがクリアになって更新されます。大体変更したCSSが反映されていない時は、この場合が多いです。

Macの場合

Google Chrome：command+Shift+R
Firefox：command+Shift+R
Opera：command+Shift+R
Safari：Shift+更新ボタン

Windowsの場合

Internet Explorer：Ctrl+F5、Ctrl+更新ボタン
Google Chrome：Ctrl+F5、Shift+F5、Shift+更新ボタン、Ctrl+更新ボタン
Firefox：Ctrl+F5、Shift+更新ボタン
Opera：F5
Safari：Ctrl+R、Shift+更新ボタン

iPhone(iOS)の場合

スマホでは強制リロードができないので、ブラウザ上のキャッシュを削除してから更新します。

Google Chrome：Chromeブラウザのメニュー＞設定＞プライバシー＞閲覧履歴の消去＞「Cookie、サイトデータ」にチェックを入れて「閲覧履歴の消去」をタップ
Safari：iPhoneの「設定」＞「Safari」を開き＞履歴とWebサイトデータを削除

viewportが設定されているか

レスポンシブデザインでコーディングしている際、メディアクエリを利用するには<head>内にviewportの記述がないと動きません。基本的なことですが、こちらもきちんと記述されているか念の為確認した方が良いでしょう。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

CSSの読み込み順番は正しいか

CSSを外部読み込みしている場合や、ファイルを分けている場合、読み込む順番が違うことで、該当の箇所のCSSが適応されないことがあります。

例えば、mobile.cssをpc.cssよりも前に読み込みをしていてmobile.cssのデザインが反映されない、もしくはその逆で、モバイルファーストで作成しているのに、pc.cssをmobile.cssよりも前に読み込みをしている場合、pc.cssのデザインが反映されない箇所が出てきます。

ベンダープレフィックス（Vendor Prefix）が記述されているか

PCのCSSは反映されているのに、iOSではデザインが反映されていない場合、Vendor Prefixが記述されていないことが原因かもしれません。

display: flex;
flex-wrap: wrap;

例えば上記のようなflexboxコードを使っている場合、iOSのSefari 8以前のブラウザにはVendor Prefix (ベンダー接頭辞)を適用し、下記のように記述する必要があります。

display: -webkit-flex; /* 追加 */
display: flex;
-webkit-flex-wrap: wrap; /* 追加 */
flex-wrap: wrap;

その他にもベンダープレフィックスでないと表示されないブラウザ/CSSがあるので、状況に応じて使用すると良いでしょう。対応状況については以下のサイトで確認することが可能です。

https://caniuse.com/

WordPressのキャッシュをクリアする

WordPressのサイトの場合、ページの読み込みを早くするためにキャッシュのプラグインを使用していることがあります。ブラウザのキャッシュはスーパーリロードでクリアできますが、Wordpressでキャッシュのプラグインを利用している場合は、こちらのキャッシュもクリアしないと変更したCSSは反映されません。

プラグインのキャッシュをクリアする方法は、それぞれのプラグインによって異なるので、それぞれ調べてみてください。

まとめ

私がハマったのは、flexboxとWordpressのキャッシュが原因でした。今回の私のように、CSSが反映されない原因は1つでは無いかもしれないので、焦らず順番にチェックしてみてください。