トピックス

  1. HOME
  2. トピックス
  3. ホームページ制作
  4. コーディング全般
  5. レスポンシブでWEBサイトを作るときに覚えておきたいメディアクエリ

レスポンシブでWEBサイトを作るときに覚えておきたいメディアクエリ

今では当たり前のようにレスポンシブWEBデザインという手法により作られたWEBサイトが増えてきていますが、そんなレスポンシブWEBデザインに欠かせないのが、「メディアクエリ」です。

メディアクエリは、画面の幅ごとに見た目を切り替えるブレイクポイントの指定に使われますが、実は指定できるのは幅だけではありません。メディアクエリをひとつでも多く知っておくことで、より限定的に見た目を変えることもできます。この記事ではレスポンシブでコーディングする際に覚えておくと便利ないろいろなメディアクエリをご紹介いたします。

※この記事ではcss内に記述する方法についてのみご紹介します

そもそもメディアクエリとは?

メディアクエリとは、端末の種類や画面の表示などの特定の条件で見え方を変える時に利用するものです。

また、メディアクエリには大きく分けて、「メディアタイプ」と「メディア特性」の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 ピクセル解像度です。主に「max-resolution 」,「min-resolution 」といった最大・最低の解像度を指定します。
hover 要素をホバーできるかの有無です。「none」、「hover」といったホバーの有無を指定します。

実は上記以外にもメディア特性はたくさんあります。ただし、非推奨となっているもの、そもそもブラウザが未対応の特性もあります。なので、より限定的なものを使用する際には一度そのメディア特性が対応されているかどうかも調べてみてください。

メディアクエリの書き方

css内に書く時、メディアクエリは下記のように記載します。メディアタイプとメディア特性の主なものを記載します。またメディアクエリは複数のメディア特性を組み合わせることもできます。書き方次第で様々な条件を指定する子が可能です。

覚えておきたいメディアクエリ

上記のようにメディアクエリには様々な種類があります。通常のWEBサイトをコーディングする場合、主に使用されるのは横幅のブレイクポイントを決める指定が多いですよね。下記ではそれ以外に覚えてくととても便利なメディアクエリをご紹介します。

ブラウザのメディアクエリ

各ブラウザでのメディアクエリをまとめました。見ているブラウザで少し見え方が違うと言われることもありますよね。そういうときには特定のブラウザを指定するメディアクエリを覚えておくと対処が簡単になります。

画面の縦・横向き指定

上記でも紹介しましたが、最近はスマホやタブレットを持っている方が多くなっています。そのため、ユーザーの使用を想定して、縦や横での見た目の調整も重要です。

まとめ

ブレイクポイントの指定は当たり前のように使うメディアクエリですが、ブラウザなどの指定もできるようになるととても便利です。またスマホユーザーが多い現在ではいろいろな使い方をする人がいるため、使用環境を考慮しなければいけない場面も少なくありません。またメディアクエリには追加や非推奨といった移り変わりもありますので、ご注意ください。

この記事をシェアする

おすすめ記事