1. 第5回
レスポンシブ Web デザインを
学ぼう！実装編

2. レスポンシブ・ウェブデザイン
おさらい

3. リキッド < レスポンシブ
• ブラウザの幅に応じて • デバイスの幅に応じて、
要素の幅のみが可変 要素の幅だけでなく、
色、背景なども可変
• ベースレイアウトは同じ。
デバイス毎に個別の
レイアウトにはならない
• レイアウトもデバイス毎に
適したものに可変
• コンテンツ量も可変

4. レスポンシブ・ウェブデザイン
実装の基本
• HTML+CSSはワンソース
• 基本、リキッドレイアウト
• 「viewport」を指定する
• ブラウザ幅のブレイクポイント
• CSS3「Media Queries」で実装する
• CSSによるレイアウト

5. viewport

6. viewport を指定しない場合
PCサイトを、スマホで
980px そのまま見た場合がこれ。

7. viewport
• メタ要素 <meta name="viewport" ...>
• モバイル端末ブラウザの表示幅を指定
• ピンチによる、拡大縮小の可否の指定
• 拡大縮小の最大・最少倍率の指定

8. <meta name="viewport"
content="width=640">
640px
ちなみに、Appleのサイトだと、
<meta name="viewport"
content="width=1024">

9. <meta name="viewport"
content="device-width">
端末毎に設定されている横幅。
各端末によって違います。
320px
480px

10. breakpoint
320 ~ 480px 480 ~ 768px 768 ~ 1980px ~
480px 768px

11. Orientation
端末の向きを変えて使用できる。
「Screen Orientation」
向きでブラウザの横幅が変わる。
portrait
320px
landscape
480px

12. 主要スマートフォンの解像度
機種名 ディスプレイサイズ devicePixelRatio ブラウザのサイズ
iPhone4 / iPhone4S 640 × 960 2 320 × 480
iOS
iPhone3G / 3GS 320 × 480 1 320 × 480
HT-03A 320 × 480 1 320 × 480
Xperia / Xperia arc 480 × 854 1.5 320 × 570
HTC Desire HD 480 × 800 1.5 320 × 533
Android Nexus One 480 × 800 1.5 320 × 533
Galaxy S 480 × 800 1.5 320 × 533
IS03 640 × 960 2 320 × 480
Galaxy Tab 600 × 1024 1.5 400 × 682

13. device-width
Desktop，iPhone、Android、縦向き、横向き。
それぞれの端末や使い方で、
ブラウザの横幅はバラバラ。

14. breakpoint
640px
とかでも可。
何をモバイルとみなすか、で任意の判断

15. Media Queries
W3C Recommendation 19 June 2012
@media screen and (min-width: 768px) {...}
<link media="screen and (min-width:
768px)" href="xxxx.css">
@import url("xxxx.css") only screen and
(min-width: 768px);

16. @media
ひとつのCSSファイル内で振り分け
@media screen and (min-width: 481px) {
body {...}
}
@media screen and (min-width: 768px) {
body {...}
}

17. link
複数CSSファイルをlink要素で読み込む
<link href="phone.css">
<link media="screen and (min-width:
481px)" href="tablet.css">
<link media="screen and (min-width:
768px)" href="desktop.css">

18. @import
複数CSSファイルをimportで読み込む
@import url("phone.css");
@import url("tablet.css") only screen and
(min-width: 481px);
@import url("desktop.css") only screen
and (min-width: 768px);

19. @media がおすすめ。
複数CSSファイルに分けると、
デバイスごとのスタイルを管理しやすくなるが...
単一のCSSファイルにした方が、
HTTPリクエスト数を節約でき、
スマートフォン3G回線環境にも
優しい。

20. Media Queries
W3C Recommendation 19 June 2012
width min-width: 400px color min-color: 4
height min-width: 400px color-index min-color-index: 1
device-width device-width: 800px monochrome min-monochrome: 1
device-height device-height: 600px resolution min-resolution: 300dpi
orientation portrait | landscape scan progressive | interlace
aspect-ratio aspect-ratio:2/2 grid grid:0
http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/

21. CSS - float & display
480px 768px
#main #main #sub1 #main
#sub1 #sub2
#sub2
#sub2
#sub1 #sub1 #sub1
float: none; float: left;
display: none; display: block; display: block;

22. CSS レイアウトに使えるプロパティ
ボックスを横並べ ボックスの幅を簡単リキッドに
display: box-flex: 1;
box;
ボックスの幅に、余白も含める
flexbox;
table-cell; box-sizing: border-box;
inline-block;
ボックスの表示順を自在に
box-ordinal-group: 1;

23. CSS Framework
• CSSの枠組み、基礎設計
• CSSの初期化と、共通スタイルの定義
• ブラウザ依存なスタイルを吸収
• グリッドシステム
毎回イチからCSSを作るのは大変
基礎設計を定義したフレームワークが便利

24. グリッドシステム
均等なカラムとガター(隙間)から成り立つ
レイアウトのガイドライン

25. グリッドシステム
サイト設計がぶれない
レイアウトデザイン品質の維持、コンテンツの配置や設計
秩序を与えるもの
デザインに整合性を与えるもの
グリッドはあくまでガイドライン。
デザインの個性を奪うものではない。

26. img要素に、width・height属性を
指定すると比率がおかしくなる
img {
max-width: 100%;
height: auto;
}

27. IE7でイメージが汚く縮小される
imgSizer.js
IE7 を使う
Chrome
Safari
http://unstoppablerobotninja.com/entry/
fluid-images/

28. CSS Sprite での
テキスト飛ばしは、こう書くのが
主流（らしい）
.sprite {
.sprite {
text-indent: -9999px;
text-indent: 100%;
}
white-space: nowrap;
overflow: hidden;
実際、9999px分のエリアが
}
描画されてしまうので、負荷
が高めになる。
描画させるエリアを最小限に。