問2 メディアクエリ(Media Queries)

メディアクエリ(Media Queries)の記述として、正しいものはどれか。(全て選択)

@media (max-width: 600px) { }
@media all and (max-width: 600px) { }
@media screen and (min-width: 600px) and (max-width: 800px) { }
@media screen and (color) or print and (monochrome) { }
@media screen and (color), print and (monochrome) { }

答える

正解！おめでとう！

解説

メディアクエリ(Media Queries)は、端末の特徴に応じてcssを切り替えるもの。

メディアクエリの書き方はこちら。

@media メディア型 and (メディア特性) { }

メディア型は、どの端末を対象にするのかを指定するもの。

メディア特性は、どの端末を対象にするのかをより詳細に指定するもの。

メディア型に指定できる値はこちら。

値	詳細
all	すべての端末
screen	ディスプレイ
print	プリンター
projection	プロジェクタ
tv	テレビ
tty	文字幅が固定の端末
handheld	携帯用端末
spech	音声出力端末
braille	点字ディスプレイ
embossed	点字プリンタ

メディア特性に指定できる値はこちら。

値	詳細
width	表示領域の幅
min-width	表示領域の最小幅
max-width	表示領域の最大幅
height	表示領域の高さ
min-height	表示領域の最小の高さ
max-height	表示領域の最大の高さ
aspect-ratio	表示領域の縦横比
min-aspect-ratio	表示領域の最小の縦横比
max-aspect-ratio	表示領域の最大の縦横比
device-width	端末の幅
min-device-width	端末の最小幅
max-device-width	端末の最大幅
device-height	端末の高さ
min-device-height	端末の最小の高さ
max-device-height	端末の最大の高さ
min-device-aspect-ratio	端末の縦横比
min-device-aspect-ratio	端末の最小の縦横比
max-device-aspect-ratio	端末の最大の縦横比
resolution	端末の解像度
min-resolution	端末の最小の解像度
max-resolution	端末の最大の解像度
color	色のビット数
min-color	色の最小のビット数
max-color	色の最大のビット数
color-index	色参照テーブルの項目数
min-color-index	色参照テーブルの最小項目数
max-color-index	色参照テーブルの最大項目数
monochrome	白黒ディスプレイのビット数
min-monochrome	白黒ディスプレイの最小のビット数
max-monochrome	白黒ディスプレイの最大のビット数
grid	ディスプレイの表示方法(メディア型がttyの場合は1、それ以外は0)
orientation	端末の向き
scan	画面の走査方法(メディア型がtvの場合のみ)

選択肢の解説に移るよ。
メディアクエリでは、allとandを省略することができる。そのため、下の2つはどちらも同じ意味になるよ。

@media (max-width: 600px) { }
@media all and (max-width: 600px) { }

どちらも、表示領域の幅が600px以上の全ての端末という意味。

また、andを使って条件を複数付けることができるよ。

@media screen and (min-width: 600px) and (max-width: 800px) { }

表示領域の幅が600px以上～800px以下のディスプレイという意味。

さらに、カンマを使っていずれかの条件を満たせば適用することもできるよ。

@media screen and (color), print and (monochrome) { }

カラーディスプレイまたはモノクロ印刷であれば適用するという意味。

カンマを使ってorと同じことができる。ただし、orを使っても動作しないので、カンマを使うこと。

そのため、下の4つが正解。

@media (max-width: 600px) { }
@media all and (max-width: 600px) { }
@media screen and (min-width: 600px) and (max-width: 800px) { }
@media screen and (color), print and (monochrome) { }

おしい…もう一度…！

次の問題

前の問題