Jul. 15th,2021
メディア・コンディションについて
“メディア・コンディション”とは？
1個以上のメディア・フィーチャーを“and”演算子、“or”演算子もしくは“not”演算子で組み合わせたものを“メディア・コンディション(Media Condition)”と呼びます。
@media 〚メディア・フィーチャー〛 and 〚メディア・フィーチャー〛 {
...
}
@media (〚メディア・フィーチャー〛 or 〚メディア・フィーチャー〛) {
...
}
@media not 〚メディア・フィーチャー〛 {
...
}
メディア・コンディションでは複数のメディア・フィーチャーを組み合わせることでより詳細にユーザーが使用しているデバイスやユーザー・エージェントの特性を検査することができます。
メディア・コンディションの例
@media screen and (min-width: 640px) and (scripting: enabled) {
/* 描画領域の横幅が640px以上でスクリプトが使用できるスクリーン・デバイスである場合に適用されるスタイル */
}
@media screen and (not (min-width: 640px)) and (scripting: enabled) {
/* 描画領域の横幅が640px以上ではないスクリプトが使用できるスクリーン・デバイスである場合に適用されるスタイル */
}
@media (min-width: 640px) and (color) and (prefers-color-scheme: dark) {
/* 描画領域の横幅が640px以上のカラー・デバイスでダーク・モードである場合に適用されるスタイル */
}
複雑なメディア・コンディション
3個以上のメディア・フィーチャーや複数のメディア・コンディションを“and”演算子と“or”演算子で組み合わせて一つのメディア・コンディションにすることもできます。この時、メディア・コンディションは括弧(“(”と“)”)で囲むことでグループ化することができます。
メディア・コンディションの中で複数の演算子を使用する場合には、“and”演算子、“or”演算子、“not”演算子をメディア・コンディションの同じ階層(同じ括弧の中)に混在させることはできず、括弧でグループ化して関係性を明確にして記述しなければなりません。
@media 〚メディア・フィーチャー〛 and (〚メディア・フィーチャー〛 or 〚メディア・フィーチャー〛) {
...
}
@media (〚メディア・フィーチャー〛 or 〚メディア・フィーチャー〛) and 〚メディア・フィーチャー〛 {
...
}
@media (not 〚メディア・フィーチャー〛) and 〚メディア・フィーチャー〛 {
...
}
各演算子の詳細
“and”演算子
概要
“and”演算子は演算子で組み合わせられたすべてのメディア・フィーチャーもしくはメディア・コンディションが“真”であれば“真”と判断されます。
サンプルコード
@media screen and (min-width: 640px) and (orientaion: landscape) {
/* 描画領域の横幅が640px以上で横画面のスクリーン・デバイスである場合に適用されるスタイル */
}
@media screen and (min-width: 640px) and (orientaion: landscape) and (scripting: enabled) {
/* 描画領域の横幅が640px以上で横画面でスクリプトが使用できるスクリーン・デバイスである場合に適用されるスタイル */
}
“or”演算子
概要
“or”演算子は演算子で組み合わせられたメディア・フィーチャーもしくはメディア・コンディションのうち少なくとも一つが“真”であれば“真”と判断されます。
メディア・クエリのメディア・タイプとメディア・コンディションは“and”演算子で組み合わせられるため、“or”演算子で組み合わせたメディア・コンディションをメディア・タイプの直後に置く場合は括弧(“(”と“)”)で囲まなければなりません。
サンプルコード
@media (min-width: 640px) or (orientaion: landscape) {
/*
・描画領域の横幅が640px以上
・横画面
の少なくともどちらかである場合に適用されるスタイル
*/
}
@media screen and ((min-width: 640px) or (orientaion: landscape)) {
/*
・描画領域の横幅が640px以上
・横画面
の少なくともどちらかであるスクリーン・デバイスである場合に適用されるスタイル
*/
}
“not”演算子
“not”演算子は直後にあるメディア・フィーチャーもしくはメディア・コンディションを否定し、メディア・クエリの“真”と“偽”の判断を逆転させます。
メディア・フィーチャーを2個以上組み合わせたメディア・コンディションである場合は“not”演算子の効果が及ぶ範囲を明確にするために“not”演算子とその対象となるメディア・フィーチャーもしくはメディア・コンディションを括弧(“(”と“)”)で囲まなければなりません。
@media screen and not (min-width: 640px) {
/* 描画領域の横幅が640px以上でないスクリーン・デバイスである場合に適用されるスタイル */
}
@media screen and ((not (min-width: 640px)) or (orientaion: portrait)) {
/*
・描画領域の横幅が640px以上でない
・縦画面
の少なくともどちらかであるスクリーン・デバイスである場合に適用されるスタイル
*/
}
@media screen and not ((min-width: 640px) and (orientaion: landscape)) {
/*
・描画領域の横幅が640px以上
・横画面
のいずれでもないスクリーン・デバイスである場合に適用されるスタイル
*/
}
