コピペで済ませていませんか？改めて学び直したい「Viewport」のすべて

更新日: 2018年05月28日

Viewportとメディアクエリの関係

スマートフォン対応のWebデザインを行うときに、Viewportとともに必ずといっていいほど登場する言葉が*「メディアクエリ」*(Meria Queries)です。
しかしながら、Webデザインを勉強したての頃は、Viewportとメディアクエリを混合してしまったり、違いをよく理解していないかもしれません。
そこで、メディアクエリについても確認していきましょう。

メディアクエリとは

メディアクエリとは、デバイスの解像度やウィンドウの幅、向きなどの指定条件に合わせて、別々のCSSを適用できる機能のことをいいます。

以前はユーザーエージェント(User Agent)という端末ごとの情報によって、パソコン・スマホをJavaScriptなどをつかって判別し、デスクトップサイト用・モバイルサイト用に振り分けていました。
しかし、メディアクエリの登場により、スクリーン幅に応じてCSSを切り替えるレスポンシブデザインを行うことが可能になりました。

メディアクエリでは、link要素中のmedia属性やCSSの*@media*規則を使って、デバイスやスクリーンサイズで適用範囲を切り替えることができます。
一般的に、link要素を利用して複数ファイルを読み込むよりも、CSS中で@mediaを記載した方がHTTPリクエストの回数が少なく、ページの読み込みが早くなると言われています。

ブレイクポイント

メディアクエリを使ったCSSの切り替えでは、CSSの切り替え条件として*「ブレイクポイント」*(Break Point)を設定します。

メディアクエリの記述例

メディアタイプのみを指定する場合はこのように記述します。

@media screen {
　　* {font-size: 16px; }  
}

onlyをつけることで、メディアクエリに対応していないブラウザにはメディアクエリを読み込ませないようにできます。

@media only screen {
　　* {font-size: 16px; }  
}

また、メディアタイプとブレイクポイントを設定することもできます。

@media screen and (min-width:960px){
　　* {font-size: 16px; }  
}

効率のよいメディアクエリの書き方

一般的に、メディアクエリは「モバイルファースト」の考え方に沿って、スマートフォンなどの小さなスクリーン用から記述していきます。
その際、メディアクエリを指定していないCSS部分にはデスクトップとモバイルで共通のデフォルトのスタイルシートを記述し、メディアクエリを使った部分では、メディアクエリを指定していないデフォルトのスタイルシートとの差分を記述していきます。

@charset "utf-8";
　　// デフォルトのスタイル
@media screen and (min-width : 480px){
　　// 最小幅 480px 以上の指定
}
@media screen and (min-width : 768px){
　　// 最小幅 768px 以上の指定
}
@media screen and (min-width : 1024px){
　　// 最小幅 1024px 以上の指定
}

ブラウザは上からメディアクエリを判別していきます。
例えば上記のスタイルシートの場合、ウィンドウ幅が480px未満だと、ブラウザは以下の2つ目以降の指定を読み込みません。

このようにメディアクエリを効率よく記述することで、無駄なくスタイルシートを読み込ませることができます。