今更ではありますが、2012年頃からWeb業界で話題になっているレスポンシブWebデザイン、スマートフォンの普及率が急速に拡大したこともあり、2014年現在では数多くのコーポレートサイトや個人サイトなどで広く取り扱われてきています。レスポンシブWebデザインという言葉自体は当たり前のように耳にしてきましたが、いつか余裕が出来たら取り掛かろうと先延ばしにしてきた現実にムチを打って、ここでひとつ基礎をまとめていきたいと思います。
レスポンシブWebデザインってなに？
2010年5月25日に、米国のマサチューセッツ州のEthan Marcotte(イーサン・マルコッテ)氏が「A List Apart」で紹介した制作手法です。
PCやスマートフォン、タブレットごとに複数のデザインやHTMLを制作するのではなく、ディスプレイの幅に合わせてデザインを最適化する方法。簡単に言ってしまえば、ひとつのHTMLソースでマルチデバイスに対応する手法です。このレスポンシブWebデザインでは、CSS3のMedia Queries(メディアクエリ)を利用することによりデバイス幅を認識し、ディスプレイサイズに応じてCSSを切り替えて表示するようにします。
どのようなディスプレイサイズで表示させるのか？
前述の通り、レスポンシブWebデザインでは、Media Queriesというものを利用して、いくつかの異なるウィンドウサイズに応じてCSSをそれぞれ適応させることでデザインレイアウトを変更していきますが、では実際にどのようなウィンドウサイズで切り替える必要があるのかを考えていきます。
▼主なデバイスのディスプレイサイズは以下の通りです。
■ Desktop
PC/iPad(ランドスケープ)…1024px
Android(ランドスケープ)…800px
■ Tablet
iPad(ポートレート)…768px
■ スマートフォン
Android(ポートレート)…480px
iPhone(ランドスケープ)…480px
iPhone(ポートレート)…320px
細かく分類すれば限がありませんが、大きく分けると上記の3分類になっていると思います。
そのような現状から、切り替えるディスプレイサイズの境目(これをブレイクポイントと呼びます。)は以下の3つに設定されている場合が多いでしょう。
- 480px以下(スマートフォン)
- 481px以上～768px未満(タブレット)
- 768px以上(PC)
やはり、iPhoneやiPadを基準にして考えるケースが一般的とされています。
どのようにデザインレイアウトを考えるべきか？
各デバイス用のレイアウト設計は、作り込むことはせずにワイヤーフレーム程度に留めておいた方が良いでしょう。そして、各デバイスごとに、配置する位置、大きさ、コンテンツをしっかりと決めておきます。すべてのデバイスで同じ機能やコンテンツが必要であるケースは少ないと考えられますので、それぞれのデバイスをどのような環境下で使用されるかなどを想定したコンテンツ選択や配置を設計していきます。
レスポンシブWebデザインに必要不可欠な考え方3つ
1.フルードグリッド(Fluid Grid)
フルードグリードとは、例えばデバイス幅が1024pxのPCでサイトを見た場合に2カラムであるものを、480pxのiPhoneで見た場合に、1カラムに切り替えて表示させることを言います。
また、グリッドの幅を相対値で指定していきます。
相対値の求め方は、「求める要素の幅÷親要素の幅×100%」
2.フルードイメージ(Fluid Image)
・画像を可変形式にする必要があります。
|
1 |
<img src="photo.jpg" alt="dog" /> |
|
1 2 3 4 |
img { max-midth: 100%; height: auto; } |
3.メディアクエリ(Media Queries)
|
1 2 3 4 5 |
@media screen and (min-width: 769px){ body { background-color:"#ccc"; } } |
「メディアがスクリーンであり、デバイス幅が769px以上の場合bodyの背景色をグレーにする。」という意味になります。
★ メディアクエリによるCSSの振り分け方
◆ link要素のmedia属性で指定する場合
|
1 |
<link rel="stylesheet" href="css/pc.css" media="screen and (min-width: 769px)"> |
◆ CSS内で@importで指定する場合
|
1 |
@import url("pc.css") screen and (min-width: 769px); |
◆ CSS内で@mediaで指定する場合
|
1 2 3 |
@media screen and (min-width: 769px){ /* styleをここに記述 */ } |
モバイルファーストという考え方
スタイルシートを記述していく際には、モバイル端末(スマートフォン)を優先的に考えた記述をしていくようにします。そのことを「モバイルファースト」と言いますが、なぜそのようにするかというとモバイルを優先にCSSを記述していくことにより記述しなければならない項目が格段に少なくなり無駄なく指定が可能になります。
|
1 2 3 4 5 6 7 8 |
body { background-color: blue; } @media screen and (min-width:480px){ body { background-color: green; } } |
▼ すべてのデバイス共通
▼ デバイス幅が480px以上は個別指定
▼ デバイス幅が480px以上、768px以上はそれぞれ個別指定
viewposrt設定について
viewportとは、ブラウザのウィンドウサイズに該当する概念です。
例えば、iPhoneのviewport値は980pxなので、何も設定しない場合幅980pxのウィンドウサイズでアクセスしている状態になります。スマートフォン用に、smartphone.cssなどを用意してメディアクエリで分岐させていてもviewport設定をしていないと適用されないので注意しましょう。
▼ viewport設定の仕方は以下の通りです。
|
1 |
<meta name="viewport" content="[プロパティ値]=[値](,[プロパティ値]=[値]...)"> |
▼ プロパティの内容には以下のようなものがあります。
| width | viewportの横幅 |
| height | viewportの縦幅 |
| initia-scalel | 倍率の初期化 |
| minimum-scale | 最小倍率 |
| maximum-scale | 最大倍率 |
| user-scalable | ズーム操作の可否 |
一般的には、デバイスサイズの「width=device-width」で設定すると覚えておけば良いと思います。
ここまでで基本の考え方をざ～っと流してきましたが、レスポンシブWebデザインにはいくつかの注意点があります。内容についてはまた別記事で記載していきます。