今では当たり前のようにレスポンシブWEBデザインという手法により作られたWEBサイトが増えてきていますが、そんなレスポンシブWEBデザインに欠かせないのが、「メディアクエリ」です。メディアクエリは、画面の幅ごとに見た目を切り替えるブレイクポイントの指定に使われますが、実は指定できるのは幅だけではありません。メディアクエリをひとつでも多く知っておくことで、より限定的に見た目を変えることもできます。この記事ではレスポンシブでコーディングする際に覚えておくと便利ないろいろなメディアクエリをご紹介いたします。覚えておきたいメディアクエリブラウザのメディアクエリ画面の縦・横向き指定まとめそもそもメディアクエリとは?メディアクエリとは、端末の種類や画面の表示などの特定の条件で見え方を変える時に利用するものです。メディアクエリには大きく分けて、「メディアタイプ」と「メディア特性」の2種類に分けられます。どんな種類があるかは次の項目でご紹介します。メディアクエリ一覧メディアクエリの種類には、「メディアタイプ」と「メディア特性」メディアタイプメディアタイプは主に何で見ているか、端末の種類を指定するのに使われます。以前はもっと種類があったようですが、現在は非推奨になっています。メディアタイプは任意の項目ですが、入力がなければ「all」が適応されます。all全ての端末に適応されます。screen主に画面に適応されるものです。パソコンの画面、スマホの画面などです。print印刷されるときに適応されるものです。画面ではなく印刷するときにだけ表示させるなどが可能になります。speechスクリーンリーダーなどの音声合成に適応されます。メディア特性メディア特性は、見ている環境などの特性に応じて見た目を切り替えるものです。メディア特性には値が存在しますので、メディアタイプとは記述方法が異なります。widthビューポート(表示サイズ)の横幅です。「max-width」,「min-width」といった最大・最低の横幅を指定します。heightビューポート(表示サイズ)の高さです。「max-height」,「min-height」といった最大・最低の高さを指定します。aspect-ratioビューポートの横幅と高さから算出のアスペクト比です。「max-aspect-ratio」,「min-aspect-ratio」といった最大・最低のアスペクト比を指定します。orientationビューポートの向きです。「portrait」の縦長の時、「landscape」の横長の時を指定します。resolutionピクセル解像度です。」といった最大・最低の解像度を指定します。hover要素をホバーできるかの有無です。「none」、「hover」といったホバーの有無を指定します。実は上記以外にもメディア特性はたくさんあります。非推奨となっているもの、そもそもブラウザが未対応の特性もあります。限定的なものを使用する際には一度そのメディア特性が対応されているかどうかも調べてみてください。メディアクエリの書き方css内に書く時、メディアクエリは下記のように記載します。メディアタイプとメディア特性の主なものを記載します。メディアクエリは複数のメディア特性を組み合わせることもできます。書き方次第で様々な条件を指定する子が可能です。}覚えておきたいメディアクエリ上記のようにメディアクエリには様々な種類があります。通常のWEBサイトをコーディングする場合、主に使用されるのは横幅のブレイクポイントを決める指定が多いですよね。下記ではそれ以外に覚えてくととても便利なメディアクエリをご紹介します。ブラウザのメディアクエリ各ブラウザでのメディアクエリをまとめました。見ているブラウザで少し見え方が違うと言われることもありますよね。いうときには特定のブラウザを指定するメディアクエリを覚えておくと対処が簡単になります。上記でも紹介しましたが、最近はスマホやタブレットを持っている方が多くなっています。そのため、ユーザーの使用を想定して、縦や横での見た目の調整も重要です。}まとめブレイクポイントの指定は当たり前のように使うメディアクエリですが、ブラウザなどの指定もできるようになるととても便利です。スマホユーザーが多い現在ではいろいろな使い方をする人がいるため、使用環境を考慮しなければいけない場面も少なくありません。メディアクエリには追加や非推奨といった移り変わりもありますので、ご注意ください。