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

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

リキッド

• ブラウザの幅に応じて要素の幅のみが可変

• ベースレイアウトは同じ。デバイス毎に個別のレイアウトにはならない

• デバイスの幅に応じて、要素の幅だけでなく、色、背景なども可変

• レイアウトもデバイス毎に適したものに可変

• コンテンツ量も可変

< レスポンシブ

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

• CSS3「Media Queries」で実装する• CSSによるレイアウト

viewport

viewport を指定しない場合

980pxPCサイトを、スマホでそのまま見た場合がこれ。

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

viewport

640px

<meta name="viewport" content="width=640">

ちなみに、Appleのサイトだと、

<meta name="viewport" content="width=1024">

320px

<meta name="viewport" content="device-width">

480px

端末毎に設定されている横幅。各端末によって違います。

breakpoint

768px480px

320 ~ 480px 480 ~ 768px 768 ~ 1980px ~

Orientation

portrait

landscape

端末の向きを変えて使用できる。「Screen Orientation」

向きでブラウザの横幅が変わる。

480px

320px

iOSiOS

AndroidAndroidAndroidAndroidAndroidAndroidAndroid

iPhone4 / iPhone4S 640 × 960 2 320 × 480

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

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

機種名 ディスプレイサイズ devicePixelRatio ブラウザのサイズ

主要スマートフォンの解像度

device-width

Desktop，iPhone、Android、縦向き、横向き。

それぞれの端末や使い方で、ブラウザの横幅はバラバラ。

breakpoint

640px

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

Media QueriesW3C 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);

@media

@media screen and (min-width: 481px) {　　body {...}}

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

ひとつの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">

複数CSSファイルをlink要素で読み込む

@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);

複数CSSファイルをimportで読み込む

@media がおすすめ。

複数CSSファイルに分けると、デバイスごとのスタイルを管理しやすくなるが...

単一のCSSファイルにした方が、HTTPリクエスト数を節約でき、スマートフォン3G回線環境にも優しい。

Media QueriesW3C Recommendation 19 June 2012

color min-color: 4

color-index min-color-index: 1

monochrome min-monochrome: 1

resolution min-resolution: 300dpi

scan progressive | interlace

grid grid:0

width min-width: 400px

height min-width: 400px

device-width device-width: 800px

device-height device-height: 600px

orientation portrait | landscape

aspect-ratio aspect-ratio:2/2

http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/

CSS - float & display

#main#sub1

#sub2

#main

#sub1

#sub2

#main

#sub2

768px480px

float: none; float: left;display: none; display: block; display: block;

#sub1 #sub1 #sub1

CSS レイアウトに使えるプロパティ

display:box;flexbox;table-cell;inline-block;

box-flex: 1;

box-ordinal-group: 1;

box-sizing: border-box;

ボックスを横並べ ボックスの幅を簡単リキッドに

ボックスの表示順を自在に

ボックスの幅に、余白も含める

CSS Framework• CSSの枠組み、基礎設計• CSSの初期化と、共通スタイルの定義•ブラウザ依存なスタイルを吸収•グリッドシステム

毎回イチからCSSを作るのは大変

基礎設計を定義したフレームワークが便利

グリッドシステム

均等なカラムとガター(隙間)から成り立つレイアウトのガイドライン

グリッドシステム

レイアウトデザイン品質の維持、コンテンツの配置や設計秩序を与えるもの

サイト設計がぶれない

グリッドはあくまでガイドライン。デザインの個性を奪うものではない。

デザインに整合性を与えるもの

img要素に、width・height属性を指定すると比率がおかしくなる

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

ChromeSafari

IE7

IE7でイメージが汚く縮小される

imgSizer.jsを使う

http://unstoppablerobotninja.com/entry/fluid-images/

.sprite { text-indent: 100%; white-space: nowrap; overflow: hidden;}

.sprite { text-indent: -9999px;}

CSS Sprite でのテキスト飛ばしは、こう書くのが主流（らしい）

実際、9999px分のエリアが描画されてしまうので、負荷が高めになる。

描画させるエリアを最小限に。