Edited at

レスポンシブWebデザイン

More than 3 years have passed since last update.


レスポンシブWebデザインとは

・ユーザーが閲覧する端末の画面サイズに合わせて、ページのデザインやレイアウトを自在に操るウェブ制作の手法


歴史

・アメリカの Ethan Marcotte 氏が考案、命名したウェブ制作の手法

・日本でも2011年後半から、この手法を取り入れたウェブサイトが登場し始めた


レスポンシブWebデザインを支える3つの手法

・フレキシブル・グリッドをベースとしたレイアウト

 レイアウト幅が可変する段組みレイアウト

・フレキシブル・イメージ/メディア

 フレキシブル・グリッド内でサイズが可変するイメージやビデオ等のメディア

・メディアクエリ

 画面サイズを判別してスタイルを指定できるCSS3の機能


レスポンシブWebデザインの5つのレイアウトパターン

以下にまとめています

レスポンシブWebデザインの5つのレイアウトパターン


コンテンツを起点に考えるウェブ制作とコンテンツ戦略

ユーザが求めるコンテンツを提供するには、最低限、以下の3つを知る(または想定できる)必要がある


  1. 提供する相手は誰か

  2. 提供するコンテンツの目的は何か

  3. ユーザーは、いつ、どこで、どのようにコンテンツを消費するのか

これらを考え、調査し、想定することで、ユーザーに喜ばれるコンテンツが提供できる


レスポンシブWebデザインの特徴


実装の流れ

画面サイズとして扱われるデバイスの横幅を設定する


viewportの設定例.html

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">


プロパティ
内容
デフォルト値

width
viewportの横幅
980px

height
viewportの縦幅
横幅とスペクと火から計算される値

initial-scale
倍率の初期値
表示範囲から計算される値

minimum-scale
倍率の最小値
0.25

maximum-scale
倍率の最大値
1.6

user-scalable
拡大縮小の可否
yes


プレークポイント


  • 特定のウィンドウサイズを境としてスタイルを切替るポイント幅のこと

  • 〜480px:ちょっと古いスマートフォン

  • 480〜780px:現在よく使われるスマートフォン

  • 768px〜:タブレットやPC、高解像度のスマートフォン

参考サイト

レスポンシブWebデザインにおけるブレイクポイント設定調査(2012年10月29日発表)

ブレークポイント参考サイト Asial BLOG


デバイス特性の判別方法


CSS3のメディアクエリ


  • PC用のCSS、スマホ用のCSSと、読み込むCSSを振り分ける

3つの記述方法

CSSソース内に記述する場合


モバイル用のスタイルを記述例.css

@media screen and (max-width: 768px) {

}


タブレット用のスタイルを記述例.css

@media screen and (min-width: 768px) {

}

<head>内のlink要素のCSSに記述する場合


ウィンドウ幅768px以下の場合にmobailecssを読み込む例.css

<link rel="stylesheet" media="screen and (max-width: 768px)" href="mobile.css" />



ウィンドウ幅768px以上の場合にtabletcssを読み込む例.css

<link rel="stylesheet" media="screen and (min-width: 768px)" href="tablet.css" />


CSSの@importに記述する場合


ウィンドウ幅768px以下の場合にmobailecssを読み込む例.css

@import url("mobile.css")screen and (max-width: 768px)



ウィンドウ幅768px以上の場合にtabletcssを読み込む例.css

@import url("tablet.css")screen and (min-width: 768px)



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

メリット
デメリット

メンテナンスがしやすい
設計/開発の難しさ

一貫性のあるデザイン
異なるデバイスの異なる利用方法

URLの統一化
IE8以下で動かない

検索に強い
-

スマートフォン非対応のCMSでも対応できる
-


参考書籍

レスポンシブWebデザイン テクニックブック