移行中の知識
メディアクエリー
Media Query
定義
メディアクエリー（Media Query）とは、viewport size、resolution、input capability、user preferenceなどのmedia featureが条件に合う時だけCSS等を適用する仕組みです。responsive layoutでは幅に応じたlayout変更へよく使いますが、Media Queryそのものは「mobile用CSS」という意味ではなく、環境条件に応じてpresentationを切り替えるための条件分岐です。
関連
対比すると分かりやすい概念
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
article pageのresponsive layout
十分な幅がある時だけ2columnにする
見るポイント
narrow viewportでは本文とasideを1columnで流し、contentが無理なく並べられる幅になった時だけMedia Queryで2columnへ切り替える。特定のphone機種名ではなくlayoutの成立条件を見る。
animated web interface
motion preferenceへ応答する
見るポイント
width条件とは別にprefers-reduced-motionを確認し、non-essential motionを減らす。Media Queryはscreen sizeだけの機能ではないことを区別する。
responsive navigation / card interaction
hoverできることを画面幅から推測しない
見るポイント
desktop幅だからmouse、mobile幅だからtouchと決めず、hoverやpointerのmedia featureを使う場合は実際のinput capabilityを条件にする。hoverでだけ現れる重要操作は避け、keyboardやtouchでも到達できる状態を保つ。
注意
誤解しやすい点
- Media Queryをsmartphone判定だけに使う仕組みだと理解する。
- viewport幅からtouch・mouse・hover可否まで一括して推測する。
- device modelごとに細かく条件を増やせばresponsive品質が上がると考える。
- CSSで条件分岐できることと、どのlayoutが適切かというdesign判断を同一視する。
関連
関連する概念
出典