メディアクエリ(Media Queries)の記述として、正しいものはどれか。(全て選択)
正解！おめでとう！
解説
メディアクエリ(Media Queries)は、端末の特徴に応じてcssを切り替えるもの。
メディアクエリの書き方はこちら。
@media メディア型 and (メディア特性) { }
メディア型は、どの端末を対象にするのかを指定するもの。
メディア特性は、どの端末を対象にするのかをより詳細に指定するもの。
メディア型に指定できる値はこちら。
| 値 | 詳細 |
|---|---|
| all | すべての端末 |
| screen | ディスプレイ |
| プリンター | |
| 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) { }
おしい…もう一度…！
Comments