androidやiPhone・iPadなどのスマートフォンやタブレットが普及してきて、Webデザイナーもスマートフォンやタブレット用にホームページを調整しなければいけない需要が増えてきました。
レスポンシブデザインは一つのHTMLで複数のデバイスに対応させることができるので、各々のデバイス用にHTMLを作成をせずに済みます。
今回はレスポンシブデザインの作成方法についてまとめてみました。
このブログはレスポンシブWEBデザイン概論【テンプレ付き】を参考に書かせて頂きました。
[１]ワイヤーフレームを３パターン用意します。
デバイスによってレイアウトが変わるので、スマートフォン向け、タブレット向け、PC向け、タブレット向け、スマホ向けに3パターンのワイヤーフレームを用意します。
[2]素材を準備
画像素材は、ブラウザー上で直接サイズを調整をするのでこの段階ではサイズを決める必要はありません。
なので、大きめのサイズで用意しておきます。
[3]viewportの幅をデバイスのスクリーンの幅に合わせます。
header内に<meta name=”viewport” content=”width=device-width “>と記述します。
これでviewportの幅をデバイスのスクリーンの幅に合わせることができます。
（viewport：スマホ用ブラウザのサイズのこと）
[4]IE対策のjsライブラリを埋め込みます。
レスポンシブWebデザインをIEに対応させる為にjsを埋め込みます。
・Respond.jsを埋め込む方法
https://github.com/scottjehl/Respond
・Googleさんのcss3-mediaqueries.jsを埋め込む方法
http://code.google.com/p/css3-mediaqueries-js/
上記２つのいずれかをHTMLに埋め込めばOKです。
CSSの設定
[1]デバイスに合わせて画像を伸縮
style.css内に、img{ max-width : 100%}を書き、画像のサイズをブラウザーのウィンドウ幅に合わせます。
ウィンドウ幅より大きい画像を、ウィンドウ幅（または親要素の幅）に応じて、縦横比を保持したまま拡大・縮小させます。
[2]画面幅ごとにCSSを振り分けます。
「メディアクエリ」という機能を使い、画面幅ごとに異なるCSSを使用するよう設定します。
下記のソースを記述します。
@media screen and (min-width:480px) {
/*幅480px 以上の場合に使用するCSSをここに記述*/
｝
@media screen and (min-width:768px) {
/*幅768px 以上の場合に使用するCSSをここに記述*/
}
@media screen and (min-width:1024px) {
/*幅1024px 以上の場合に使用するCSSをここに記述*/
}
切り替えのポイントとなる画面幅を設定するブレイクポイントの値は「iPhone、iPad、一般的なデスクトップPC」のブラウザ幅に合わせて設定する機会が多いです。
下記の幅を参考にして下さい。
iPhone（横）480px
iPad（縦） 768px
デスクトップPC 1024px
（iPhone（縦）320pxはデフォルト値）
[3]最後に文字の設定をします。
文字の設定については、基本従来の記述でOKです。
font-size、font-family、line-heightなどを好きなように設定できます。
ただし、画面が小さくになるにつれて文字のサイズも小さくする必要があります。
特に480px 以下で、デスクトップPCの80%ぐらいのサイズになるように
font-sizeを設定します。
(Photo: Internet gratis en el aeropuerto Matecaña, Pereira, gracias a UNE by Mario Carvajal)