レスポンシブの基本、メディアクエリの書き方
この方法は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による標準的なメディアクエリのブレイクポイントです。
レスポンシブに挑戦する際にテンプレートとご利用頂ければと思います。
メディアクエリで指定できる属性
ここまで、ウィンドウ(画面横幅)サイズを基準に切り替える方法をご紹介致しましたが、それ以外の指定方法と、代表的なスマートフォン・タブレットのサイズ(仕様)を紹介します。
デバイス名 | 端末解像度(縦*横) | デバイスピクセル比 | 実質解像度 |
---|---|---|---|
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の見た目の大きさは同じです。
そういった場合には、横幅とピクセル比で判定する事ができます。
メディアクエリを覚えちゃえば「レスポンシブ」も思いのままです、これは覚えておきたいですね。