記事内に商品プロモーションが含まれる場合があります
サルワカではたくさんのCSSデザインサンプルを紹介しています。とはいえ「CSSをコピペしても効かない」「一部しかデザインが変わらない」ということもあるかと思います。今回はそんなときの対処法を初心者の方でも分かるように詳しく解説します。
以下で紹介する対処法は、Wordpressであっても、はてなブログやライブドアブログなどの無料ブログであっても共通です。
検証モードでCSSが効かない原因をチェック
CSSを長く書いてきている人でも「あれ？反映されないな」ということはよくあります。そんなときにはブラウザの検証機能で何が原因なのかをチェックすることができます。
検証機能とは？
現在表示されているウェブページにHTMLやCSSなどのコードをチェックできるツールです。PCブラウザにはだいたい標準機能として搭載されています。
今回はGoogleクロームの検証機能を使ってチェックします（他のブラウザを使っている方ごめんなさい…！）。
手順1：CSSが反映されない部分を［検証］
まずデザインがうまく反映されない部分を右クリックします。
表示されるメニューの中から［検証］を選びます。
すると、上の画像のように右クリックした周辺のコードがずらっと表示されます。見慣れないうちは頭が痛くなるかもしれませんが、耐えてください。
このようにHTMLとCSSが分かれて表示されています。
なお、HTML側の青くなっているコードが現在検証されており、その部分に対応するCSSが右側に表示されています。
手順2：問題のありそうなHTMLを探る
検証部分はHTMLタグをクリックすれば変えることができます。ポチポチとクリックして問題のありそうな行にあわせましょう。
HTML側の「▶」をクリックすれば、HTMLが展開され、中のコード（子要素）まで見ることができます。
手順3：CSSをチェック
HTML側で問題のありそうなタグを選択できたら、CSS側を見てみましょう。
CSSのStyleを見ると、このような表示になっているかと思います。この例の場合、padding: 8px 0;と取り消し線が引かれたコードがありますね。これは何らかの理由でこの指定が効いていないことを表しています。
では、なぜCSSが効いていないのでしょうか。以下の順にチェックしていきましょう。
他のスタイル指定より優先順位が低いとうまく反映されない
さきほどの例の場合、上側にも「padding:~」と表示されています。つまり、CSSで同じ部分に対して複数のスタイル指定をしてしまっているわけです。
同じ部分に対する指定がケンカしてしまい、結果として意図せず別の値が採用されてしまうというわけですね。
対処法1：適用されていない指定の優先順位を上げる
さきほどの例を一度整理してみましょう。CSSファイルには、以下のように、同じ部分に対する指定が複数書かれています。
.mkj a {padding: 8px 0;} ←①こっちを採用したい
.sidemkj .mkj a {padding: 0;}←②こっちが採用されている
①と②では、CSSの優先順位のルールから②が採用されています。そのため、この優先順位が逆転するようにすれば、CSSは狙い通りに反映されるのです。
CSSの優先順位を上げる方法
セレクタを詳しく指定する
よりセレクタを詳しく指定した方が優先順位が高くなります。
h2 {~} よりも .post-content h2 {~} が優先
.post-content h2 {~} よりも .main .post-content h2 {~} が優先
先程の例の場合はこれで解決します。「セレクタって何？」「並べてるのはどういう意味？」という以下は下の記事を読んでみてくださいませ。
ちなみにはてなブログの場合「.post-content ◯◯{~}」というように、スタイル指定の前にそれぞれ.post-contentとつければ狙い通りに適用されることがよくあります。
適用したいコードをCSSファイルの後ろに書く
CSSでは、より後に書かれたスタイル指定が優先されます。つまり、優先適用したいCSS指定を、後ろ側にまわすようにすれば良いのです。
.post-content a {~}
.post-content a {~}
後ろに書かれた方が優先
検証機能でをよく見ると、CSSファイル名とスタイル指定が書かれている行数（行番号）が表示されています。
行番号が大きいほど（＝CSSファイルの後ろの行に書かれているほど）適用されやすいというわけですね。
CSSを複数の場所に置いている場合
これが原因になることはそう多く無さそうですが念のため。CSSを書く場所は3つあります。（1）外部ファイルに書く方法、（2）<style>〜</style>に書く方法、（3）HTMLタグ内に書く方法です。このうちの「どこに書くか」によっても適用の優先順位が異なります。
<style>内やHTMLタグ内にCSSが書かれている場合には、これが原因となっている可能性があります。詳しくは下の記事で解説しています。
対処法2：適用したくない方を削除する
複数のスタイル指定が重複してしまっているわけなので、ジャマになってしまっている方を消すというのも1つの手段です。しかし、そのスタイル指定は他のタグにも影響を与えている可能性があります。他の部分のデザインが崩れてしまう可能性があるため、よく分からないのであれば、やめておいた方が良いでしょう。
対処法3：!importantをつける
適用されないスタイル指定の末尾に!importantと書くと、優先的に適用されるようになります。
例
.exampl p {
padding: 0!important;
margin: 0!important;
}
ただしこの方法を使うと、後々ほかの部分のスタイル指定をするときにジャマをされて困ることになる可能性があります。!importantはできる限り使わずに、対処法1で優先順位を変えるようにするのがおすすめです。
キャッシュが残っているとCSSが反映されない
もし検証機能を使ったときに「たしかにCSSで書いたはずなのに指定が見つからない」というのであれば、キャッシュが残ってしまっている可能性があります。
キャッシュとは「1度開いたウェブページのデータをブラウザに保存しておいて、次に同じページを開くときにサクっと表示してくれる仕組み」のことです。
つまり、CSSを変更したのに「一時保存されていた変更前のCSSが表示されてしまっている」わけです。これが原因のことも結構ありますね。
対処法
ブラウザで簡単にキャッシュが削除できます。例えば、Chromeの場合、以下の記事の手順でキャッシュが削除できます。
文法ミスがあるとCSSが効かない
文法ミスによりスタイル指定が反映されない場合もあります。ここでは、ありがちな文法ミスをまとめておきます。
【前提知識】以下で「セレクタ」や「プロパティ」などの用語が登場しますが、それぞれCSSのこの部分を表しています。
詳しくはこちらの記事をご覧ください。
セレクタの書き間違え
クラス名やタグ名の書き方を間違えて、結果として反映されないことはよく有ります。
間違い例1
HTML <div class="example">~</div>
CSS #example {~}
classに対する指定は「#」ではなく「.」です。つまり「.example{~}」が正解です。
間違い例2
HTML <p><a href="~">~</a></p>
CSS pa{~}
「pタグの中のaタグに対して」という場合は半角スペースを空けます。正しくは「p a {~}」ですね。
間違い例3
HTML <div id="example"><a href="~">~</a></div>
CSS #xemple {~}
id名を間違えてしまっています。正しくは「#example {~}」ですね。
プロパティの書き間違え
間違い例4
p {margn-bottom: 5px;}
正しくは「margin-bottom」です。
ちなみにプロパティ名を間違えているとChromeの検証ではが表示されます（カーソルを当てると「Unknown property name」と表示）。
値の書き間違え
間違い例5
.example {display: blcok;}
正しくは「display: block;」です。ちなみに値が間違えているときにはChromeの検証では「 Invalid property value」と表示されます。
「;」の書き忘れ
CSSでは、それぞれの指定の後にはセミコロン;をつけます
（1番最後は省略してもOK）。
このセミコロンを忘れていると、その後のCSSが正しく適用されなくなります。
「 } 」の閉じ忘れ
プロパティと値は波括弧で囲みます。特に閉じる側の波括弧はいつの間にか消えてしまいがちです。
閉じ忘れると、その後のCSSが正しく効かなくなります。念のためチェックしておきましょう。
コメントアウトが広範囲に適用されてしまっている
/*〜*/の間に書かれたスタイル指定は「コメントアウト」として実際の見た目には反映されません。閉じるのを忘れると（*/を書き忘れると）次のコメントアウトまで全てのスタイル指定が無視されてしまいます。きちんと閉じるようにしましょう。
CSSが効かないときの対処法を解説してきました。ポイントは「検証機能を使いこなすこと」です。慣れてくると「あのパターン化」と原因がすぐに分かるようになってきます。最初はちょっと辛抱が必要ですが、めげずに、マイペースで感覚を身に着けていきましょう。
