cssが効かない場合のよくある、ありがちなミスと解決方法

なぜだ、、なぜCSSが効かぬ。。。
我はこの文字を太くしたいだけなんじゃ!!
さては、とんでもないCSSのバグなのでは!!?

すんごい勘ぐった結果
大体大したことないミスが原因なのが
「CSSの効かない問題」です。

その大したことないミスをなるべく早く解決すべく王道のデバッグ方法と、
よくあるミスを箇条書きと思います。(思いついたら追記してきます)迷える方々の参考になればと思います。

まずやること!chromeでcssが効かない箇所を「検証」しよう

知らない人にとっては早く教えて欲しかったツールそれがブラウザであるchromeの機能「検証(要素の検証)」です。
ブラウザがieしか入ってない方は今すぐインストールしてきましょう。
検証の詳しい使い方はまたどこかで説明したいと思います。
※firefoxやieでも同じようなこと出来ますが、、chromeが使いやすい気がする、、

この「検証」することのなにが良いかというと
ズバリその検証した要素(divとかpとか)に現在適用されてるcssの情報がまるっと見えるという点です。
要素の状況が確認できることで「なぜcssが効かないのか」が大方わかります。

これから下記に挙げる「よくある効かないcssの原因」にいち早くたどり着くことができます。
まずはいじって、ツールに慣れてみてね

なお、今回はcssをhtmlに直接記述している場合ではなく
外部ファイルとして読み込んでいる場合として以下のよくある原因リストをあげていきます。

①外部CSSファイル自体がそもそも読み込めていない

これは一番最初の念の為の確認です。
その外部cssに書かれているcssが全て適応されてないという状況なので
さすがに気づくとは思いますが、読み込めていないのではお話になりません。
まずは確実にcssファイルを読み込めているかを確認しましょう。これは「検証」つかうまでもないですが
簡単な確認方法としては、
①chromeなどで右クリック→「ページのソースを表示」をクリック
②ソースをブラウザ上で表示し、外部cssを読み込んでいる箇所hrefのリンクをクリック

<link rel="stylesheet" type="text/css" href="/css/common.css" />

③クリックしたときにそのCSSが開けば読み込まれているということ「NotFound」など表示されなければ読み込まれてないということです。

②idなのかclassなのか

こちらもよくあるミスの一つだと思います。
html側が「id=”test”」の場合、css側は、「#test{}」
html側が「class=”test”」の場合、css側は、「.test{}」

③名前の付け方があっているかの確認

初心者が陥るミスとしてよくあるのが
クラス名やID名に数字から始まる文字列を使ってしまうパターンです。

class=”5style”に対し

.5style{font-weight:bold}

のような使い方はできません。
※数字のみの名前でも同じくダメです。
どうしても数字を名前に使いたい場合はcssの指定方法として

[class=”5style”]{font-weight:bold}

このように記述する必要があります。

④そのcssの優先順位があっているかの確認

そのcssが他のcssの記述に打ち消されている場合があります。
こちらはchromeの検証で見ると一発でわかります。
デバッグ画面上のcssの行に打ち消し線が入ります。

また、

<div class="test" style="color:red" >テスト</div>
.test{
color:blue;
}

このようにhtml上の属性値にスタイルが記述されている場合は
そちらが優先されますので上の例では文字色は赤になります。
javascriptで直接スタイル属性を変更した際などは、こうなってる場合がありますのでご注意を

⑤cssの記述が全角文字や書式のミスで動いていない

cssの記述内に全角文字や書式ミスがある場合は、
そのミスしている行までのスタイルしか適応されません。
全角スペースなどは特に見つけ辛いので注意が必要です。
こちらは「chrome検証」してもミスしている箇所をなかなか見つけられないため、
エディタで「全角スペース」を検索したほうが早いかもしれません。

多少面倒ですが下の行から消していき、
どの行までスタイルが適応されているかをデバッグすれば、該当箇所に行き着くので
必ず解決できます。

ありがちな書式ミスとしてコメントの記述も挙げられます。

.test{
color:blue;
}
<!--コメント--> → ☓間違い
//コメント → ☓間違い
/*コメント*/ → ○正解

css内のコメントの記述が違うだけでもちろん、その行までのスタイルしか適応されません。

⑥importを利用している場合の注意

外部css上で@importを使って他のcssファイルを読み込んでいる場合、
他のcssをhtml上で直接読み込もうとしても無視されます。
この場合①のようにソース上では正しくhrefへのリンクが貼れているのにcssを適用してくれないという
現象が起きますので注意が必要です。

読みたいcss以外のcss内でimportが使われていないか確かめましょう。

まとめ まだまだあるうっかりミス

だだーっと書いていきましたが、いくらでも思いつくうっかりcssミス。
思いつく限りは更新していきたいと思います。
どうか皆様のコーディング作業がすんなり行きますように。。。