誰でも一度はつまずいて悩むCSS。Webデザイナーと呼ばれる人だけでなく、そのWebページを動的に実装する人、アプリを作る人、バックオフィスを作る人、WordPressをカスタマイズする人、誰でも一度はCSSを触り、そしてイライラしたことがあると思います。
今回は、CSSの仕様だとか小難しい話や上級者が好むマニアックなtipsはおいといて、「あれ、なんで崩れるの、ちゃんと書いてるはずなのに…」というときの、実際はどうせちゃんと書いてなかったパターンでよくあるポイントを紹介していきたいと思います。
このポイントはだいたいベテランになってもコーディング中にちょくちょく起こすミスで、ただしベテランにとっては「あるある」なのですぐ解決する、無意識にそのポイントを探している、というようなもの。探していなくても、目が慣れてくるとソースの「見た目」に違和感が生まれます。
言われてみればなんだそんなことか、程度のことですが、初心者が時間をかけて悩むのもここです。順番に探していきましょう。
チェックポイント1：CSSばっかり眺めてないでHTMLを見つめなおす
身も蓋もないのですが、そもそもHTMLがクソースだったというパターン。
たとえば、divを閉じていなくて後ろのパーツが全部ボックスの中に入っちゃってるよあるある。
CSS側のセレクタは.menuなのにHTML側ではclass=”memu”になっちゃってるよあるある。
後者はともかく、前者はまず、バリデータにかけましょうね。
HTMLの文法が合ってるかどうか、ありもしないタグを使っていたり、入れてはいけないタグを入れていたり。ulの直下にli以外の要素が並んでるとかあるある。
W3C Markup Validation Service
ここでページのURLを入れるか、direct inputでソースを直接ペーストして実行すれば、お前div閉じてねーし！とか教えてくれます。
次からはちゃんとCSS側のチェックポイントです。
チェックポイント2：idとclassを間違えている
身も蓋もないですが、#menuと.menuをいつの間にか間違えているパターンです。
初心者だとそもそも違いがわかってなくて混在しているっていうこともあります。
HTML側で「id=”menu”」を指定したのなら、CSSのセレクタは「#menu」。「class=”menu”」を指定したのなら、CSSのセレクタは「.menu」。
なぁんだそんなことか。そんなことだよ！
チェックポイント3：カンマや括弧、半角スペースが抜けている
複数つないだセレクタは、半角スペースを空けないとCSSでは認識されません。
divの中にあるid=”menu”を指定したいときは、
○「div #menu」
×「div#menu」
×の方は、「idがmenuのdiv」になっちゃってますね。
また、複数の要素を同時にまとめてスタイリングしたいとき、
div,
p,
a { color: #000; }
という書き方をするのですが、
- カンマがないあるある
- カンマが「.」（ドット）になってるあるある
- カンマが「:」（コロン）になってるあるある
- カンマが「;」（セミコロン）になってるあるある
- カンマの前に半角スペース入れてるあるある
- 最後のセレクタにもカンマつけちゃってるあるある
と、カンマだけでも6つもの罠がありますね。
カンマがゲシュタルト崩壊してきた。
また、colorのあとのコロンがないとか、閉じ括弧がないとか、なにかしら記述ミスがあると、その行以降のスタイルがまったく効かなくなります。
ちなみに、このミスがあるとだいたいページの途中まではきれいに表示されてるのに、途中から急にCSS切れたっぽい見た目になることが多いので、ミスをした箇所の見当がつけやすいんですよね。
保存、ブラウザチェック、保存、ブラウザチェック、ってやってるときなんかは、今書いたあたり以外まで一気に崩れたりするので、組み方の問題ではなくてどこかタイピングミスったなって想像がつきやすいです。
まあ、そんなのメリットでもなんでもないけど。
チェックポイント4：セレクタの優先順位を間違っている
CSSでは基本的に、後から書いたスタイルが、前に書いたスタイルを上書きするというルールになっています。
p {
color: #fff;
}
p {
color: #000;
}
上記のような場合、pのテキストの色は後から#000で上書きされることになります。
ただし、あとから書いたものがすべて上書きされるわけではありません。
CSSのセレクタには、タイプ別にスコアが定められていて、そのスコアの合計値が大きいものほど優先されます。
HTMLに書かれたstyle = 1000点
idセレクタ = 100点
classセレクタ = 10点
要素名 = 1点
といった具合です。
pのみだと要素名1個で1点、
p.leadだと要素名1個＋classセレクタ1個で11点。
p.lead {
#fff;
}
p {
#000;
}
上記のように書いても、p.leadは点数が高いので#fffで上書きされます。
importantなんて使ってないのになんで#fffになるの！？と悩む前に、この計算方法を覚えておきましょう。
【2016/08/16追記】
一部不適切です。いまだにCSSでつまずくあなたが最初に見つめなおすこと（2）でくわしく説明していますのでこちらをご覧ください。
チェックポイント5：どこかに同じセレクタがいる
おかしい、HTMLも間違ってないし、ちゃんとpをp.leadで上書きしてるし、p.leadのほうがあとに書いているのに、なんで直らないの…！
というとき、あなたがあとに書いたp.leadより、さらに1000行くらいあとに、p.leadがいる可能性があります。
ひょっとして、そのCSSファイルよりもあとに、別のCSSファイルを読み込んでいて、その中にp.leadがいませんか？
また、私がもっとも恐れているのは、あなたの書いたp.leadよりもずっと前に、div#content > p.leadがいるということです。
驚かずに聞いてください。
そのp.leadを書いたのは、3日前のあなたです。
番外編：なんかよくわからずにプラグインとか入れてる
jQueryでお手軽に動的なコンテンツ！アニメーション！おしゃれ！なんてやってて、HOWTOサイトの言うがままにプラグインを入れ、jquery-ui.cssだとかjquery-ui.min.cssみたいな名前のcssファイルもアップして、読み込んじゃったりして。
自分で書いたHTMLやスタイルが、動的に書き換わってしまうことは、もうおわかりですね？
SNSサービスのシェアボタンや、GoogleMapsAPIなどなど、外部サイトのプラグインを導入することはよくあるのですが、その見た目をカスタマイズしたいとき、動的に吐き出されたDOM、そのstyleに書き連ねられたwidth,height,position,etc…
ヽ(`Д´)ﾉｳﾜｧｧｧﾝ!!
いちいち出力後のHTMLソースを見て、そこで付与されたidやclassで動的に書き換わったりしなそうな名前を探して、CSSにそいつの名前を書いて、!importantってする、そんな毎日。
ある日突然、そのHTML構造が変わり、なんかページ崩れてるよって報告が来る。
(´Д｀)ﾊｧ…
私は学生時代に独学でhtml/cssを覚えましたが、当初はただの趣味でホームページを作っていたので、相談する相手もなく、つまずいたらただひたすらソースとにらめっこしていました。
いまではたいていの問題は「あるある」でしかなくて、こういう書き方をしたらこうなっちゃうのか！！という驚きはほとんど体験しなくなりました。CSS4の新セレクタなんかは驚きよりも「やっとそれができるんか…！」という気持ちのほうが大きいし。
常に自分で自分のミスを発見する必要があったことが基礎の力に繋がっていると思います。
現場の新卒の子に0からhtml/cssを教えたことがありましたが…
カンマがないとか、そういうのを自分で見つけてほしくて、何も言わずに悩んでる姿を見ていたら、「ほんとうに何も教えてくれないですねｗ」って言われたのが印象に残ってるなぁ
でも、それを見つけて( ﾟдﾟ)ﾊｯ!としてるところを見ると嬉しい。
もし私がここだよって教えてたら、あ～なるほどですねぇ～、で終わっちゃいそうな場面だけど、まさに今ひとつ成長した、っていう瞬間が見られて。
CSSでお悩みのみなさんもこの記事をヒントにたくさん( ﾟдﾟ)ﾊｯ!としてください！