CSSが効かない時の対処法

2020年3月18日

修正したのにCSSが効かない!……なんて経験はありませんか?
今回は新人のWebデザイナーを教育しているとよく受ける「CSSが効きません!」という質問に対して、チェックしてほしいポイントをまとめました。

CSSが効かない、なんてことはない

新人のWebデザイナーを教育していると、「あっているはずなのにCSSが効かないんですよね~」と相談を受けることが多々あります。
しかし、CSSが効かないことなんてありません。絶対に何らかの原因がそこにはあります。
今回はCSSが効かないと感じた時にチェックしてほしいポイントをまとめましたので、新人Webデザイナーの質問対応のご参考になれば幸いです。

テスト環境と本番環境を間違えていないか

もし新人が「CSSが効かない」と言い始めたら、真っ先に公開されているWebサイトのデザインが崩れていないか確認してください。
新人Webデザイナーにありがちなミスとして、テスト環境と本番環境を間違えるというものがあります。
まだまだWebサイトの公開作業に慣れておらず、テスト環境にアップする情報を本番環境のサーバーにアップしてしまったということもあるでしょう。
クライアントに迷惑をかけないためにも、CSSが効かないと感じたり、こうした質問を受けたら真っ先にサーバーを確認してください。

CSSファイルへのリンクは正しいか

CSSはHTMLファイルの中に書き込むこともありますが、多くの場合、CSSファイルを外部に作成し、以下のような形式でHTMLファイルにCSSファイルを読み込ませる設定を記述します。

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

新人Webデザイナーの場合、ファイルのパスを間違えてしまうことが多々あります。
パスを確認するとともに、もしパスの誤りが原因であれば、DreamWeaverなど、ファイルのパスの記述を手伝ってくれるようなコーディングツールを勧めてみましょう。

{ }の閉じ忘れはないか

CSSのリンクのパスを間違えるのと同様に、CSSに使う括弧{ }の閉じ忘れも頻発します。
最近はコーディングツールがしっかりと括弧の閉じ忘れを表示してくれますが、新人Webデザイナーだと、それが何の警告なのかもわからないことが多いです。

{ }や : 、 ; などの記号が全角になっていないか

括弧の閉じ忘れと同じ程度によくあるのが、記号を全角にしていることです。
たとえば下のコードのように、ぱっと見た限りでは問題ないようにみえても、記号が全角になっていることがあります。

p { color : red ;}

最近はコーディングツールがこうしたところもエラーとして出してくれるのですが、やはり新人は気づかないことが多いため、エラー箇所をいっしょに見てみましょう。

CSS反映の優先順位を理解しているか

CSSには反映の優先度があります。
たとえばpタグに対して色の指定をするにしても、基本的に!importantをつけたCSSが最優先で扱われ、その次にHTMLファイルに直接記述するインラインスタイル、そして読み込んだCSSファイルのうち、!importantがついていない記述の順に設定が反映されます。
以下、もう少し詳しく説明していきましょう。

!importantについて

CSSが効かない場合は、!importantなどの設定がかかっていないか見てみましょう。
!importantは最優先で反映されます。たとえば、
#main .class p {
color:red;
}

という設定より、
p {
color:blue;
}

という設定が優先されてしまいます。
そのため、同じ要素にCSSを設定したとしても、!importantがついているCSSの設定が勝ってしまいCSSが効かなくなってしまいます。
もし不用意に使われている!importantの設定を新人Webデザイナーといっしょに見つけたら、この設定は安易につけるものではないことも説明していきましょう。
繰り返しになりますが、!importantの設定は何よりも優先されて効いてしまうため、CSSの本来の優先順位を崩してしまいます。
その結果、!importantが使われたCSSに関連する項目は、この!importantを気にしながら設定しなければならず、無用な労力を使ってしまいます。
最終手段として残されていますが、「かんたんにCSSが効くから」という理由で!importantは使うものではないということを新人教育として伝えていきましょう。

インラインスタイルについて

HTMLファイルのheadタグや、タグに直接CSSを記述するインラインスタイル形式のCSSは外部からCSSファイルを読み込んだものよりも優先して設定が反映されます。
最近では表示速度の向上のため、必要不可欠なCSSの設定をインラインスタイルで、そうでないものを外部ファイルとして記述し、外部ファイルの読み込みを遅らせることでWebサイトの表示速度を高めるといった対応をとることがあります。
そうした場合、外部のCSSファイルに設定を追加しても、インラインスタイルで書いたCSSが同じ要素を指定していれば、外部ファイルのCSSが反映されないということがあります。

指定するセレクタによって優先順位が違う

最後に外部ファイルであっても、優先順位が異なる話をしていきます。
たとえば.abc というセレクタにCSSを設定した時と、#xyz .abcというセレクタにCSSを設定した場合では、後者の設定が優先されます。
セレクタにはポイントがあり、id(#)は1つ100点、class(.)には1つ10点、タグには1つ1点がカウントされます。
さきほどの.abcという指定はclassが1つなので10点ですが、#xyz .abcを指定した場合はid1つ、class1つで110点が与えられ、ポイントの高い#xyz .abcの設定が優先されます。
こうした優先順位を知ることは、上述の!importantをむやみに使わないことにもつながるため、早めに新人に教えることをお勧めします。

ブロック要素とインライン要素の区別がついているか

CSSにはブロック要素とインライン要素で効くものと効かないものがあります
よくある話としては、「この部分を中央に寄せたいからtext-align:center;にしたのに、効かないんですよね」というもの。
text-align:center;は確かに中央寄せの効果がありますが、これはインライン要素に対してだけです。
たとえばdivタグなどのブロック要素を中央寄せにしたい場合は、そのタグの幅を設定し、左右にmargin:auto;をかけるのが基本の対応です。
ブロック要素とインライン要素の違いは、ざっくりいうとテキストなどを入れる箱か、テキストを入れるタグなのかというものです。この違いを理解しておかなければCSSを扱うのは難しいため、ここで行き詰まっている新人がいたら、再度タグの意味というものを教えてあげましょう。

まとめ

今回はCSSが効かないという時にチェックしてほしい項目をまとめていきました。
慣れてくると当たり前になってくるCSSの優先順位やエラーの見かたなども、新人Webデザイナーにとってはどれも目新しいことです。
「なんでこんなこともわからないんだ!」と思うこともあるかもしれませんが、「自分も通った道だから」と長い目で見て新人教育をしていきましょう。