練馬のみなさまへ 協業のお願い!

CSSが効かないときのチェックリスト

Webのことのアイキャッチ画像

修正したのに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ファイルに直接記述するインラインスタイル、そして!importantがついていない読み込んだCSSファイルの順に設定が反映されます。
以下、もう少し詳しく説明していきましょう。

!importantについて

CSSが効かない場合は、!importantなどの設定がかかっていないか見てみましょう。
!imprtantは最優先で反映されます。例えば、
#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デザイナーにとってはどれも真新しいことです。
「なんでこんなこともわからないんだ!」と思うこともあるかもしれませんが、「自分も通った道だから」と長い目で新人教育をしていきましょう。