こんにちは、MiYです。
以前のWebは「PCで見る」というのが第一でありそれ以外の選択肢はありませんでしたが、
最近ではスマートフォンやタブレットの登場により、ユーザーの環境も様変わりし、PC以外の端末でWebをみるという人も増加傾向にあります。
そんな中、「レスポンシブWEBデザイン」という手法が注目を集めています。
今回はそのレスポンシブの要となるメディアクエリについて取り上げたいと思います。
メディアクエリとは？
メディアクエリとは、CSS2の頃にあった media タイプを発展させたCSS3の新しい要素です。
下記のコードは既にお馴染みだと思います。
1 | <link rel="stylesheet" href="css/style.css" media="screen"> |
このコードの場合、通常のディスプレイに対して、”style.css”を適用するという事です。
つまり、ユーザーがどのような端末＝媒体でアクセスしているかは判断することができました。
例えば、大きいディスプレイと小さいディスプレイで見え方を変えたいと思った場合、媒体までしか判断ができない(条件分岐ができない)のでCSSだけではどうする事もできませんした。
媒体までしか判断できなかったメディア・タイプを拡張し”媒体の特性”まで判断できるようにしたのがメディアクエリです。
| 媒体 | screen（一般的ディスプレイ）、projection(プロジェクター)、print(プリンタ)、tv(テレビ)、all(すべて)など |
|---|
メディアクエリの書き方
では早速、メディアクエリを書いてみましょう。記述の仕方は2通りありますので順番にみてみましょう。
○link要素として指定する場合
この方法はhtmlのheadタグの中に記述する方法です。
従来のCSSファイルを読み込む方法と違いがありません、実際のコードは以下のようになります。
1 2 3 4 5 6 | <head> <link rel="stylesheet" href="style.css" media="screen and (max-width:480px)"> /** 中略 **/ </head> |
media=” ”のところを見てみると、screen の後ろに何か記述されています。
これこそがメディアクエリです。それではこれはどのような意味があるのかというと「画面サイズが480pxまではstyle.cssを読み込め」となり画面サイズ480pxまではstyle.cssに記述されているCSSが適用されます。
設定している値以上（今回の場合は横幅のサイズ）になった場合はCSSは適用されません。
指定した値まではスタイルがあたってもその範囲をでると一切CSSが当たらないのは困ります。
メディアクエリは以下のコードのようり複数用意することも可能です。
1 2 3 | <link rel="stylesheet" href="small.css" media="screen and (max-width:480px)">/* 画面サイズが480pxまでこのファイルのスタイルが適用される。*/ <link rel="stylesheet" href="medium.css" media="screen and (min-width:480px) and (max-width:1024px)"> /* 画面サイズ480pxから1024pxまではこのファイルのスタイルが適用される。 */ <link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)">/* 画面サイズ1024px以上はこのファイルはスタイルが適用される */ |
上記コードのように、分岐点（例の場合はmax-widthやmin-widthの数値）細かく指定することで、複数のファイルをその条件の時に読み込ませるといった事が可能です。
この分岐点は「ブレイクポイント」と呼ばれています。
ブレイクポイントの数や条件をもう少し細かくする事も可能ですが、細かくするほどメンテナンス性が低下しますので、大きくわけてスマートフォン向け、タブレット向け、デスクトップ向けといった端末種類でわけているサイトも多いです。
○スタイルシートに指定する場合
スタイルシートのファイルを分岐点（ブレイクポイント）毎に別のファイルを読み込む記述方法をご紹介しました。
メディアクエリはスタイルシート（CSSファイル）に直接記述することもできます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /* @media以外の所は全てのサイズで読み込まれます。 */ p { color:red; } @media screen and (min-width:480px) { /* 画面サイズが480pxからはここを読み込む */ p { color:#ededed;} } @media screen and (min-width:768px) and ( max-width:1024px) { /* 画面サイズが768pxから1024pxまではここを読み込む */ p {} } @media screen and (min-width:1024px) { /* 画面サイズが1024pxからはここを読み込む */ } |
PCのブラウザの場合、ウィンドウを広げたり縮めたりすると画面の内容が変わると思います。
ブラウザはファイルの上から下へと順番に読込HTMLに適用していきます。
上記のソースをみて、小さい画面サイズから段々大きくなっています。
このように小さいサイズから順々に指定いく方法を“モバイルファースト”と呼び、逆に大きいサイズから指定していく方法を“デスクトップファースト”と呼びます。
■デスクトップファーストの記述例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | body { background:#E4E3E4;} /* 1024px以上の幅の場合に適応される */ @media screen and (max-width: 1024px) { /* 1024pxまでの幅の場合に適応される */ body { background-color:#2262D1; } } @media screen and (max-width: 768px) { /* 768pxまでの幅の場合に適応される */ body { background-color:#f10010; } } @media screen and (max-width: 480px) { /* 480pxまでの幅の場合に適応される */ body { background-color:#F9DF2C; } } @media screen and (max-width: 320px) { /* 320pxまでの幅の場合に適応される */ body { background-color: #68B876; } } |
この様に大きいサイズから小さいサイズにすることもできますが、現在のメディアクエリの指定方法は”モバイルファースト”が圧倒的に多いです。
デスクトップファーストの場合、ブラウザの読込順序は最初に適用されるのがデスクトップ向けのスタイルからモバイル向けのスタイルとなります。
モバイル向けのスタイルにいくまでに余計なデスクトップ向けの重たいファイルなども読み込んでしまうため結果的にページ表示が遅くなるというデメリットがあります。
その為、現在は”モバイルファースト”が優勢といえます。
ユーザー目線でみると、”デスクトップファースト”にはメリットが少ないようにみえますが、”デスクトップファースト”は「最初にPCの画面」からスタイルを記述するので
デスクトップ向けのサイトを作ってきた製作者にとっては、作りやすいといえます。
ターゲットの閲覧環境が「PC重視であればデスクトップファースト」、「モバイル重視であればモバイルファースト」といったようにルールでどちらを採用するかを選んでもよいかもしれません。
少し話がそれてしまいましたが、メディアクエリは比較的緩やかな仕様ですが必ず順番に書かなくてはいけません。
モバイル向け、タブレット向け、PC向けの順番をめちゃくちゃに記述することはできません。
必ず、「大きい→小さい」か「小さい→大きい」の順番通りに指定するようにしましょう。
以下ソースの分岐はiPhoneとiPadとPCによる標準的なメディアクエリのブレイクポイントです。
レスポンシブに挑戦する際にテンプレートとご利用頂ければと思います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /* iPhone 縦 */ @media screen and (min-width:480px) { /* for iPhone Landscape (iPhone 横) */ } @media screen and (min-width:768px) and ( max-width:1024px) { /* for iPad */ } @media screen and (min-width:1024px) { /* for 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ディスプレイを搭載している機種は実際のサイズの倍の解像度をもっています。
端末の向きを判定する場合
1 2 3 4 5 6 7 8 | //縦向きの場合 @media screen and (orientation:portrait){ p {font-size: 1em; } } //横向きの場合 @media screen and (orientation:landscape){ p {font-size: 1.2em; } } |
デバイスの向きを判定するには「orientation」というプロパティになります。
portraitは縦向き、landscapeは横向きとなります。縦と横でCSSを切り替えることができます。
実際に定義した際のデモも用意しました。
スマートフォンでアクセスしiPhoneを縦から横に切り替えてみてください。
デバイスピクセル比で判断する場合
1 2 3 4 | /* Retinaディスプレイの場合に適用される */ @media screen and (-webkit-min-device-pixel-ratio:2){ p {font-size: 1.2em; } } |
デバイスのピクセル比で判断する事も可能です。
デバイスピクセル比というと、なんだか複雑に思えますが、「Retinaディスプレイか、それではないか」と言い換える事ができます。
ピクセル比は上記のiPhone/iPad 仕様表を見て頂ければと思いますが、Retinaディスプレイは2 通常のディスプレイは1となります。
メディアクエリを覚えちゃえば「レスポンシブ」も思いのままです、これは覚えておきたいですね。
いかがでしたでしょうか？
今回はメディアクエリの書き方をご紹介いたしました。
今回の記事がすこしでもお役に立てれば幸いです。
ネクストサプライズでは全てのサイトでレスポンシブデザインで作成を行い、オリジナリティ溢れるホームページを制作しております。
他とは違った唯一無二のホームページを作成したいと思っていただけましたら、ご相談・お見積り無料で承っておりますのでぜひ下記のボタンからお問い合わせください。
それでは次回更新でお会いしましょう！