レスポンシブ・デザインを実装する3つのポイント

Web制作の基礎

【1】A flexible grid（リキッド・レイアウト）

div.wrapper{
width: 940px;
}
　↓
div.wrapper{
width: 90%;
}

　

【2】Flexible images（画像　可変）　サイズに合わせ画像が収縮

▼foreground

img {
width: 100%;
max-width: 100%;
height: auto;
display: block
}

width:100%はimgの親要素にぴったり合う。max-width:100%は画像の最大幅より大きくならない。併記している場合はwidth:100%が効く（画像の実寸より大きくなることがある）。display: blockを書いておくと確実。
▼background

#bgbox {
background-image: url(top-mainimg.png);
background-repeat: no-repeat;
background-position: center center;
background-size: auto 100%;
}

background-size: auto(X軸) 100%(Y軸)は、左右に空白出ることがある。100%(X軸) auto(Y軸)だと上下に空白が出ることがある。coverという値を指定すると、切れ目無く伸び縮みする。
　

【3】Media Queries（メディアクエリー）

　幅に応じて読み込む各デバイス用CSSを指定すること。max-width、min-widthなどで幅を切り分ける。どの数字がいいのかの決まりはないので、コンテンツの方向性によって使い分ける。
▼参考サイト
Media Queries（a collection of sites using media queries）
　
▼ワイヤーフレームの例
f:id:KA-Channel:20110916163011p:image:w380
Desctop→Tabletの切替でfloat: right →　float: noneにして解除。display: noneと指定して、幾つかの要素を非表示に。
　
▼3つのアプローチ
A:link指定
　デバイス別のCSSをHTMLにlink要素を使って指定。
　
B:読みこませ用のCSSを作って間に挟む
全部のファイルにデバイス別CSSへのリンクを書くのはナンセンスなので、「multi-screen.css」などを作って読み込む。その際は@importを使う。

/* スマートフォン */
@import url("phone.css")
only screen and (max-width:320px)

/* タブレット */
@import url("tablet.css")
only screen and (min-width:321px)
and (max-width:768px)

/* デスクトップ */
@import url("pc.css")
only screen and (min-width:769px)

　
C:@mediaを使う
CSSファイル内に直接書く。

例）幅600px以下の時だけ読み込む。
@media screen and (max-width: 600px)

BとCの組み合わせが一番スマートか。
　

CS5.5の推しポイント

  • ブラウザプレビューをDW内で出来る。
  • BrowserLabではローカルのファイル（公開前の案件）をキャプチャできる。
  • マルチスクリーンプレビューでは、ウインドウサイズは変えずに表示のサイズだけ変えられる。

便利なツール

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

  • スマホ対応≠スマホ最適化
  • メリットはワンソースでマルチデバイス化できる
  • デメリットはPC用の画像・CSSをPCサイトと同様に読み込むため（読んだ上で表示しないという仕組み）、サイトが重くなる

コンテンツの最適化が大事

　PCサイトとモバイルでは見られる文脈（コンテキスト）、ユーザーに求めること（コンバージョン）などが異なる。重要なのはその見極めとコンテンツの最適化。