CSSを入力してるのにサイト上に反映されない！
解決しないまま小一時間経過しちゃった･･･
あると思います！
特にHTML・CSSのコーディングを始めたばかりの人は遭遇する頻度が高いですよね。
でもこの「CSS効かない現象」は、ポイントを押さえて一つずつ順番にチェックしていくことで絶対に解決することが出来るんです。
本記事では、CSS効かない現象の原因として考えられるポイントを10個ご紹介していますので、もしも今悩んでいる方がいれば一緒にチェックしてみてください。
きっと解決するためのヒントが見つかるはずですよ！
CSSが効かない原因は”キャッシュ”かも
「CSSが効かない！」となったら、まず初めにブラウザのキャッシュを疑いましょう。
「キャッシュ」とは、ユーザーが閲覧したサイトのデータを一時的にパソコン上に保存し、次回おなじページにアクセスした際にすばやくサイトを表示することができる機能です。
Webサイト制作では【コーディング ⇒ ブラウザで確認】の作業を繰り返しますので、知らない内にブラウザがキャッシュ（古いバージョンのコーディング結果）を表示し続けてしまうことがあるのです。
キャッシュを削除する方法
キャッシュの削除はブラウザ上で簡単にできます。今回はGoogle Chrome（グーグル クロム）の場合でのキャッシュ削除方法をご紹介します。
手順1: キーボードのF12をクリックしてデベロッパーツールを起動する
手順2: ブラウザ上部の更新ボタン 
を右クリック
手順3: 「キャッシュの削除とハード再読み込み」をクリック
これだけでブラウザに保存されたキャッシュが削除され、ページが再読み込みされます。
上記を試しても「やっぱりCSSが効かない！」という場合はHTML・CSSのコーディング内容に原因がある可能性が高いですが、慌てる必要はありません。
以下を順番にチェックして原因を探していきましょう！
特定の要素だけCSSが効かないときの原因
サイトの一部分だけCSSが効かない！とお悩みの方は以下の①〜⑦を確認してみて下さい。
「こんなミスしないよ！」と思うかもしれませんが、その思い込みがタイムロスを生みますから、注意深く見てくださいね。
なお、「サイト全体でCSSがまったく効かない！」という人は全体的にCSSが効かないときの原因を参考にして下さい。
① id名やclass名のスペルミス
タイピングミスなどで、id名やクラス名を間違えてしまうとスタイルが効きません。
「間違えていないだろう」という先入観から確認が甘くなりがちですが、じっくりと見たら一文字だけスペルが違っていた、なんてことも有りますのでしっかりと確認しましょう。
HTML
＜div class="wrap"＞
<div class="inner">
<p>サンプルです</p>
</div>
</div>CSS
.rap .inner {
width: 100%;
background-color: #FFF;
text-align: center;
}上の例だとHTMLのwrapクラスに対して、CSS側で「.rap」と記載してしまっているので、スタイルが効きません。
② 「#」や「.」を入力していない
CSSでidを指定する場合はid名の前に「#」を、classを指定する場合はclass名の前に「.」を入力します。
こちらも基本中の基本ですが、さくさくコーディングを進めているうちに入力が漏れてしまった、ということもありますのでご注意を！
HTML
＜div class="wrap"＞
<div class="inner">
<p>サンプルです</p>
</div>
</div>CSS
.wrap inner {
width: 100%;
background-color: #FFF;
text-align: center;
}「.inner」の「.」が抜けている
③ 前の記述の閉じ括弧を入力し忘れている
途中まではCSSが効いていたのに、途中から突然効かなくなった！という場合は、先に書いた記述の閉じ括弧が漏れていないか確認してみましょう。
HTML
＜div class="wrap"＞
<div class="inner">
<p>サンプルです</p>
</div>
</div>CSS
.wrap .inner {
text-align: center;
.wrap .inner p {
color: #333;
}「.wrap .inner」の閉じ括弧が抜けているため、それ以降のCSSが効かなくなります。
④ セレクタを間違えている
「よく見るとセレクタを間違っていた」ということも多いですので、改めて見直してみましょう。
HTML
＜div class="wrap"＞
<div class="inner">
<p>サンプルです</p>
</div>
</div>CSS
.wrap p .inner {
width: 100%;
background-color: #FFF;
text-align: center;
}「.wrap」と「.inner」の間に「p」が入力されているが、innerクラスの親要素にpが存在しないため、上記の記述だとスタイルが効かない。
⑤ コロンとセミコロンの打ち間違え
プロパティと値の間に入力する「:（コロン）」や、行末に入力する「；（セミコロン）」を間違って入力していませんか？
HTML
＜div class="wrap"＞
<div class="inner">
<p>サンプルです</p>
</div>
</div>CSS
.wrap .inner {
width: 100%;
background-color; #FFF;
text-align: center;
}上記はbackground-colorと#FFF;の間のコロンがセミコロンになっているため、構文エラーとなりCSSが効かない原因になります。
⑥ 同じ要素に対する記述が重複している
CSSの記述量が多くなってくると、気づかないうちに同じクラスに関する記述が複数の行に重複してしまうことがあります。
特定のクラスに関する記述が重複してもエラーにはなりませんが、同じプロパティを指定した場合は後に入力した値が優先されます。
HTML
＜div class="wrap"＞
<div class="inner">
<p>サンプルです</p>
</div>
</div>CSS
.wrap .inner p {
font-size: 20px; /* 適用されない */
color: #333; /* 適用される */
}
/* ------------------- */
.wrap .inner p {
font-size: 16px; /* 適用される */
}2行目で「font-size: 20px;」としていますが、9行目で「font-size: 16px;」を指定しているため、最終的に「サンプルです」のテキストは16pxで表示されます。
⑦ セレクタの優先度が低い
⑥でご紹介した記述順による優先度の違いの他にも、セレクタには優先度があります。
同じCSS内で、より優先度の高い記述がある場合はそちらの値が優先されます。
CSSの優先度については以下の記事で見やすく纏められているので参考にどうぞ。
HTML
＜div class="wrap"＞
<div class="inner">
<p id="sample">サンプルです</p>
</div>
</div>CSS
#sample {
font-size: 20px; /* 適用される */
color: #333; /* 適用される */
}
.wrap .inner p {
font-size: 16px; /* 適用されない */
color: #777; /* 適用されない */
}「#sample」も「.wrap .inner p」も同じ要素（”サンプルです”のテキスト）を指定していますが、IDで指定した内容はクラスと比べて優先度が高いため、font-size: 20px;とcolor: #333;が適用されます。
CSS設計のススメ
突然ですが「CSS設計」についてご存知でしょうか？
CSS設計を学ぶことで、CSS効かない現象に遭遇する場面がグンと減りますし、以下のようなメリットがあります。
- クラスの命名にいちいち悩まなくても良くなる
- セレクタの優先度を気にする必要がなくなる
- 大規模サイトであっても、クラス同士が干渉して破綻するリスクを回避できる
- 後から自分や他人がコード内容を見ても、解読しやすいWebサイト構築ができる
もしもあなたが「特にクラス名のルールを決めずにコーディングをしている」「もっと綺麗にCSSが書きたい」という場合は是非とも勉強してみて欲しいです。
学習教材としては、以下の書籍が情報を網羅している ＆ 読みやすいのでご紹介しておきます。
CSS設計は学習難易度もそんなに高くなく（初級者レベルでも理解可能です）、また学習前と比べると明らかにコーディング効率が上がりますので、この機会に勉強してみてはいかがでしょうか。
全体的にCSSが効かないときの原因
「コーディング結果にCSSが一切効かない！」という人はcssファイルの読み込み自体が上手くできていない可能性が高いですので、以下の⑧〜⑩を確認してみましょう。
⑧ HTMLファイルからCSSファイルを読み込んでいない
CSSをHTML内に記述する方法もありますが、別途外部ファイル（例：style.css）を用意して、HTMLから呼び出す方法がスタンダードですよね。
その場合はそもそもCSSファイルを読み込んでいなければスタイルが適用されませんので、念のため確認しましょう。
<head>
<link href="css/style.css" rel="stylesheet">/* パスは環境により異なる */
</head>HTMLファイルの<head>タグ内に上記2行目のように記述をしてCSSファイルを呼び出します。（パスは環境により異なります）
⑨ CSSファイルの名前の入力ミス
HTMLファイルからCSSファイルを呼び出す際に、ファイル名が間違って入力されていると参照することができません。
こちらも「まさか間違えてないでしょ〜」という先入観を捨てて念のため確認して下さい。
大文字小文字が違うだけでも別のファイルと認識されるので要注意ですよ！
⑩ CSSファイルのパス指定を間違えている
<head>タグ内にCSSファイルを読み込むための記述をしていても、パスの指定が違っているとCSSが効きません。
以下を参考にしてパスの指定が正しいか確認をしてみましょう。
「index.html」と「style.css」が同階層にある場合は“style.css”と記述するだけでオーケー！
「style.css」がcssフォルダに入っているので、「index.html」から「style.css」を参照するためには“css/style.css”と記載します。
HTMLファイルの位置から参照先のファイルを見に行くためには、どのフォルダを通れば良いのかな？と考えることで、パス指定のミスを減らすことができます！
おわりに
Webサイト制作あるあるの「CSS効かない現象」について解説してきました。
もしもCSSの入力内容がコーディング結果に反映されなくなっても、必ずどこかに原因がありますので、慌てず一つ一つ原因を探ってみましょう。
それでは良いコーディングライフをお過ごしください！