レスポンシブデザインを始めよう!〜初級編〜

今ではパソコンだけでなくスマートフォンやタブレットと様々なデバイスがあり、最近ではデバイスに合わせて表示を最適化(モバイルフレンドリー)することが求められています。
その方法の1つとしてGoogleの推奨するレスポンシブデザインがあります。
スマートフォンが出始めた頃はそれぞれ別のファイルを用意して対応する「サーバーで振り分ける」方法が主流でしたが、CSS3の普及や通信速度や技術の向上により「CSSで振り分ける」方法が主流となり、現在多くのサイトがこのレスポンシブデザインを採用しています。
今回は、そんな需要の高いレスポンシブデザインの特徴や作り方基本的な作成の仕方をまとめてみました。

  1. レスポンシブデザインとは
  2. viewportについて知ろう!
  3. Media Queriesで振り分けよう
  4. 【練習】viewportとMedia Queriesの指定をしてみよう!
CSSで振り分ける

1. レスポンシブデザインとは

1つのソース(HTMLファイル)を端末のサイズに合わせて、自動的にデザインを調整させ最適化させる技法です。
HTMLファイルにviewportを指定し、Media Queries(メディアクエリ)というCSS3の機能を使いデザインを自動的に調整させるためにCSSを振り分けます。

レスポンシブの特徴を知ろう

レスポンシブデザインが現在の主流とはいえ、サイトによってはデータ量やサイトの目的がパソコンとモバイルでは異なるケースもあるので、必ずしもレスポンシブデザインが最適という訳ではありません。
レスポンシブデザインの長所や短所を理解して使い分けが必要です。

レスポンシブデザインのメリット

  • 1つのソース(htmlファイル)なので管理がしやすい
  • モバイルフレンドリーなサイトとしてユーザーさんやGoogleさんに褒めてもらえる
  • URLの1本化ができ、SEOにも有利
  • SNSのシェアがしやすい
  • デバイスごとのバラきがなくルールにのっとったデザイン設計ができる

レスポンシブデザインのデメリット

  • CSSが複雑なのでテクニックや工数が必要
  • モバイルには不要な内容を非表示にしても同じ量のデータを読み込むので重くなる事もある
  • 古いブラウザに対応させることが難しい

2. viewportについて知ろう!

vviewportとはスマートフォンやタブレットで表示される際の見え方の指定をする<meta>タグです。<head>内に記述し、表示領域を指定します。

記述例:
<meta meta name="viewport" content="width=device-width, initial-scale=1">

あまり深く考えず上記のviewportを指定するタグを<head>タグに突っ込んでしまっても問題はないのですが、Webデザインをする上でも必要な概念なので少し掘り下げてみたいとおもいます。

viewportを知るために覚えておきたい2つのサイズ

スマートフォンなどのデバイスでは様々な基準のサイズが使用されている為少しややこしいです。
viewportやMedia Queriesを使ってデザインする時につまづきやすい箇所なので注意しましょう。
ピクセルには物理的なデバイスピクセルと、ブラウザを通して表示される理論上のCSSピクセルの2種類があます。WebデザインではこのCSSピクセルを基本に考えます。たとえば、Retinaデイスプレイは高解像度(ppi)なので1inch内にあるピクセルの数が多いです。倍の解像度だと倍のピクセルがあり物理的には1つ1つのピクセルは小さくなります。しかし、解像度で左右される単位をCSSの基準にするとデバイスの解像度で表示にバラつきが出てしまうので、ブラウザで同じようにできる様に表示されるCSSピクセルがWebでは使われているのです。
(CSSではこのCSSピクセルが採用されているので、特に指定する必要はありません。)

1. ディスプレイサイズ(device pixel)
物理的な画面のピクセルで、デバイス・端末がサポートする物理的な最小単位の事です。
画面が同じサイズ(inch)でも画面の解像度(ppi)が高いとディスプレイサイズは比例して高くなります。
例えば少し古いデバイスになってしまいますが、iPhone3系とPhone4系では画面サイズは同じ3.5inchです。
しかしiPhone3系はは320px x 480pxに対しRetinaディスプレイで2倍の解像度のiPhone4系では640px x 960pxとなります。
2. デバイスサイズ(css picxel)
Webデザインで使われるピクセルでブラウザで表示される理論上のピクセルです。
同じinchでも解像度が違ったら、画像やCSSをどのように指定すればいいのか途方に暮れてしまいますよね。
だって、320px x 480px の画像を表示したら、iPhone3系で画面いっぱいに広がるのにiPhone4系では1/4に見えてしまうなんて…。
しかしそんなバカな事は起こりません。なぜなら、デバイスサイズ(別名CSSピクセル)がWeb上では基本使われるからです。
(よく見る解説ではデバイスサイズと表記されている事が多いかな?と思うのでデバイスサイズで押し切ります。)
css picxel(CSSピクセル)とは、Webデザインで使われるpx(ピクセル)で理論上のピクセルです。
これに対し、物理的なpx(ピクセル)の事をdevice pixel(デバイスピクセル)呼び、上記のディスプレイサイズと呼ばれます。
以前はcss pixel(CSSピクセル)もdevice pixel(デバイスピクセル)も意識しないでも何も問題がありませんでしたが、Rutinaディスプレイが誕生しこの2つのpx(ピクセル)の数が異なってしまったので注意が必要になります。

デバイスサイズ = ディスプレイサイズ ÷ デバイスピクセル比(device pixel ratio)

レスポンシブデザインでのviewportの指定の仕方

viewportのcontent属性にはプロパティがいくつかあり指定できますが、レスポンシブデザインで重要なのがwidthinitial-scaleです。
widthには「数値」と「device-width」が指定でき、
「数値」ではディスプレイサイズを仮想的に指定しています。初期値の数値の980pxのままだとディスプレイに980pxが横いっぱいに収まるように表示されるので実際のサイズよりう〜〜〜んと縮小さてれ表示されてしまいます。
「device-width」は実際のデバイスサイズ(css pixelで計算された大きさ)がそのまま適応されます。
例えばiPhone3系やPhone4系を初期値で表示すると、デバイスサイズ(横)320px内に980pxを縮小表示するので、1/3以下で見えてしまいます。
「device-width」以外の数値で設定してしまうと、デバイスサイズごとに分岐し
CSSを振り分けるレスポンシブデザインがうまく機能しなくなってしまうので注意しましょう。
initial-scaleはそのページにあるコンテンツのサイズによって表示の倍率を0〜10の数値で指定できます。
このプロパティは初期値は、表示範囲から計算されるので思わぬ挙動をする場合があります。
拡大や縮小を自動で行わないように一般的には「1」を指定します。

その他のプロパティは場合に応じて使い分けます。
追加する際は半角のカンマ(,)を間に入れて繋げてください。
minimum-scaleは基本的に縮小表示はしないので「1」で指定する場合が多いです。
逆にmaxmam-scaleは、初期値の160%(1.6)表示だと小さすぎる、または大きすぎる場合指定しています。
user-scalableも指定できますが、このプロパティはユーザーが自分で画面の拡大・縮小ができるかどうかの指定なので、初期値「yes」のままで問題はないかと思います。
この値が「no」の場合のメリットはタップの反応が良くなるという点とアプリのような表現ですが、画像や文字を大きく見たいユーザーにとっては拡大ができないと見にくくて不便です。ターゲットユーザーやサイトの作りによってどう指定するかは大きく変わると思います。

googleも推奨する基本的なviewportの書き方
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
※その他のプロパティを追加させる場合は、カンマ(,)を間に挟む形で追加します。

viewportのプロパティ一覧

width(表示領域の幅)

数値(px)
指定された数値を横幅とする。
device-width
デバイスのCSS用のサイズ(デバイスサイズ)を横幅とする。
初期値
980px
height(表示領域の高さ)

数値(px)
指定された数値を縦幅とする。
device-width
デバイスのCSS用のサイズ(デバイスサイズ)を縦幅とする。
初期値
9横幅とアスペクト比から計算される値
initial-scale(倍率の初期値)

倍率(少数も可)
倍率の最小値(minimum-scale)〜倍率の最大値(maximum-scale)の範囲の数値。
25%の場合は0.25、160%の場合は、1.6と記述。
minimum-scale(倍率の最小値)

倍率(少数も可)
0〜10の範囲の数値。
0%の場合は0、100%は1、1000%の場合は10と記述。
初期値
0.25
maximum-scale(倍率の最大値)

倍率(少数も可)
0〜10の範囲の数値。
0%の場合は0、100%は1、1000%の場合は10と記述。
初期値
1.6
user-scalable(ユーザのスケール操作)

yes(1) / no(0)
ユーザーが自分で拡大や縮小をできるか指定。
noの場合フォーム入力時のスクロールも不可になる。
初期値
yes

3.Media Queriesで振り分けよう

Media Queriesでの振り分け方は2つあります。
1つはCSSソース内で振り分ける方法、もう1つは<head>の内の<link>要素で読み込むCSSを振り分ける方法です。
(どちらの方法でもレスポンシブデザインの指定はできるのですが、各デバイスの共通部分もまとめて指定できるCSSソース内での振り分けの方が私は好きです。)

Media Queriesの考え方

Media Queriesはデバイスのサイズによって振り分けます。
〜以上〜以下はこのスタイルを適応させますといった形で振り分けるのですが、この〜以上または〜以下といった分岐点をブレイクポイントと呼びます。
このブレイクポイントで大まかにパソコン表示、タブレット表示、スマートフォン表示と分けます。デザインによっては、タブレット表示はな無しでスマートフォン用とそれ以上と分けたり、逆にパソコンでの中でも大きい画面用と小さい画面用で分けたりします。
ブレイクポイントはデバイスの主流のサイズやデザインに合わせて柔軟に変更できます。(日々、スマートフォンやタブレットのサイズが進化しているので、ブレークポイントもそれに合わせて変化しています。)
気になっているサイトのソースからブレイクポイントを色々たどってみると参考になるかもしれません。

Media Queriesの指定の仕方

CSSは基本的に上から書かれたものを読み込み、同じものを指定した場合は下に書いてあるものが上に書いてあるものを上書きします。
この性質を生かしてMedia Queriesの書き順は大きく2パターンあります。
まずは「共通部分&スマートフォン->タブレット->パソコン」または「共通部分&パソコン->タブレット->スマートフォン」とCSSを上書きしていくパターン。
それから「共通部分」と「スマートフォン」OR「タブレット」OR「パソコン」といった形で、個々のサイズに合わせた設定のみを適用させ上書きしない方法。この場合は、Media Queriesの範囲に漏れや重複がないように注意する必要があります。
どちらも一長一短ですが、適応されないサイズのMedia QueriesのCSSも読み込まれるのでなるべく記述する量が少なく、かつメンテナンスもしやすい様に書き順に工夫をするといいと思います。
(個人的には記述の量がそこまで変わらないのなら、メンテナンス性を重視して上書きをなるべくしないCSSの記述をしたいと思ってます。)
基本的には横幅でMedia Queriesを指定しますが、背景画像などを指定する際には高さで指定する時もあります。(今回は横幅を中心に説明します。興味がある方は調べてみてください。)

Media Queriesの範囲に漏れや重複について説明します。
例えばスマートフォン用のレイアウトの横幅のブレイクポイントが737pxで、それ以上大きいものはタブレット用、さらに1024pxからパソコン用のレイアウトと分けたいとします。
その場合「〜737px、738px〜1023px、1024〜」の全ての範囲漏れなくCSSを指定して上る必要があります。
よくある間違えとして、「400px〜730px、737px〜1030、1024〜」のように「〜399px」「731px〜736px」の指定が抜けてしまっていたり、「737px〜1030px」と「1024px〜」のように1034px〜1030pxが重複してしまってしまい後に記述したスタイルが上書きしてしまう事があります。このようにブレイクポイントの漏れや重複があると思ったレイアウトを反映させられない事があるので気を付けましょう。
これはheaderで振り分ける際にも注意が必要な点です。

Media Queryで範囲を指定する際は、範囲の漏れや重複がないように気をつけよう!

CSSで振り分ける

CSSで振り分ける際はCSSの中に@media screen and (範囲指定){}という記述をします。
この{}の中に適応させたいCSSを記述します。範囲の指定は〜以上、〜以下の2パターンあって、組み合わせることも可能です。

@media screen and (範囲指定){
/*CSSの指定*/
}

CSSの範囲の指定の仕方

〜以下(横幅)
@media screen and (max-width:ブレイクポイント) {}
〜以上、〜以下(横幅)
@media screen and (min-width:ブレイクポイント) and (max-width:ブレイクポイント) {}
〜以上(横幅)
@media screen and (min-width:ブレイクポイント) {}

<head>内の<link>で振り分ける

最近はあまり使われないのですが<head>タグ内に指定範囲内の表示用CSSのリンクにMedia Queriesを指定して、適応するファイルを指定する方法です。

<link rel=”stylesheet” href=”指定範囲用の CSSファイルのパス” media=”screen and (範囲)”>

C<head>内の<link>の範囲の指定の仕方

〜以下(横幅)
<link rel=”stylesheet” href=”指定範囲用の CSSファイルのパス” media=”screen and (max-width:ブレイクポイント)”>
〜以上、〜以下(横幅)
<link rel=”stylesheet” href=”指定範囲用の CSSファイルのパス” media=”screen and (min-width:ブレイクポイント) and (max-width:ブレイクポイント)”>
〜以上(横幅)
<link rel=”stylesheet” href=”指定範囲用の CSSファイルのパス” media=”screen and (min-width:ブレイクポイント)”>

4.【練習】viewportとMedia Queriesの指定をしてみよう!

テキストエディタとブラウザ(Chromeがおすすめ)を開いき、練習用ファイルをダウンロードしてください。

viewportの設定

まずは、viewportの指定をしてみようと思います。ダウンロードしたファイルの中から「responsive1.html」をテキストエディタとブラウザで開いてみてください。
スマートフォンでも表示を確認してみましょう。viewport指定なしの大きさの見え方をお手持ちのスマートフォンで開いて表示を見比べてみてください。

パソコンだと表示は特に変わりはないと思いますが、スマートフォンだと「980px」の青いボックスが横いっぱいに表示されていると思います。
これはviewportのデフォルト値が980pxなので、スマートフォンなどのモバイルデバイスでは画面の横幅を980pxと仮定して表示しているからです。
「.width_980」のwidthを980px以上にしてみてください。
コンテンツが980px以上大きなサイトだと横スクロールが必要なのでモバイルユーザーにとってはとても使いにくくなってしまいます。

viewportのwidthをdevice-width(cssピクセル)で指定してみよう

それでは、viewportのwidthを指定してみてください。
先ほど記述したhtmlソースの<head>タグ内に以下のコードを記述してください。
どのように見えるでしょうか?一度、予想してみてから表示を確認してみてください。
Domo (viewportのwidthをdevice-widthに指定した時の大きさの見え方)

<meta meta name="viewport" content="width=device-width">

思ったように見えましたか?多分、予想していた表示にはなっていないと思います。
なぜならinitial-scaleの初期値が聞いてしまっているので、勝手に表示範囲から倍率を指定されてしまっているからです。
とっても厄介ですね…。

viewportのwidthをinitial-scale(倍率)で指定してみよう

それでは、viewportのinitial-scaleを指定してみましょう。
勝手に倍率を変えられないように100%表示、つまり「1」を指定してください。
Domo (viewportのwidthをinitial-scaleに指定した時の大きさの見え方)

<meta meta name="viewport" content="width=device-width,initial-scale=1">

どう見えましたか?
おそらく、スマートフォンでは自分の使用しているサイズの枠が横幅ぴったりに収まったとおもます。
レスポンシブデザインの際のviewportは上記の設定がベストですね。その他のプロパティも試してみましょう。

Media Queriesの指定をやってみよう

responsive2.htmlとresponsive2.cssを開いてみてください。
responsive2.htmlに書いてあるブレイクポイントで<div>の背景をCSSで振り分けてみましょう。
CSSの指定の仕方は以下のコードです。指定できたら保存してブラウザで確認してみましょう。


div {
	background: 指定の色;
}			
		

Related Posts