Queries(メディアクエリ)とは、ブラウザのウィンドウサイズやデバイスの向き(スマホ等)などの条件によって、スタイルを適用するデバイスなどを限定するCSS3で追加された機能です。いわゆるレスポンシブなど、ウィンドウサイズに応じて適用するスタイルを変えることが基本的な用途になると思います。指定できる条件や記述できる場所はいろいろありますが、まずは基本ということで、ブラウザ幅によってスタイルを切り替える指定をCSS内に記述する使い方から説明します。下が基本構文と指定例です。allなど、linkタグでCSSを読み込む時に指定するmedia属性と同じメディアタイプを指定します。PCやスマホのブラウザを対象にする場合はscreenになります。スマホなどで画面の向き(縦横)を指定するorientationなど、スタイルを適用する条件を指定します。max-widthを使います。上の例で#containerがbody直下にある場合、ブラウザ幅が959px以下では#containerの幅がブラウザ幅いっぱい、ブラウザ幅が960px以上の場合#containerの幅は960pxで、左右のマージンをautoにすることでセンタリングしています。body自体に幅指定がされていない(幅100%)ことが前提です。補足ですが、上の例のmax-width指定部分は説明のために記載していますが、max-width指定がなくても同じ結果になります。@importと、HTMLのhead内でCSSを読み込むlinkタグのmedia属性です。max-は、widthなど数値で指定する条件につけることで、〇〇以上などの指定をする場合に使います。min-widthに600pxを指定した場合は「ブラウザ幅が600px以上」という意味になります。notキーワードandキーワードは上の例でも使いましたが、もう少し詳しく説明します。}andは〇〇かつ〇〇という指定方法で、上の例ではメディアタイプがscreenかつウィンドウサイズが541px~960pxまでという指定になります。Queriesに対応していないブラウザに指定を無視させるためものです。非対応ブラウザに確実に無視させることができるので、無駄なものを読ませないために使います。}notキーワードは否定(条件を反転させる)効果があります。日本語でいうと「〇〇ではない」です。指定できる条件は多いので、使う頻度が高そうなものに絞って説明します。2)Retinaディスプレイ採用のデバイスは1インチ当たりのピクセル数が多いため、そのまま表示するとサイト全体が小さく表示されてしまいます。そのため、CSS上のピクセルに倍(縦×横で4倍)などのピクセルを割り当てるものが多いので、例えば、device-pixel-ratioが倍以上のデバイスのbackground-imageに倍サイズの画像を指定することで、より滑らかな画像を表示することができます。今のところwebkit系ブラウザの独自実装なので、-webkit-のベンダープレフィックスが必要です。条件をカンマで区切ることで複数の条件を指定できます。CSSセレクタの複数指定と同じ効果です。Queriesの書き方でした。web関係のことなどをしているPC大好き人間です。Aboutweb制作をする人や2か月後の自分のために、技術系のことを中心に覚えたことや思いついたことを書くために始めたブログです。Codery.ページトップ。