CSSが反映されない！
[char no=”2″ char=”わかめちゃん”]CSS編集したんだけど、サイトに反映されてねーんだけど…。なんで？[/char]
[char no=”1″ char=”かつをくん”]CSSが反映されない原因はいくつかあるけど、「大体コレ！」ってのを紹介しよう。[/char]
頑張って編集したCSSがなぜか反映されない。原因探しに更に時間がかかってしまいます。
こここの記事ではありがちなCSSが反映されないパターンを紹介します。覚えておくときっと時間の短縮に役立ちますよ！
パターン①：そもそもCSSセレクタが間違ってる
[char no=”2″ char=”わかめちゃん”]そんな凡ミスするワケねーだろ！[/char]
[char no=”1″ char=”かつをくん”]いやいや、CSSが反映されない原因の過半数はこれやと思うで？割とマジで。[/char]
複雑なセレクタを指定している時ほど、このミスは起きやすくなります。
複数の指定先をカンマではなくドットで区切っていたり、子孫要素を指定しようとしているのに半角スペースが抜けていてand指定になっていたりと、落とし穴は割と沢山あります。
解決策：Google Chromeを使ってCSSセレクタを作成する
クロームのデベロッパーツールに、任意の要素のCSSセレクタをクリップボードにコピーするという機能が備わっています。
使い方を紹介します。
まずブラウザで編集するのサイトを開き、狙いたい要素の位置で[右クリック→検証]
開いたデベロッパーツールは右クリックした要素をすでに選択している状態だと思います。注意点として、狙いたい要素より深い子孫要素にフォーカスされている場合もありますので、きちんと確認しましょう。
更にその要素の位置で右クリックすると以下のような項目が出現します。
[Copy]の項目から[Copy selector]を選択。
すると、クリックボードに狙った要素のCSSセレクタがコピーされますので、後はペーストするだけです。
Chromeで作られるCSSセレクタは、ピンポイントでその要素単体を狙うためだけのものですので、例えばリスト要素すべてに反映させたいCSSなんかは少しセレクタを変更する必要があります。
[char no=”2″ char=”わかめちゃん”]便利な機能があるんだな。[/char]
[char no=”1″ char=”かつをくん”]結構、非効率なセレクタなんだけど、よくCSSを理解してないけど編集したいって人や、まだ慣れてないって人はこの方法で確認するのがイイかもね[/char]
パターン②：ブラウザキャッシュが残っている
ブラウザにはキャッシュと言う、一度見たサイトの情報の一部を記憶しておくという機能があります。
[char no=”2″ char=”わかめちゃん”]ブラウザキャッシュって邪魔だな！[/char]
[char no=”1″ char=”かつをくん”]何回も同じサイトを読み込むと、その都度毎回、時間を取られるからね。表示を高速にするための一つの仕組みやね。[/char]
キャッシュによって、再度そのサイトを訪れた時は高速に表示することが可能になりますが、キャッシュからサイト情報が読み込まれるため、今行った変更が反映されない、というパターンがあります。
解決策：スーパーリロードを使う
ブラウザはただ更新ボタンを押しただけでは、基本的にキャッシュがあればそちらを優先して使うようになっているため、キャッシュを無効化(削除)する必要があります。
簡単な方法がこのスーパーリロード。
大抵のブラウザでは[ Ctrl + F5 ]ボタンで、キャッシュを無視して新たに情報を取得する更新の仕方が可能です。
パターン③：サーバーキャッシュが残っている
ブラウザと同じく、ワードプレスのキャッシュ系プラグインを使っている場合なんかは、こちらも該当するでしょう。
[char no=”2″ char=”わかめちゃん”]キャッシュって何種類もあるのか？[/char]
[char no=”1″ char=”かつをくん”]主にサーバー側のキャッシュは、ワードプレスみたいな、「動的にHTMLを表示する」サイトで使われることが多いな。[/char]
解決策：サーバーキャッシュの削除
キャッシュ系プラグインを使っているという方は、大抵の場合はログインした状態で表示される管理者ツールバーにサーバーキャッシュを削除するボタンが追加されているのでそこを確認しましょう。
パターン④：CSSの優先順位で負けている
編集しようとしている要素に、すでにテーマによって特定のCSSが指定されている場合があります。
場合があると言うより、ほとんどの場合、何らかのCSSが適用されていると思って間違いありません。
[char no=”2″ char=”わかめちゃん”]話がややこしくなってきたな。[/char]
[char no=”1″ char=”かつをくん”]ちゃんと確認する方法もあるから、紹介するな[/char]
適用されているCSSの確認方法
そもそも自分の書いたCSSが認識されているのか確認するには、先ほどと同じくデベロッパーツールを使います。
確認したい要素を選択すると、横にスタイルを確認する窓が開いていると思います。
優先順位で負けて、適用されていないプロパティには打消し線が入っていると思います。
更に右側にはそのCSSが記述されているファイル名と行数が書かれています。
この枠に自分の記載したファイル名と行数のCSSが見つからない場合は、そもそもブラウザが編集したCSSを認識していないということになりますので、原因は①～③番までのどれかの可能性が高いです。
解決方法：自分の書いたセレクタの優先順位を上げる
先に指定されているCSSプロパティを上書きしたい場合、強いルールでCSSセレクタを記述することで自分の編集したCSSを適用させることができます。
優先順位にはいくつかルールがあります。
優先順位のルール
- id指定 ＞ クラス指定
- 後に記述 ＞ 先に記述
- 深く指定 ＞ 浅く指定
- 要素に直指定 ＞ インライン配信 ＞ CSSファイルで配信
このルールの中の何れかを使って、自分の書いたCSSの優先順位を上げる必要があります。
簡単なのは1番と3番です。
ルールの例
例えばこのような要素があり、
<div class="test_class1">
<span id="test_id" class="test_class2">
CSSセレクタ、強さの例
</span>
</div>
現状のコードが以下のようなCSSで、自分の書いたコードより優先されている場合。
.test_class2{
color: red;
}
クラス”test_class2”の文字色を青にしたいならば、以下のようにすれば優先順位で上回る事が可能です。
/*-----①番のパターンで解決-----*/
#test_id{
color: blue;
}
/*-----③番のパターンで解決-----*/
.test_class1 > test_class2 {
color: blue;
}
1番はidが振られている要素でない場合は使えませんので、3番の方が現実的ですね。
より上位の要素からあえてセレクタに指定してやることによって優先順位を上げることができます。
パターン⑤：CSSの適用条件を満たしていない
上に挙げた4つの確認を行って、セレクタも間違えていないし、キャッシュも残ってないはずなのに、まだ反映されない。そんな場合は、CSSの動作する条件が満たされていないパターンが多いです。
解決策：ググる
状況は多数ありすぎて、全てを紹介するのは不可能ですが、何故動かないのかはググれば大体出てきます。
- ○○ 反映されない
- ●● 効かない
CSSのプロパティ名を頭につけてググれば、ほぼ間違いなく解決策が出てきます。
[char no=”2″ char=”わかめちゃん”]結局ググらせるのかよ(笑)[/char]
[char no=”1″ char=”かつをくん”]いや、コレばっかりは状況が多岐に渡りすぎて、全部紹介するのは流石に無理や。スマン。[/char]
パターン⑥：ブラウザがそのCSSに対応していない
モダンなCSSを使いたい時にありがちなパターンですが、自身の使っているブラウザがそのCSSをサポートしていない事があります。
各CSSをサポートしているブラウザは以下のサイトで確認できます。
[char no=”2″ char=”わかめちゃん”]ブラウザによって使えるCSSって違うんだな[/char]
[char no=”1″ char=”かつをくん”]大抵のCSSは、どのブラウザにも対応してるけど、比較的新しいCSSプロパティを使おうとしている時は注意やね！[/char]
まとめ
CSSが効かない時、ほとんどのパターンは上記で解決すると思います。
意外と凡ミスみたいなことも、なれるまではやってしまいがちですので、デベロッパツールで確認を忘れずに！
コメント