レスポンシブなWeb開発に欠かせないメディアクエリですが、うまく考えて使わないと失敗することがあります。
失敗事例
Bootstrapで幅が狭まると2段から1段に変わる、というようなスタイルを使っていたのですが、その中で「2段の時は右寄せだけど、1段の時は左寄せにしたい」ということになって、自分でスタイルを書きました。その過程で、段の変わる位置を変数として書けたほうがいいな、と考えて、メディアクエリが必要な方だけBootstrap本体を呼び出すのと同じSCSSに入れました。
失敗例
//Bootstrap本体を呼ぶファイルからimport
@media(max-width:$screen-md-max){
#some_div{
float: left;
}
}
//別のファイルで定義
#some_div{
float: right;
}
そもそも論を言えば、1つのセレクタにかけるCSSを複数ファイルで定義するなんてこと自体、どう考えても適当ではないのですが…それはさておいても、このように書いたCSSは、常に右寄せとなってしまいました。
失敗要因〜詳細度
CSSの「かかり具合」、正しい用語を使えば「詳細度」という概念があります。詳しい説明をしてくれている記事があるので自分からは省略しますが、何がどれだけセレクタとして指定してあればどう優先されるか、という基準となっています。
そして、メディアクエリは、この詳細度を考える上で考慮されません。ということで、同列と判定された結果、あとから書いたメディアクエリなしのほうに上書きされてしまったということでした。
正しいかけ方
このような事態を防ぐには、
- メディアクエリ自体を、排他的になるようにかける
- メディアクエリありのCSSをあとから書く
ことで回避できます。!importantや詳細度を変えるのは、あまり対策としておすすめできない感じはします。