CSSが反映されない・読み込まない4つの原因!

ABOUTこの記事をかいた人

イクミヤ

1987年2月生まれ。大阪在住。
このブログは2017年5月から運営、主にワードプレスやSEOについて書いています。フォローして頂ければ幸いです。

スポンサーリンク

どうも!イクミヤです!

サイト運営者なら一度はCSSが反映せずに困った経験があるのではないでしょうか?

当ブログもCSSが反映されずに困った経験があるので「CSSが反映しない原因」について解説していきます。

1.CSSの文法ミス

HTMLやCSSはサイト運営する上で欠かせないものですが、1文字でも間違えれば正常に表示されないので初心者にとっては難しいものになります。

CSSが反映されない原因として、よくある記述ミスについて例を挙げていきます。

1-1全角での入力

原則CSSは半角で入力しなければなりません。一部を誤って全角で入力すると正しく機能しません。

上記の記述は文法ミスが無いように思われますが”transparent 70%”の間の部分に全角スペースが使われています。

1-2スタイルの閉め忘れ

CSSの記述の際には最期に}を付けましょう。

1-3 ;と:を間違える

とても間違いやすく似ていますが目的が違うので,気をつけましょう。

プロパティの後ろに:を付けて開始を宣言してその後に値を記述。値が複数有る場合はブランクで区切る。

値の終りを指定するのが;です。

2. W3CのCSS文法チェッカー

W3Cが運営しているCSSの文法をチェックしてくれるサイトです。

日本語表記でとてもわかりやすく初心者におすすめです。

W3C CSSチェッカー

3.キャッシュが原因

ウェブサイトを高速で表示するために前回開いたウェブサイトのデータを保存して同じウェブページを開く時に速く表示する機能をキャッシュと言います。

3-1chromeが原因

Googleのクロームにはキャッシュ機能があり、その機能が原因でCSSが反映していない場合があります。別ブラウザーで確認すると反映している時は、これが原因になっていることが多いです。

3-1-1chromeをキャッシュする方法

クロームの赤い部分をクリックします。

設定をクリックします。

一番下までスクロールして詳細設定をクリックします。

スポンサーリンク

プライバシーとセキュリティのカテゴリにある「閲覧履歴データを削除をクリック」

閲覧履歴データを消去するをクリックして完了です。

これでクロームに保存されていたデータは消去されたので、キャッシュが原因の場合は解決されるでしょう。

3-2キャッシュプラグインが原因

CSSが表示されない原因はchromeと同じ原理ですが、ワードプレスを利用している方の大半はキャッシュプラグインを利用しています。

ワードプレスを利用している方はchromeのキャッシュ、プラグインのキャッシュを実行しましょう。当ブログはキャッシュプラグインが原因でしたがwp fastest cacheでキャッシュを実行したところ解決しました。

4.子テーマを導入している

ワードプレスではカスタマイズするために子テーマを作成する方が多いと思われますが、子テーマが原因で反映していないケースがあります。

子テーマが原因という言い方は語弊がありますが、初心者に多いのがCSSを記述する際に見出しなどを他サイトからコピペして貼り付けるのが原因になっている場合が意外に多いです。

見出しを例にすると親テーマのクラスを指定しないで、貼り付けて反映しないと言った症状をよく聞きます。

子テーマを利用の場合は親テーマのクラスを指定してカスタマイズしましょう。

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です