development2017.01.06レスポンシブデザインを始めよう!〜初級編〜今ではパソコンだけでなくスマートフォンやタブレットと様々なデバイスがあり、最近ではデバイスに合わせて表示を最適化(モバイルフレンドリー)することが求められています。その方法の1つとしてGoogleの推奨するレスポンシブデザインがあります。スマートフォンが出始めた頃はそれぞれ別のファイルを用意して対応する「サーバーで振り分ける」方法が主流でしたが、CSS3の普及や通信速度や技術の向上により「CSSで振り分ける」方法が主流となり、現在多くのサイトがこのレスポンシブデザインを採用しています。今回は、そんな需要の高いレスポンシブデザインの特徴や作り方基本的な作成の仕方をまとめてみました。レスポンシブデザインとは1つのソース(HTMLファイル)を端末のサイズに合わせて、自動的にデザインを調整させ最適化させる技法です。Queries(メディアクエリ)というCSS3の機能を使いデザインを自動的に調整させるためにCSSを振り分けます。Queriesができ、サイズに合わせてスタイルを振り分けたりとより細やかな設定が可能になりました。レスポンシブの特徴を知ろうレスポンシブデザインが現在の主流とはいえ、サイトによってはデータ量やサイトの目的がパソコンとモバイルでは異なるケースもあるので、必ずしもレスポンシブデザインが最適という訳ではありません。レスポンシブデザインの長所や短所を理解して使い分けが必要です。viewportについて知ろう!vviewportとはスマートフォンやタブレットで表示される際の見え方の指定をする<meta>タグです。<head>内に記述し、表示領域を指定します。initial-scale=1">あまり深く考えず上記のviewportを指定するタグを<head>タグに突っ込んでしまっても問題はないのですが、Webデザインをする上でも必要な概念なので少し掘り下げてみたいとおもいます。viewportを知るために覚えておきたい2つのサイズスマートフォンなどのデバイスでは様々な基準のサイズが使用されている為少しややこしいです。Queriesを使ってデザインする時につまづきやすい箇所なので注意しましょう。ピクセルには物理的なデバイスピクセルと、ブラウザを通して表示される理論上のCSSピクセルの2種類があます。WebデザインではこのCSSピクセルを基本に考えます。Retinaデイスプレイは高解像度(ppi)なので1inch内にあるピクセルの数が多いです。倍の解像度だと倍のピクセルがあり物理的には1つ1つのピクセルは小さくなります。解像度で左右される単位をCSSの基準にするとデバイスの解像度で表示にバラつきが出てしまうので、ブラウザで同じようにできる様に表示されるCSSピクセルがWebでは使われているのです。(CSSではこのCSSピクセルが採用されているので、特に指定する必要はありません。pixel)物理的な画面のピクセルで、デバイス・端末がサポートする物理的な最小単位の事です。画面が同じサイズ(inch)でも画面の解像度(ppi)が高いとディスプレイサイズは比例して高くなります。古いデバイスになってしまいますが、iPhone3系とPhone4系では画面サイズは同じ3.5inchです。960pxとなります。picxel)Webデザインで使われるピクセルでブラウザで表示される理論上のピクセルです。同じinchでも解像度が違ったら、画像やCSSをどのように指定すればいいのか途方に暮れてしまいますよね。画像を表示したら、iPhone3系で画面いっぱいに広がるのにiPhone4系では1/4に見えてしまうなんて...。そんなバカな事は起こりません。デバイスサイズ(別名CSSピクセル)がWeb上では基本使われるからです。(よく見る解説ではデバイスサイズと表記されている事が多いかな?と思うのでデバイスサイズで押し切ります。picxel(CSSピクセル)とは、Webデザインで使われるpx(ピクセル)で理論上のピクセルです。pixel(デバイスピクセル)呼び、上記のディスプレイサイズと呼ばれます。pixel(デバイスピクセル)も意識しないでも何も問題がありませんでしたが、Rutinaディスプレイが誕生しこの2つのpx(ピクセル)の数が異なってしまったので注意が必要になります。ratio)レスポンシブデザインでのviewportの指定の仕方viewportのcontent属性にはプロパティがいくつかあり指定できますが、レスポンシブデザインで重要なのがwidthとinitial-scaleです。「数値」ではディスプレイサイズを仮想的に指定しています。初期値の数値の980pxのままだとディスプレイに980pxが横いっぱいに収まるように表示されるので実際のサイズよりう〜〜〜んと縮小さてれ表示されてしまいます。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」の場合のメリットはタップの反応が良くなるという点とアプリのような表現ですが、画像や文字を大きく見たいユーザーにとっては拡大ができないと見にくくて不便です。ターゲットユーザーやサイトの作りによってどう指定するかは大きく変わると思います。content=”width=device-width,initial-scale=1′′>※その他のプロパティを追加させる場合は、カンマ(,)を間に挟む形で追加します。数値(px)指定された数値を横幅とする。device-widthデバイスのCSS用のサイズ(デバイスサイズ)を横幅とする。数値(px)指定された数値を縦幅とする。device-widthデバイスのCSS用のサイズ(デバイスサイズ)を縦幅とする。倍率(少数も可)倍率の最小値(minimum-scale)〜倍率の最大値(maximum-scale)の範囲の数値。25%の場合は0.25、160%の場合は、1.6と記述。倍率(少数も可)0〜10の範囲の数値。0%の場合は0、100%は1、1000%の場合は10と記述。倍率(少数も可)0〜10の範囲の数値。0%の場合は0、100%は1、1000%の場合は10と記述。no(0)ユーザーが自分で拡大や縮小をできるか指定。noの場合フォーム入力時のスクロールも不可になる。Queriesでの振り分け方は2つあります。1つはCSSソース内で振り分ける方法、もう1つは<head>の内の<link>要素で読み込むCSSを振り分ける方法です。(どちらの方法でもレスポンシブデザインの指定はできるのですが、各デバイスの共通部分もまとめて指定できるCSSソース内での振り分けの方が私は好きです。Queriesはデバイスのサイズによって振り分けます。〜以上〜以下はこのスタイルを適応させますといった形で振り分けるのですが、この〜以上または〜以下といった分岐点をブレイクポイントと呼びます。このブレイクポイントで大まかにパソコン表示、タブレット表示、スマートフォン表示と分けます。デザインによっては、タブレット表示はな無しでスマートフォン用とそれ以上と分けたり、逆にパソコンでの中でも大きい画面用と小さい画面用で分けたりします。ブレイクポイントはデバイスの主流のサイズやデザインに合わせて柔軟に変更できます。(日々、スマートフォンやタブレットのサイズが進化しているので、ブレークポイントもそれに合わせて変化しています。)気になっているサイトのソースからブレイクポイントを色々たどってみると参考になるかもしれません。Queriesの指定の仕方CSSは基本的に上から書かれたものを読み込み、同じものを指定した場合は下に書いてあるものが上に書いてあるものを上書きします。Queriesの書き順は大きく2パターンあります。「共通部分&スマートフォン->タブレット->パソコン」または「共通部分&パソコン->タブレット->スマートフォン」とCSSを上書きしていくパターン。それから「共通部分」と「スマートフォン」OR「タブレット」OR「パソコン」といった形で、個々のサイズに合わせた設定のみを適用させ上書きしない方法。Queriesの範囲に漏れや重複がないように注意する必要があります。QueriesのCSSも読み込まれるのでなるべく記述する量が少なく、かつメンテナンスもしやすい様に書き順に工夫をするといいと思います。(個人的には記述の量がそこまで変わらないのなら、メンテナンス性を重視して上書きをなるべくしないCSSの記述をしたいと思ってます。Queriesを指定しますが、背景画像などを指定する際には高さで指定する時もあります。(今回は横幅を中心に説明します。興味がある方は調べてみてください。Queriesの範囲に漏れや重複について説明します。スマートフォン用のレイアウトの横幅のブレイクポイントが737pxで、それ以上大きいものはタブレット用、さらに1024pxからパソコン用のレイアウトと分けたいとします。その場合「〜737px、738px〜1023px、1024〜」の全ての範囲漏れなくCSSを指定して上る必要があります。ある間違えとして、「400px〜730px、737px〜1030、1024〜」のように「〜399px」「731px〜736px」の指定が抜けてしまっていたり、「737px〜1030px」と「1024px〜」のように1034px〜1030pxが重複してしまってしまい後に記述したスタイルが上書きしてしまう事があります。このようにブレイクポイントの漏れや重複があると思ったレイアウトを反映させられない事があるので気を付けましょう。これはheaderで振り分ける際にも注意が必要な点です。(範囲指定){}という記述をします。この{}の中に適応させたいCSSを記述します。範囲の指定は〜以上、〜以下の2パターンあって、組み合わせることも可能です。Queriesを指定して、適応するファイルを指定する方法です。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>タグ内に以下のコードを記述してください。どのように見えるでしょうか?一度、予想してみてから表示を確認してみてください。content="width=device-width">思ったように見えましたか?多分、予想していた表示にはなっていないと思います。initial-scaleの初期値が聞いてしまっているので、勝手に表示範囲から倍率を指定されてしまっているからです。viewportのwidthをinitial-scale(倍率)で指定してみようそれでは、viewportのinitial-scaleを指定してみましょう。勝手に倍率を変えられないように100%表示、つまり「1」を指定してください。content="width=device-width,initial-scale=1">どう見えましたか?おそらく、スマートフォンでは自分の使用しているサイズの枠が横幅ぴったりに収まったとおもます。レスポンシブデザインの際のviewportは上記の設定がベストですね。その他のプロパティも試してみましょう。Queriesの指定をやってみようresponsive2.htmlとresponsive2.cssを開いてみてください。responsive2.htmlに書いてあるブレイクポイントで<div>の背景をCSSで振り分けてみましょう。CSSの指定の仕方は以下のコードです。指定できたら保存してブラウザで確認してみましょう。