Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

16,047 views

Published on

  • Follow the link, new dating source: ♥♥♥ http://bit.ly/36cXjBY ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ♥♥♥ http://bit.ly/36cXjBY ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. 第5回レスポンシブ Web デザインを学ぼう!実装編
  2. 2. レスポンシブ・ウェブデザインおさらい
  3. 3. リキッド < レスポンシブ• ブラウザの幅に応じて • デバイスの幅に応じて、 要素の幅のみが可変 要素の幅だけでなく、 色、背景なども可変• ベースレイアウトは同じ。 デバイス毎に個別の レイアウトにはならない • レイアウトもデバイス毎に 適したものに可変 • コンテンツ量も可変
  4. 4. レスポンシブ・ウェブデザイン実装の基本• HTML+CSSはワンソース• 基本、リキッドレイアウト• 「viewport」を指定する• ブラウザ幅のブレイクポイント• CSS3「Media Queries」で実装する• CSSによるレイアウト
  5. 5. viewport
  6. 6. viewport を指定しない場合 PCサイトを、スマホで980px そのまま見た場合がこれ。
  7. 7. viewport• メタ要素 <meta name="viewport" ...>• モバイル端末ブラウザの表示幅を指定• ピンチによる、拡大縮小の可否の指定• 拡大縮小の最大・最少倍率の指定
  8. 8. <meta name="viewport" content="width=640">640px ちなみに、Appleのサイトだと、 <meta name="viewport" content="width=1024">
  9. 9. <meta name="viewport" content="device-width"> 端末毎に設定されている横幅。 各端末によって違います。320px 480px
  10. 10. breakpoint320 ~ 480px 480 ~ 768px 768 ~ 1980px ~ 480px 768px
  11. 11. Orientation 端末の向きを変えて使用できる。 「Screen Orientation」 向きでブラウザの横幅が変わる。 portrait 320px landscape 480px
  12. 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 × 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
  13. 13. device-widthDesktop,iPhone、Android、縦向き、横向き。それぞれの端末や使い方で、ブラウザの横幅はバラバラ。
  14. 14. breakpoint 640px とかでも可。何をモバイルとみなすか、で任意の判断
  15. 15. 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);
  16. 16. @mediaひとつのCSSファイル内で振り分け@media screen and (min-width: 481px) {  body {...}}@media screen and (min-width: 768px) {  body {...}}
  17. 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. 18. @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);
  19. 19. @media がおすすめ。複数CSSファイルに分けると、デバイスごとのスタイルを管理しやすくなるが...単一のCSSファイルにした方が、HTTPリクエスト数を節約でき、スマートフォン3G回線環境にも優しい。
  20. 20. 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/
  21. 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. 22. CSS レイアウトに使えるプロパティボックスを横並べ ボックスの幅を簡単リキッドにdisplay: box-flex: 1; box; ボックスの幅に、余白も含める flexbox; table-cell; box-sizing: border-box; inline-block; ボックスの表示順を自在に box-ordinal-group: 1;
  23. 23. CSS Framework• CSSの枠組み、基礎設計• CSSの初期化と、共通スタイルの定義• ブラウザ依存なスタイルを吸収• グリッドシステム 毎回イチからCSSを作るのは大変基礎設計を定義したフレームワークが便利
  24. 24. グリッドシステム均等なカラムとガター(隙間)から成り立つレイアウトのガイドライン
  25. 25. グリッドシステムサイト設計がぶれないレイアウトデザイン品質の維持、コンテンツの配置や設計秩序を与えるものデザインに整合性を与えるものグリッドはあくまでガイドライン。デザインの個性を奪うものではない。
  26. 26. img要素に、width・height属性を指定すると比率がおかしくなる img { max-width: 100%; height: auto; }
  27. 27. IE7でイメージが汚く縮小される imgSizer.js IE7 を使うChrome Safari http://unstoppablerobotninja.com/entry/ fluid-images/
  28. 28. CSS Sprite でのテキスト飛ばしは、こう書くのが主流(らしい) .sprite { .sprite { text-indent: -9999px; text-indent: 100%; } white-space: nowrap; overflow: hidden;実際、9999px分のエリアが }描画されてしまうので、負荷が高めになる。 描画させるエリアを最小限に。

×