デバイスの幅によってそれぞれ適したcssを読み込むために必要な“メディアクエリ（Media Queries）”をしっかりと理解していますか？
この“メディアクエリ”とは、主にスマホ対応するレスポンシブデザインに必須となるタグで、メディアタイプやメディア特性によって各種対応するデバイスや、分岐条件（widthを用いた横幅のサイズ）などを指定するとことによって、Webサイトを各種デバイスに適した形で見せることができ、最近ではheadタグやcssに必ずと言って良いほど記述されていると思われます。
※アクセスしてきたデバイスの幅を読み取る“viewport（ビューポート）”の記述も必須です。
その設定・記述方法は思ったよりも簡単で、Webページに関して言えば単純に横幅を指定して読み込むcssを変えるだけのもので、後ほど詳しくご説明しますが、複雑にならないための管理方法としてひとつのcssに全てをまとめているという方も多いのではないでしょうか？
このようにメディアクエリとは、以下のようにcssファイルそのものをデバイスの幅によって変更させたり、cssファイル内で読ませるスタイルを変更することも可能です。
- 読み込むcssファイルそのものをデバイスによって変える
- 読み込むスタイルをデバイスによって変える
両者は似ているようですが、要はstyle.cssを振り分けるのか？それともcss内で読み込むスタイルを切り替えるのか？といった違いで、その場合メディアクエリの記述方法が若干異なり、基本的にデバイスの横幅を指定するだけで各種css・スタイルを適応させることができるというものです。
※ここで指定する横幅の数値をブレイクポイントと呼びます。
そのため、このメディアクエリはレスポンシブデザインには欠かせないもので、簡単に言うと…ビューポートでアクセスしてきたデバイスの横幅を取得、メディアクエリで読み込むcssを振り分けることで適宜デバイスに合った見せ方ができ、ユーザビリティにも繋がる重要な役割を果たすタグと覚えておくと良いでしょう。
では今回は、アクセスして来たデバイスによって適したcssを振り分けるために必要な“メディアクエリ”について、意味や記述方法など詳しくご説明していきたいと思います。
