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

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

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

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

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

viewport

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

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

breakpoint320 ~ 480px 480 ~ 768px 768 ~ 1980px ~ 480px 768px

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

主要スマートフォンの解像度機種名ディスプレイサイズ 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 × 533Android 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

device-widthDesktop，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ひとつのCSSファイル内で振り分け@media screen and (min-width: 481px) { body {...}}@media screen and (min-width: 768px) { body {...}}

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">

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

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

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

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;

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

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

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

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

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

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

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

http://w3q.jp	6271
http://fnya.cocolog-nifty.com	285
http://us-w1.rockmelt.com	8
https://si0.twimg.com	8
https://twimg0-a.akamaihd.net	6
http://a0.twimg.com	6
http://pinterest.com	3
https://twitter.com	1

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

by Naoki Matsuda on Jul 05, 2012

Accessibility

Upload Details

Usage Rights

8 Embeds 6,588

Statistics