みなさん、お疲れ様です。
突然ですが、CSSが動かないことってありますよね。なぜ動かないのか、すぐに見つかればいいのですが、コードがぐちゃぐちゃだとどこが間違っているのか探すだけでも一苦労ということも・・・。
今回はそんなCSSの解決方法について考えたいと思います。
CSSが動かないとき、私がいつも理由として考えるのは主に以下の3つです。
①CSSファイルが正しく読み込まれていない。
②セレクタが間違っている。
③詳細度
スタイルが効いてないコードを見ると、この3つに当てはまることが多い気がします。
では、それぞれの解決方法を考えていきましょう。
①CSSファイルが正しく読み込まれていない。
これはHTMLでlinkタグで読み込むときに、パスを間違えているわけですが、これはきちんとパスを確認してあげれば大丈夫ですね。特に途中でディレクトリの構造を変更したときは注意が必要です。
②セレクタが間違っている。
単純なスペルミスもありますが、それ以外に指定したくない要素にも効いてしまっているというパターンがあります。特に要素を指定する場合は多いと思います。これを解決するには、新たにクラス名を付けるという方法もありますが、セレクタの指定方法を変えることで解決できる場合があります。以下にいくつか紹介します。すべて覚える必要はないと思いますが、知っておくと便利です。
| 子孫セレクタ （a b） |
言わずと知れた子孫セレクタ。半角スペースを空けて指定するセレクタです。子要素以下すべての内包する要素を指定できます。 |
| 子セレクタ （a>b） |
子孫セレクタと違い、子要素のみを指定します。多重構造のリストなどに使えます |
| 属性セレクタ （E[attribute=”属性値”]） |
指定した属性値のattribute属性を持つEという要素を指定するセレクタです。例えばimg[src=”photo.png”]みたいにするとその画像だけを指定するといった使い方です。
いくつかバリエーションがあります。 |
| [n] | n属性を持つ要素 ex.）[title]・・・タイトル属性を持つ |
| [n^=”a”] | 属性値がaで始まるn属性を持つ要素 ex.）[class^=”item-“]・・・item-で始まるclass属性を持つ |
| [n$=”a”] | 属性値がaで終わるn属性を持つ要素 ex.）[src$=”.png”]・・・.pngで終わるsrc属性を持つ |
| [n*=”a”] | 属性値がaを含むn属性を持つ要素 ex.）[href*=”about”]・・・aboutを含むhref属性を持つ |
| nth-child疑似クラス | その要素が何番目かで指定します。1番目のliならli:first-child、2番目ならli:nth-child(2)、最後ならli:last-childといった具合。
ちなみに偶数ならeven、奇数ならodd、3つおきなら3nという指定も可能。 |
今、紹介したものはほんの一部です。気になる方はいろいろ調べてみてください。今回は以下のサイトを参考にさせていただきました。
意外と知らない!?CSSセレクタ20個のおさらい
③詳細度
詳細度とはセレクタの優先順位のことです。順位は
１．!important
２．インライン記述（style属性）
３．IDセレクタ
４．クラスセレクタ・属性セレクタ・疑似クラス
５．要素セレクタ、疑似要素
６．ユニバーサルセレクタ
のようになっています。この順番は基本的にひっくり返らないみたいです。
ここで注意してほしいのは、JavaScriptでスタイルを設定する場合とメディアクエリーに記述する場合です。
まず、JavaScriptでスタイルを設定する場合ですが、この場合はstyle属性としてスタイルが記述されるので、CSSファイルの記述が上書きされてしまうということです。なので、JavaScriptでスタイルを変更する場合は、CSSにそのスタイルを記述しないほうがよさそうです。
2点目のメディアクエリーですが、こちらでうまくいかない人が多いみたいです。
@mediaの中に記述するのがメディアクエリーですが（ざっくりしすぎですが）、実は@media内に記述したからといって必ずその画面サイズで適用されるというわけではないのです。
例えば下の場合
この場合、画面幅600px以下でliの背景色は何色になるでしょう？
答えは、赤色です。
メディアクエリーは、その画面サイズになったときに@media内の記述を読みこむようになるだけで、優先順位は詳細度によるのです。なので@media内に記述するときにセレクタを省略して記述すると、「スタイルが効かない！」なんてことになるのです。
というわけで、@media内に記述するときはセレクタを同じにしておくのが良いと思います。
今回は概要だけまとめました。今後、機会があれば一つひとつ掘り下げてみたいと思います。