コーディング /

レスポンシブの基本、メディアクエリの書き方

以前のWebは「PCで見る」というのが第一でありそれ以外の選択肢はありませんでしたが、
最近ではスマートフォンやタブレットの登場により、ユーザーの環境も様変わりし、PC以外の端末でWebをみるという人も増加傾向にあります。
そんな中、「レスポンシブWEBデザイン」という手法が注目を集めています。
今回はそのレスポンシブの要となるメディアクエリについて取り上げたいと思います。

メディアクエリとは?

メディアクエリとは、CSS2の頃にあった media タイプを発展させたCSS3の新しい要素です。

下記のコードは既にお馴染みだと思います。

このコードの場合、通常のディスプレイに対して、”style.css”を適用するという事です。
つまり、ユーザーがどのような端末=媒体でアクセスしているかは判断することができました。
例えば、大きいディスプレイと小さいディスプレイで見え方を変えたいと思った場合、媒体までしか判断ができない(条件分岐ができない)のでCSSだけではどうする事もできませんした。

媒体までしか判断できなかったメディア・タイプを拡張し”媒体の特性”まで判断できるようにしたのがメディアクエリです。

主なメディアタイプ
媒体 screen(一般的ディスプレイ)、projection(プロジェクター)、print(プリンタ)、tv(テレビ)、all(すべて)など

 メディアクエリの書き方

では早速、メディアクエリを書いてみましょう。記述の仕方は2通りありますので順番にみてみましょう。

○link要素として指定する場合

この方法はhtmlのheadタグの中に記述する方法です。
従来のCSSファイルを読み込む方法と違いがありません、実際のコードは以下のようになります。

media=” ”のところを見てみると、screen の後ろに何か記述されています。
これこそがメディアクエリです。それではこれはどのような意味があるのかというと「画面サイズが480pxまではstyle.cssを読み込め」となり画面サイズ480pxまではstyle.cssに記述されているCSSが適用されます。

設定している値以上(今回の場合は横幅のサイズ)になった場合はCSSは適用されません。
指定した値まではスタイルがあたってもその範囲をでると一切CSSが当たらないのは困ります。

メディアクエリは以下のコードのようり複数用意することも可能です。

上記コードのように、分岐点(例の場合はmax-widthやmin-widthの数値)細かく指定することで、複数のファイルをその条件の時に読み込ませるといった事が可能です。
この分岐点は「ブレイクポイント」と呼ばれています。
ブレイクポイントの数や条件をもう少し細かくする事も可能ですが、細かくするほどメンテナンス性が低下しますので、大きくわけてスマートフォン向け、タブレット向け、デスクトップ向けといった端末種類でわけているサイトも多いです。

○スタイルシートに指定する場合

スタイルシートのファイルを分岐点(ブレイクポイント)毎に別のファイルを読み込む記述方法をご紹介しました。
メディアクエリはスタイルシート(CSSファイル)に直接記述することもできます。

デモを用意しています。合わせてご覧ください。
PCのブラウザの場合、ウィンドウを広げたり縮めたりすると画面の内容が変わると思います。

ブラウザはファイルの上から下へと順番に読込HTMLに適用していきます。
上記のソースをみて、小さい画面サイズから段々大きくなっています。

このように小さいサイズから順々に指定いく方法を“モバイルファースト”と呼び、逆に大きいサイズから指定していく方法を“デスクトップファースト”と呼びます。

■デスクトップファーストの記述例

この様に大きいサイズから小さいサイズにすることもできますが、現在のメディアクエリの指定方法は”モバイルファースト”が圧倒的に多いです。
デスクトップファーストの場合、ブラウザの読込順序は最初に適用されるのがデスクトップ向けのスタイルからモバイル向けのスタイルとなります。
モバイル向けのスタイルにいくまでに余計なデスクトップ向けの重たいファイルなども読み込んでしまうため結果的にページ表示が遅くなるというデメリットがあります。
その為、現在は”モバイルファースト”が優勢といえます。

ユーザー目線でみると、”デスクトップファースト”にはメリットが少ないようにみえますが、”デスクトップファースト”は「最初にPCの画面」からスタイルを記述するので
デスクトップ向けのサイトを作ってきた製作者にとっては、作りやすいといえます。

ターゲットの閲覧環境が「PC重視であればデスクトップファースト」、「モバイル重視であればモバイルファースト」といったようにルールでどちらを採用するかを選んでもよいかもしれません。



少し話がそれてしまいましたが、メディアクエリは比較的緩やかな仕様ですが必ず順番に書かなくてはいけません。
モバイル向け、タブレット向け、PC向けの順番をめちゃくちゃに記述することはできません。
必ず、「大きい→小さい」か「小さい→大きい」の順番通りに指定するようにしましょう。

以下ソースの分岐はiPhoneとiPadとPCによる標準的なメディアクエリのブレイクポイントです。
レスポンシブに挑戦する際にテンプレートとご利用頂ければと思います。

メディアクエリで指定できる属性

ここまで、ウィンドウ(画面横幅)サイズを基準に切り替える方法をご紹介致しましたが、それ以外の指定方法と、代表的なスマートフォン・タブレットのサイズ(仕様)を紹介します。

iPhone/iPad 仕様表
デバイス名 端末解像度(縦*横) デバイスピクセル比 実質解像度
iPhone3/iPhone3GS 480px × 320px 1.0 480px × 320px
iPhone4/iPhone4S 960px × 640px 2.0 480px × 320px
iPhone5/iPhone5S/iPhone5C 1,136px × 640px 2.0 568px × 320px
iPad / iPad2 / iPad mini 1,024px × 768px 1.0 1,024px × 768px
iPad第3世代/iPad第4世代/iPad Air/iPad mini Retina 2,048px × 1,536px 2.0 1,024px × 768px

iPhone/iPadのRetinaディスプレイを搭載している機種は実際のサイズの倍の解像度をもっています。

端末の向きを判定する場合

デバイスの向きを判定するには「orientation」というプロパティになります。
portraitは縦向き、landscapeは横向きとなります。縦と横でCSSを切り替えることができます。

実際に定義した際のデモも用意しました。
スマートフォンでアクセスしiPhoneを縦から横に切り替えてみてください。

デバイスピクセル比で判断する場合

デバイスのピクセル比で判断する事も可能です。
デバイスピクセル比というと、なんだか複雑に思えますが、「Retinaディスプレイか、それではないか」と言い換える事ができます。
ピクセル比は上記のiPhone/iPad 仕様表を見て頂ければと思いますが、Retinaディスプレイは2 通常のディスプレイは1となります。

[応用] iPhone 3/3GSとiPhone4で分ける場合

Retinaディスプレイ非搭載の3/3GSと搭載している4/4Sの見た目の大きさは同じです。
そういった場合には、横幅とピクセル比で判定する事ができます。

メディアクエリを覚えちゃえば「レスポンシブ」も思いのままです、これは覚えておきたいですね。

solecolor-design

この記事を書いた人

solecolor-design

PAGE TOP