あれ？しっかりCSSを書いたのに反映されないなぁ
ハマりがちな原因があるの見てみましょう！特にLive Sass Compilerを使った際のエラーは見落としがちです！
コーディングをしていて、CSSが反映されない、なんてことがあるかと思います。
本当にちょっとしたことで、他のCSSが被ったり、無効になったり、読み込まれなかったりします。
今回はすぐにできる原因の探り方と対策をご紹介します！
CSSが反映されない原因
CSSが反映されない場合の対策方法
基本は開発ツールを中心に見ることになります。一つずつ見ていきましょう。
CSSが反映されないときの原因8選
CSSが反映されないときの原因は以下の８つが考えられます。それぞれの詳細を追っていきましょう。
CSSの文法ミス
非常によくあるのが、CSSの文法ミスです。たった一文字のミスで、ミス以降のCSSが反映されない、なんてことも。以下に具体例を紹介します。
よくあるCSSの文法ミス例
セミコロン（;）の付け忘れ
h1 {
color: red /* ←セミコロンがない！ */
font-size: 24px;
}▶ この場合、color: red の部分で文法エラーになり、それ以降のスタイルが無視されることがあります。
コロン(:)と値の間違い
p {
font-size 16px; /* ←「:」が抜けてる */
}
▶ :（コロン）が抜けると、まるごと無効な記述として扱われます。
中かっこの({})閉じ忘れ
div {
background: #f5f5f5;
padding: 20px;
/* } を閉じるのを忘れた */
▶ ひとつでも } を閉じ忘れると、以降のCSS全体が効かなくなることも…！
SASSを使っていてネストしていると見落としがちです！
クラス名・ID名のスペルミス
/* HTMLでは class="main-content" */
.maincontnt {
padding: 20px;
}▶ 名前がちょっと違うだけで反映されません！スペルミスにはご注意を！
レイアウトのミス
HTMLの親子関係や、構造のミス、display:flex/gridの設定ミスというのもあります。
親子関係かと思っていたらもう一つ階層が深かったり、flexの性質を勘違いしていたら起きてしまいます。
特にgridはできることが多い反面、コントロールが難しいですね。
親子関係のずれ
<div class="wrapper">
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>このような構造のときに、boxを横に並べたい、display:flexを使うとします。
.wrapperにflexを指定してしまうと、親子関係に当たらないため、レイアウトがうまく当たりません。
ときにはレイアウト用にdivで囲ってやる必要があるときもありますね。
display:flex/gridの設定ミス
grid-template-columns:repeat(3, auto);や、
flex-direction:column;このようなプロパティを使用するときに、displayが抜けていたり、間違っていたりして反映されないことがあります。
いずれも開発ツールを使用することで読み込まれているのか、効いていないのかを判断することができます。
キャッシュが残っている
CSSを正しく書き換えてもスタイルが変わらない…、以前のスタイルのまま。
そんなときはキャッシュが残っているかもしれません。
ですが、サイト更新しているときは少し厄介ですね。キャッシュを削除しないとせっかく書き換えたCSSも読み込まれず、以前見たままになってしまうのです。
優先度(詳細度)が低い
文法のミスもなく、キャッシュもないのに反映されない…。なんで！？と、なります。
プロパティに打ち消し線が入っていることがあります。
いくつか可能性はありますが、詳細度による優先度を疑いましょう。
CSSを指定する方法にて、どのスタイルを優先して効かせるか、といったルールがあります。
同じ箇所に、違うプロパティを指定した場合どちらが優先されるのか？といったルールです。
そんなときに、詳細度が高いほうが優先してスタイルを当てられるようになっています。
詳細度の具体例
<p id="wrapper" class="text">上記のコードの文字色を変えたいとします。この場合、以下の指定方法があります。
// セレクタの指定
p {
color: red;
}
// クラスの指定
.text {
color: blue;
}
// IDの指定
#wrapper {
color: yellow;
}この場合は、#wrapperのyellowが優先されます。id、class、要素セレクタの順で優先順位が有り、
開発ツールで要素をホバーしたら、(0,0,0)と言った具合に見られます。
Specificity(0,0,0)の内容
idを指定していれば(1,0,0)
classを指定してれば(0,1,0)
要素を指定していれば(0,0,1)
となり、左の数字が大きいほどに優先順位が高くなり、スタイルが優先的に当てられるようになります。
順番によって上書きされている
文法もミスなく、CSSのタイポもキャッシュも大丈夫…！それなのにスタイルが当たらない！😭
詳細度のチェックをしたら、次は書いている順番を見てみましょう。
基本的にはあとに書かれたスタイルが優先されます。そのため、リセットCSSをカスタムCSS(自身で書いているCSSのことを呼ぶ)のあとに書いていたり、ページの後半に同じセレクタを指定してスタイルを上書きしていると言ったことがあります。
例を挙げてみると
p {
color: blue;
}
p {
color: red;
}このコードの場合、redが最終的にスタイルに当たります。あとから書いたほうが優先されるためです。
書いた順番があとでも、詳細度が高いほうがスタイルが優先されますので、書いた順番、優先度ともにチェックすると良いですね！
リンクのファイルパスの記述ミス
CSSを書けども書けども反映されない…？何が起こっている？
そんな経験はないでしょうか。
HTMLに対応したCSSは基本的に<head>タグの中に<link>タグでCSSを相対パスで読み取るように記述します。
しかし、<link>タグの指定方法や指定内容が間違っている場合、サイトがCSSを読み取らず、スタイルが反映されません。
相対パスがズレている、cssのファイル名が間違っている、といったことが原因で反映されないことがあります。
CSSの仕様と間違って使っている
しっかり書いたつもりなのに…あれれ〜？
こういった場合は、記述内容がCSSの仕様から外れている可能性があります。
以下に具体例を上げていきたいと思います。
値だけ書いて単位を忘れている
.box {
width: 100;
}上記のような場合、100にpxでもemでも%でも、単位を付けないとエラーになってしまいます。
様々な単位があり、単位によって表示が大きく変わってしまうのでしっかりと指定したいですね。
shorthand(省略記号)の書き間違い
.box {
margin: 10px 20px 30px;
}本当は4つ書くべきなのに3つしかない、といった場合は想定していた見た目と変わってしまうことがあります。
上記の場合、上下は指定したけれど、左右は同じ数字が入る、といったことが起きます。しっかり指定したい場合は、プロパティに応じた数字をいれる必要があります。
セレクタにカンマ忘れ
h1タグとpタグにcolorを適用させたい。といった場合に…
h1 p {
color: red;
}このような記述をすると、h1の中のpタグの文字色を変える。といった指定になります。
h1とpタグそれぞれにcolorを適用させたい場合は
h1, p {
color: red;
}上記のようにh1とpの間に,(カンマ)を入れる必要があります。
複数のクラスを指定するときなどにありがちです。
プラグイン「Live Sass Compiler」がエラーを出している
SASSファイルをCSSにコンパイルしてくれるVScodeの拡張機能「Live Sass Compiler」がエラーを起こしているときは、CSSにコンパイルしてくれなくなります。
そのため、エラーに気づかず書き続けてsass(scss)ファイルではしっかり書いたのに反映されない、といった現象が起きます。
文法ミスでエラー
CSSを読み込まない原因でもある、文法ミスでのエラーが起きるとエラーが発生した箇所からあとに編集したコードをコンパイルしません。
;(セミコロン)のつけ忘れ、ネストの{(波括弧)の数が合わないなどのミスによってコンパイルしないといったことがあります
コメントの書き方ミス
scssファイルでは、コメントを//から始めて書いていきます。
/* */こちらのコメントではエラーになることが有り、少し注意が必要です。
また、//から始まる1行コメントはコンパイル時に消去されますが、
/**/で囲ったコメントはcssに残ります。また、複数行にわたってコメントすることができます。
基本は、編集時には//から始まるコメントを残すほうが無難ですね。
変数のスペルミス
$main-color: #333;上記のような変数を設定し、使用する際、スペルミスがあるとエラーが発生します。
そんな変数はないよと言ったエラー内容をVScode上のターミナルと呼ばれる箇所で教えてくれます。
行数、どの変数がエラーなのかを出してくれます。
@import、@useミス
sassの機能を活かし、ファイル分割を行ったりする場合に@import、@useを使用します。
その際に、書き方によってはミスが起きてしまうので、数例上げていきます。
_（アンダースコア）を忘れている
Sassは_variables.scssみたいにアンダースコアをつけるのがルールだけど、書くときは省略する！
拡張子をつけてしまう
→ @use "variables.scss"; みたいに書くとエラーになる（拡張子不要）
@useした後の参照のしかたを間違えている
→ @use "../foundation/variables" as *; みたいにしないと、variables.$color-text--blackって書かないといけない
ファイル名が間違っている
→ 例）@use "../foundation/variables"; なのにファイル名が実は variable.scss
@useをしていないのに、変数を使っている
@useで読み込んでないと、そのファイル内の変数は使えない（@importとは違う！）
@useしたあとの参照の仕方を間違っている
@use "../foundation/variables" as *; みたいにしないと、variables.$color-text--blackって書かないといけない
このように、コンパイルエラーには多数の種類があり、注意しないとCSSに反映されないと言ったことが起こってしまいます。
CSSが反映されないときの対処方法
今までは反映されないときの原因をまとめてきました。ここからは反映されないときの対処方法をご紹介していきます。
反映されないときは片っ端から試してみてください。
CSSが反映されない場合の対策方法
!importantを使う
CSSの値の後ろに!importantをつけて、強制的に一番優先にします。
h1 {
color: red !important;
}表示されれば、文法は正しいCSSとしては間違っていないので、書く順番や、詳細度を見ていくことができます。
表示されなければ、文法が間違っている、どこかでエラーが起きているということがわかるので見直す場所を限定することができます。
最初に!importantを使って、表示されるかのチェックをしましょう！
スーパーリロードをする
サイトを編集するときに、キャッシュが残っていると、ただ更新しただけではCSSが最新のものに反映されません。
色々試す前にまずは、スーパーリロードを試してください。
スーパーリロードのやり方
Macの場合
→Chrome / Safari / Edge
キーボードで ➔ ⌘ Command + Shift + R
または、 ➔ ⌘ Command を押しながら「更新ボタン」をクリック！
windowsの場合
→Chrome / Edge / Firefox
キーボードで ➔ Ctrl + Shift + R
または、 ➔ Shift を押しながら「更新ボタン」をクリック！
それでもダメなときは？
スーパーリロードでもうまくいかないときは、「キャッシュクリア(履歴削除)」を試してくださいね！
キャッシュクリアのやり方
Chromeの場合
- ブラウザ右上の「︙（三点メニュー）」をクリック
- 「閲覧履歴データの削除」を選択
- 「キャッシュされた画像とファイル」にチェックを入れる
- 「データを削除」をクリック！
注意：「閲覧履歴」や「パスワード保存」は消したくなければ、チェックを外してくださいね
Safari（Mac）の場合
- 画面上部メニュー「Safari」→「設定」→「詳細」
- 「Webデベロッパ用の機能を表示」にチェック
- メニューに「開発」が出るので、そこから「キャッシュを空にする」をクリック！
Safariは「開発」メニューから一発でキャッシュクリアできます。
Edgeの場合
- ブラウザ右上の「…（三点メニュー）」をクリック
- 「閲覧データをクリア」をクリック
- 「キャッシュされた画像とファイル」を選んで「今すぐクリア」！
また、これらの処理をしてもブラウザの再起動をしないと反映されないこともあります。
キャッシュを消したら一度ブラウザを閉じて開き直すと安心ですよ。
シークレットモードを利用する
過去のキャッシュに影響されないために、シークレットモードを利用することも一つの手段です。
シークレットモードとは？
シークレットモードとは、ブラウザに履歴やキャッシュを残さない特別な閲覧モードのことです。
シークレットモードでは
閲覧履歴を保存しない
Cookie(サイト情報)を保存しない
キャッシュ(保存されたファイル)を保存しない
つまり、ブラウザがまっさらな状態になるイメージですね。
なぜシークレットモードを使うのか？
CSSがうまく反映されないときの多くは、過去のキャッシュが残って、そちらが反映されていることです。
通常のモードだと、ブラウザは少しでもページを早く表示するために、CSSファイルや画像を自動で保存します。
しかし、CSSを編集しても新しいCSSを読み込まずに、古いキャッシュを利用してサイトを表示すると言ったことが起きます。
シークレットモードなら、キャッシュがまっさらな状態でサイトを開くことができるので、最新の状態をすぐに確認することができます。
文法を見直す
文法ミスを見直すために、よくあるミスに注目して、見直しをしましょう！
見直す、予防する方法は、目視、VScodeの拡張機能を使う、外部ツールでチェックするといった方法があります！
目視で確認できること
- セミコロン「;」のつけ忘れ
- コロン「:」のつけ忘れ
- 単位のつけ忘れ
- {}中括弧の数を合わせる
- クラス名、id名のスペルミス
文法ミスを防ぐ拡張機能
世の中便利なツールがあります、使わない手はありません。
Prettierというコード整形ツールを使うことによって、整えられるため間違いがある場合見た目でわかりやすく判断できます。
Prettier(プリティア):コードのフォーマッター(整形ツール)
- コードを自動でフォーマット
- インデントや改行、スペースの数を自動で数えてくれる。
- プログラミング言語をまたいで使える
- HTML、CSS、SCSS、Javascript、Typescript、JSON...など、複数言語をまとめて管理できます。
- 保存時に自動でフォーマットしてくれる
- 細かく保存することで、コードをきれいに保つことができます。
- 整形することによってエラーが発見しやすくなる！
- 整形したコードに、VScodeが文法チェックをし、エラー箇所に赤い波線がでるなどして、発見しやすくなります。
emmetを使う
emmetとは:
VScodeに最初から内蔵されている機能で、HTMLやCSSを省略形で書くことができるのです。
emmetを使うことによって、プロパティのタイプミスを減らすことができます。
省略形を入力し、emmetの機能でプロパティ全文を書くことによって細かいタイプミスがなくなる、ということですね。
例えばbackground-colorと入力したいときには
「bgc」と入力しTabを押すと、「background-color」と正しい綴りで表示してくれます。
コードを書くスピードも早くなり、正確に入力することができますね！
他にも、単位を自動でつけてくれる、セミコロン、コロンの忘れなどを補完してくれます。
gap: 10px;
などと入れたいときには、g5→tabと押すことですぐに出すことができます。省略形は入力中に出てくれるので積極的に利用してスペルミスを減らしましょう！
リンクの相対パスを見直す
自身が作ったCSS(カスタムCSSと呼ばれます)を読み込む際には、<head>の中に<link>タグを使って埋め込みます。
HTMLを書いたのにCSSのスタイルが全くあたっていない…。そんなときは相対パスが間違っているのを疑ってみましょう。
特に、分割していたり、複数のCSSを読み込んでいるときに間違っている時があります。
よくある間違い
フォルダ階層を間違えている
<!-- 実際にはcss/の中なのに、css/を書いていない -->
<link rel="stylesheet" href="style.css">一つ上の階層にあると勘違いしている
<!-- HTMLファイルが /about/index.html にあるのに、上の階層のcssを読みに行ってる -->
<link rel="stylesheet" href="../css/style.css">wordpressテーマでテンプレートタグを使っていない
<!-- WordPressでは get_template_directory_uri() を使う必要がある -->
<link rel="stylesheet" href="/wp-content/themes/my-theme/style.css"> <!-- ❌ -->特に、ディレクトリ指定の「/」、「./」、「../」については間違えやすいので以下の表を参考にしてくださいね。
| パス | 意味 | 読み込む場所の例（index.htmlから） |
|---|---|---|
./style.css |
今の階層（カレント） | /style.css（同じ階層） |
/css/style.css |
サイトのルートから | https://example.com/css/style.css |
../style.css |
1階層上のディレクトリに戻る | 親フォルダの中の style.css |
優先度(詳細度)を上げる
CSSのスタイルが当たるには、記述の順番と、優先度(詳細度)が関係してきます。
あとに書かれたスタイル、詳細度(speciticity)が高いものが優先されます。
あとに書いたのになぜかスタイルが当たらない…！というときは詳細度を疑いましょう。
詳細度の上げ方
!importantを使う(最終手段)
idを指定する
複数のクラスを同時に指定する
ネストを深くする
これらの方法があります。
!importantを使う
CSSの値の後ろに!importantをつけることによって、強制的に一番優先であることを知らせます。
詳細度や順番が問題で表示されない場合は、!importantをつけることで表示されるでしょう。
ただし、あくまで最終手段や、確認手段として利用する程度に留め、他の方法を使うことを前提で考えましょう。あとからの修正や思わぬところのスタイルが変更したりして、後々トラブルに繋がる可能性があります。
idを指定する
#container、といったように、idを指定してCSSを当てることで詳細度を大きくあげることができます。
詳細度は3桁の数字を参考にしており、idを指定した場合は100の位が加算されるイメージですね。
class(.container)の場合は10の位、セレクタ(pやh2など)の場合は1の位が加算されるようなイメージです。
複数のクラスを同時に指定する
一つのクラスを指定してCSSを書いた場合、詳細度(Specificity)は(0,1,0)となります。
/* 通常のクラス指定 */
.btn-primary {
color: red;
}
/* この場合(0,1,0)となる */これだと書く順番によって上書きされてしまったり、あとから使いたいのにCSSが変わらないと言ったことが起きます。
ですが、同時に複数のクラスを指定してCSSのスタイルを当てることによって、詳細度を上げることができます。
/* 詳細度を上げたい場合の具体例（複数のクラスを組み合わせる） */
.btn.btn-primary {
color: blue;
}
/* この場合(0,2,0)となる */詳細度を上げることによって、あとから書いたスタイルでも優先的にスタイルを当てることができるため、同一スタイルの再利用、修正がしやすくなります。
しかし、同一の詳細度の際はあとに書かれた方のスタイルが優先されるため、過信は禁物です。
ネストを深くする
sassを使っている場合、ネストを深くすることによって詳細度を上げることができます。
考え方は複数のクラスを指定したときと同じです。
/* sassファイル */
.section {
.btn {
color: #333;
&:hover {
color: #fff;
}
}
}上記のように、クラス名の中にクラス名をネストすると以下のようにコンパイルされて出力されます。
.section .btn {
color: #333;
}
.section .btn:hover {
color: #fff;
}複数のクラスを同時に指定したことになり、詳細度が上がります。
特定の場所のみのコンポーネント(他の場所で使えるスタイル、今回の場合はボタン)を調整したい場合などに使える方法ですね。
ちなみに、:hoverや:forcusといった状態変化は詳細度がクラスと同様に、10の位が変化します。
しかしhoverなどの状態を調整する要素は親要素による影響が強いため、hoverが反応しない、といった場合は親要素との組み合わせやセレクタ構造で調整する必要があります。
優先したいスタイルをあとに書く
詳細度の問題もありますが、シンプルにあとに書くという方法も有効です。
最初の方に書いたスタイルがあとから見たときに変わっている、というときはあとから上書きされていないかを疑ってみましょう。
クラスを使いまわしていると、場所によってpaddingやmarginがズレてしまう、ちょっと修正…なんてことを繰り返していると上書きされてしまいます。
開発ツールをみて、打ち消し線が入っている場合はVScode内での全体検索(⌘＋Shift＋F)を使い複数箇所で同じクラスを編集していないか見てみましょう。
当てたいスタイルをCSSの最後にとりあえず書いてみる、というのもおすすめです。変化があれば改めて修正、なければ何かがおかしいです。
分割したファイルを@useをしていない
.scssファイルを利用している場合に、変数をまとめたファイル、レスポンシブをまとめたファイル等、ファイル分割を行う場合があります。
分割したファイルを別のファイルで使うためにはファイルのトップ部分に@useを使い、ファイルを読み込む必要があり、@useを忘れて、変数を利用したりするとエラーが発生します。
@use "../foundation/mixin" as mixin;画像のようなエラーが検出されるときは変数が定義されていない状態、コンパイル時に変数の中身がわからないことを表しています。
変数を定義するファイルを別に用意していて、@useで読み込んでいないときなどに起きるため、相対パスの確認、@useが書いてあるかを見てみましょう。
Live Sass Compilerのエラーを解除する
Sassを使ってコードを書いているときに、変数を読み込んでいないとき、CSSの文法が間違っているとき、@useで指定したファイルが存在しないときなどに、コンパイルエラーが発生します。
エラーが発生したところから、コンパイルすることがなくなるためCSSに変換されません。
そのため、どこかでエラーが発生したときに気づかぬままコードを書き続けて、確認のためサイトを見てみたら全然スタイルが反映されていないと言ったことが発生します。
CSSの文法や順番、詳細度を正しくしていてもスタイルが当たらない？といったときに疑ってみましょう。
レイアウトのミスを修正する
HTMLでのレイアウト、親子関係がズレていたり、display:grid;を使っているのに、flex-directionを使ってしまったりと、レイアウトの指定方法が間違っている場合があります。
開発ツール上では△!がでて、無効なプロパティです。と表示されます。
特に、wordpressのプラグイン、Contact Form 7を使ったときに意図せぬ箇所に<p>タグが入ったりして、親子関係がズレてしまうことがあります。
自身が書いたコードとは違うタグが入り込んだりすると見落としがちなので、最初は開発ツール上で見ることを意識してみましょう。
↑書いた記憶のない<p>タグが入ってスタイルが崩れています。😠
CSSが反映されないときの原因と対処法：まとめ
CSSをせっかく書いたのに反映されない原因と対処法を並べてきました。
!importantをつけることで、
スタイルがあたっている→読み込まれている
スタイルがあたっていない→読み込まれていない
と、大別することができます。
スタイルが読み込まれているとき
順番
詳細度を深堀り
スタイルが読み込まれていないとき
linkタグのパス
コンパイルエラー
文法ミスなどを重点的に見ていきましょう。
スタイルが当たらないときは、まずは!importantをつけてみますね！
まずはスタイルが読み込まれているのかどうかを確認するためにおすすめの方法です！
CSSが反映されない原因
CSSが反映されない場合の対策方法
当サイト管理人、「ばく」はWeb制作を中心に活動しているフリーランスです。
Webサイトを作ってほしい、修正して欲しい、学習中だけど聞いてみたいことがある。
そういった方はこちらまでお気軽にご連絡ください。
依頼に寄り添ったサイト制作、学習アドバイスを行っております。
最後までご覧いただきありがとうございました。