3分コーディング」のコーナーです。効率的なCSSトラブルシューティング今回は、CSSのコーディングミスをいかにさくっと見つけるか、という方法をご紹介します。「正しく書いたつもりがなぜかスタイルが反映されない」CSSを書いたことがある方であれば、きっとご経験があると思います。そんなとき、ただひたすらに目を皿のようにして間違い探しをするのは、あまりスマートな方法ではありません。ロジカルに考え、便利なツール等を使うことにより、間違いは素早く見つけることができます。考えられる原因まずは、CSSを書いたのに見た目に反映されない原因を考えてみます。原因がわかれば、自ずと対処方法も見えてきます。スペルミス、誤記、typo要するに打ち間違いという一番ベタなパターン。このパターンは地道にコードとにらめっこしてしまいがちですが、まずはいったん引いて原因の切り分けをしましょう。単純な打ち間違いであっても、それがセレクターなのか、プロパティや値なのか、または記号等なのかによって起きる問題は変わってきます。継承の問題これはもしかするとドはまりしかねない、「打ち間違いも全くなし、完璧!なのにどうして反映されないの!?」という危険なパターンです。長いコードになっていたり、CSSを複数ファイルに分割管理していたり、あるいは複数の人で1つのファイルを編集していたりする場合に起きやすいトラブルです。やっかいなパターンです。あなたは決して悪くない!ですが、その問題が発生するブラウザーをサポートするのであれば、対応せざるを得ないので、こればっかりは調べる&ノウハウを蓄積するしかない...ですが、まず問題が起きたときに「どのブラウザーでも確実に起きているのか」を調べれば、CSSのせいなのかブラウザーのせいなのかは切り分けることができます。初心者にはアリガチですが、たとえばインライン要素にwidthやheightを定義しても反映されません。こればっかりは仕様上の問題なので、勉強して覚えるしかない...かも。HTMLの問題どうにもこうにもダメだったらHTMLを疑うケースもあります。InspectorやDragonfly)を使う方法です。した打ち間違いや継承の問題は速攻で解決できます。セレクターやプロパティの打ち間違い例えば下記のようなソースコードがあったとします。14px;}正しく書かれていれば、次の画像のように表示されます。CSSをわざと間違えてみます。クラスセレクターのsubをsabに変えてみました。ルールは効かなくなります。Firebug等で該当箇所を見てみます。Inspectorを使っています。すると、ルールごと全く表示されていないのがわかります。この場合、ルールが全く適用できていないので、セレクターが間違っている可能性が大です。今度は一部のプロパティ名だけ間違えます。displayをdisprayにしました。この場合、ルール全体は適用できていますが、間違ったプロパティだけが適用されていません。間違った場所はとても簡単に見つかります。ここでは省きますが、値に間違いがあった場合も同様です。次に、やっかいな継承の問題です。これはコード自体には間違いがないので気づきにくいのですが、ツールを使えば簡単に見つかります。取り消し線が引かれているプロパティに注目してください。これは、別のコードによって上書きされ、無効になっていることを意味しています。ここでは意図的に上書きしていますが、セレクターの書き方によっては意図しない上書きでルールが無効にされてしまう場合があります。これは、セレクターの詳細度の問題です。セレクターの指定は細かければ細かいほど、高い優先度を持ちます。IDセレクターは100点、クラスセレクターは10点、要素セレクターは1点という点数をもっており、点数が高いセレクターが優先されます。スタイルをかいても、別のところで詳細度の高い指定がされている場合、ルールが反映されません。新しく書いたルールの詳細度を上げてやる、または別のルールの詳細度を下げてやれば解決できます。記号等の間違い波括弧の閉じ忘れや、間違って角括弧にしてしまった場合などは少し見つけづらいかもしれません。ルール全体が効かなくなるので、セレクターの問題かと思いきやそうではないためです。Serviceを使うのも良いでしょう。CSSコーディングでハマったら...で紹介しています。角括弧を使ってしまうと、こんな風にエラーを出してくれます。これを見れば「3行目のh1のルールのとこで角括弧が使われてるんだな」というのがすぐにわかりますね。気合いによるにらめっこ解決ではなく、便利なツールで素早く解決し、さくさくコーディングしましょう!では次回もお楽しみに。[必須入力]※画像の中の文字を半角で入力してください。研修トレーニングサービス、およびレンタル教室・会議室です。(7)RSSフィードを取得Seesaaブログ。