はじまりはじまり。
効率的なCSSトラブルシューティング
今回は、CSSのコーディングミスをいかにさくっと見つけるか、という方法をご紹介します。
「正しく書いたつもりがなぜかスタイルが反映されない」
CSSを書いたことがある方であれば、きっとご経験があると思います。
そんなとき、ただひたすらに目を皿のようにして間違い探しをするのは、あまりスマートな方法ではありません。ロジカルに考え、便利なツール等を使うことにより、間違いは素早く見つけることができます。
考えられる原因
まずは、CSSを書いたのに見た目に反映されない原因を考えてみます。原因がわかれば、自ずと対処方法も見えてきます。
スペルミス、誤記、typo
要するに打ち間違いという一番ベタなパターン。このパターンは地道にコードとにらめっこしてしまいがちですが、まずはいったん引いて原因の切り分けをしましょう。単純な打ち間違いであっても、それがセレクターなのか、プロパティや値なのか、または記号等なのかによって起きる問題は変わってきます。
継承の問題
これはもしかするとドはまりしかねない、「打ち間違いも全くなし、完璧！なのにどうして反映されないの！？」という危険なパターンです。特に、長いコードになっていたり、CSSを複数ファイルに分割管理していたり、あるいは複数の人で1つのファイルを編集していたりする場合に起きやすいトラブルです。
Webブラウザー固有の問題
一番やっかいなパターンです。あなたは決して悪くない！
ですが、その問題が発生するブラウザーをサポートするのであれば、対応せざるを得ないので、こればっかりは調べる＆ノウハウを蓄積するしかない…ですが、まず問題が起きたときに「どのブラウザーでも確実に起きているのか」を調べれば、CSSのせいなのかブラウザーのせいなのかは切り分けることができます。
CSS仕様上の問題
初心者にはアリガチですが、たとえばインライン要素にwidthやheightを定義しても反映されません。こればっかりは仕様上の問題なので、勉強して覚えるしかない…かも。
HTMLの問題
どうにもこうにもダメだったらHTMLを疑うケースもあります。終了タグ忘れや、属性の指定方法など、間違いがないかどうかチェックしたほうがいいかもしれません。
対処方法
対処方法をいくつか解説します。まずはCSSコーダー必携ツール、Firebug（またはWeb InspectorやDragonfly）を使う方法です。ちょっとした打ち間違いや継承の問題は速攻で解決できます。
セレクターやプロパティの打ち間違い
例えば下記のようなソースコードがあったとします。
<h1>New job:<span class="sub">fix Mr. Gluck's hazy TV, PDQ!</span></h1>
h1, span {
margin: 0;
padding: 0;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
"メイリオ", Meiryo;
}
h1 {
padding: 3px 10px;
border-left: solid 10px #127899;
color: #1a8bb2;
font-size: 24px;
}
.sub {
display: block;
border-top: dotted 1px #127899;
font-size: 14px;
}
正しく書かれていれば、次の画像のように表示されます。
CSSをわざと間違えてみます。
クラスセレクターのsubをsabに変えてみました。当然、ルールは効かなくなります。Firebug等で該当箇所を見てみます。今回はWeb Inspectorを使っています。
すると、ルールごと全く表示されていないのがわかります。この場合、ルールが全く適用できていないので、セレクターが間違っている可能性が大です。
今度は一部のプロパティ名だけ間違えます。
displayをdisprayにしました。
この場合、ルール全体は適用できていますが、間違ったプロパティだけが適用されていません。間違った場所はとても簡単に見つかります。ここでは省きますが、値に間違いがあった場合も同様です。
継承の問題
次に、やっかいな継承の問題です。これはコード自体には間違いがないので気づきにくいのですが、ツールを使えば簡単に見つかります。
取り消し線が引かれているプロパティに注目してください。これは、別のコードによって上書きされ、無効になっていることを意味しています。ここでは意図的に上書きしていますが、セレクターの書き方によっては意図しない上書きでルールが無効にされてしまう場合があります。
これは、セレクターの詳細度の問題です。セレクターの指定は細かければ細かいほど、高い優先度を持ちます。IDセレクターは100点、クラスセレクターは10点、要素セレクターは1点という点数をもっており、点数が高いセレクターが優先されます。
正しくスタイルをかいても、別のところで詳細度の高い指定がされている場合、ルールが反映されません。新しく書いたルールの詳細度を上げてやる、または別のルールの詳細度を下げてやれば解決できます。
記号等の間違い
波括弧の閉じ忘れや、間違って角括弧にしてしまった場合などは少し見つけづらいかもしれません。ルール全体が効かなくなるので、セレクターの問題かと思いきやそうではないためです。こういった文法上の間違いを見つけてくれるエディターを使っていれば問題ないかもしれませんが、そうでないときはW3Cの提供するValidation Serviceを使うのも良いでしょう。これについては、第21回 CSSコーディングでハマったら…で紹介しています。
たとえば角括弧を使ってしまうと、こんな風にエラーを出してくれます。
これを見れば「3行目のh1のルールのとこで角括弧が使われてるんだな」というのがすぐにわかりますね。
なるべく、気合いによるにらめっこ解決ではなく、便利なツールで素早く解決し、さくさくコーディングしましょう！
では次回もお楽しみに。
