スマホ    新時代に乗り遅れない為の                  RWD             RESPONSIVE WEB DESIGN               INVOGUE MARK UP Div 岩村 東正13年3月5日火曜日
PART01             RWDについて   PART02             実際の構築方法について13年3月5日火曜日
PART00                  RWDについて13年3月5日火曜日
RWD             =     スマートフォンやタブレット、     PCなどあらゆるデバイスに対応する制作手法13年3月5日火曜日
なぜそうすべきなのか?13年3月5日火曜日
スマホユーザーの増加13年3月5日火曜日
4割に拡大             40             30             20             10              0                  2010年9月   2011年4月   2011...
RWD13年3月5日火曜日
スマホサイト作れば早くない?13年3月5日火曜日
良くある書かれてある                メリットとデメリット13年3月5日火曜日
メリット   単一のURLになるのでSEO面で強い   メンテナンスが楽(レイアウトによる)   デメリット   重くなる   IE13年3月5日火曜日
DEMO13年3月5日火曜日
IMJ                   http://www.imjp.co.jp/13年3月5日火曜日
食べログ                    http://tabelog.com/13年3月5日火曜日
?13年3月5日火曜日
① サイト作り直すのが面倒     ② サイトが重くなってしまうから     ③ ユーザーの目的が違うから13年3月5日火曜日
コンテンツストラテジー13年3月5日火曜日
PC        SP             位置    固定      どこでも                          走る、歩きなが             行動   座ったまま                       ...
• ユーザーがモバイル端末をどう使用するか、    なぜ使用するかを考慮し設計すること。    • コンテンツを重視すること    • 明瞭で焦点をはっきりさせること13年3月5日火曜日
モバイルファースト             コンテンツファースト             ユーザーファースト13年3月5日火曜日
13年3月5日火曜日
まとめ   ユーザーがどのような情報を   求めているのかよく考えよう13年3月5日火曜日
PART02      CORDING13年3月5日火曜日
DEMO13年3月5日火曜日
01      CSS    02     HTML    03     JAVASCRIPT13年3月5日火曜日
CSS13年3月5日火曜日
MEDIA QUERIES   解像度やデバイスの向きなどから条件を判定13年3月5日火曜日
書き方3種類13年3月5日火曜日
MEDIA属性   <link rel="stylesheet" media="screen and (max-width:800px)" href="#" />   @IMPORTルール   @import url(example.css) ...
PC用サイトのCSSを上書きする             http://web.invogue.biz/seminar/iwamura/css/common/global.css13年3月5日火曜日
<div id="Container">      header      footer      article                                    </div>13年3月5日火曜日
header  article13年3月5日火曜日
PC用        /* ==================================================           Header        =================================...
スマホ用        /* ==================================================           Header        ================================...
HTML13年3月5日火曜日
13年3月5日火曜日
デザイン自体を変更したい                   =             背景画像を使用したマークアップ13年3月5日火曜日
<nav>   <ul id="GlobalNav">   <li class="g-nav01"><a href="#">ARAI</a></li>   <li class="g-nav02"><a href="#">HATTORI</a><...
/* 各画像に指定 */   #Header #GlobalNavWrap #GlobalNav li.g-nav01   > a{   ! background-image:url(../../images/common/   g_navi_...
/* SP */   @media screen and (max-width: 767px){   /* 各画像に指定 */   #Header #GlobalNavWrap #GlobalNav li.g-nav01 a{   ! back...
MENU、CLOSEボタンはPCでは非表示13年3月5日火曜日
画像を伸縮させたい                 =             画像に100%の記述13年3月5日火曜日
13年3月5日火曜日
MAX-WIDTH:100%;                  img {                   max-width: 100%;                   border: 0;                   v...
100%   50%             33%13年3月5日火曜日
JAVASCRIPT13年3月5日火曜日
HTML CSSでは実現できない事をサポート13年3月5日火曜日
デバイスタイプの取得13年3月5日火曜日
Common.getdeviceType = function(){    ! ! var deviceType;    ! ! var userAgent = window.navigator.userAgent.toLowerCase();...
ブラウザタイプの取得13年3月5日火曜日
Common.getbrowserType = function(){      ! ! var browserType;      ! ! var userAgent = window.navigator.userAgent.toLowerC...
BODYにフラグとなるクラスをつける13年3月5日火曜日
Common.switchClass = function(){             ! var _w       = $(window).width();             ! var _h       = $(window).he...
まとめ  @MEDIAルールを使おう  デザインが変わる部分は背景画像で   パーセント指定のレイアウトを心がけよう   JAVASCRIPTはHTML、CSSで補えない部分を13年3月5日火曜日
全体まとめ             ユーザー目線を忘れずに13年3月5日火曜日
ありがとうございました13年3月5日火曜日
Upcoming SlideShare
Loading in …5
×

スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン

2,084 views

Published on

2013年2月2日(大阪)と2月23日(東京)で行われた、JWSDA×INVOGUEテクニカルセミナー「スマフォで遊ぼ インヴォーグ流スマートフォンソリューション」のセッション4「スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン」のスライドです。

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,084
On SlideShare
0
From Embeds
0
Number of Embeds
607
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン

  1. 1. スマホ 新時代に乗り遅れない為の RWD RESPONSIVE WEB DESIGN INVOGUE MARK UP Div 岩村 東正13年3月5日火曜日
  2. 2. PART01 RWDについて PART02 実際の構築方法について13年3月5日火曜日
  3. 3. PART00 RWDについて13年3月5日火曜日
  4. 4. RWD = スマートフォンやタブレット、 PCなどあらゆるデバイスに対応する制作手法13年3月5日火曜日
  5. 5. なぜそうすべきなのか?13年3月5日火曜日
  6. 6. スマホユーザーの増加13年3月5日火曜日
  7. 7. 4割に拡大 40 30 20 10 0 2010年9月 2011年4月 2011年10月 2012年5月 2012年10月 http://www.impressrd.jp/news/121120/kwp201313年3月5日火曜日
  8. 8. RWD13年3月5日火曜日
  9. 9. スマホサイト作れば早くない?13年3月5日火曜日
  10. 10. 良くある書かれてある メリットとデメリット13年3月5日火曜日
  11. 11. メリット 単一のURLになるのでSEO面で強い メンテナンスが楽(レイアウトによる) デメリット 重くなる IE13年3月5日火曜日
  12. 12. DEMO13年3月5日火曜日
  13. 13. IMJ http://www.imjp.co.jp/13年3月5日火曜日
  14. 14. 食べログ http://tabelog.com/13年3月5日火曜日
  15. 15. ?13年3月5日火曜日
  16. 16. ① サイト作り直すのが面倒 ② サイトが重くなってしまうから ③ ユーザーの目的が違うから13年3月5日火曜日
  17. 17. コンテンツストラテジー13年3月5日火曜日
  18. 18. PC SP 位置 固定 どこでも 走る、歩きなが 行動 座ったまま ら、電車の中 通信 安定 不安定 UI 自由 画面小13年3月5日火曜日
  19. 19. • ユーザーがモバイル端末をどう使用するか、  なぜ使用するかを考慮し設計すること。 • コンテンツを重視すること • 明瞭で焦点をはっきりさせること13年3月5日火曜日
  20. 20. モバイルファースト コンテンツファースト ユーザーファースト13年3月5日火曜日
  21. 21. 13年3月5日火曜日
  22. 22. まとめ ユーザーがどのような情報を 求めているのかよく考えよう13年3月5日火曜日
  23. 23. PART02 CORDING13年3月5日火曜日
  24. 24. DEMO13年3月5日火曜日
  25. 25. 01 CSS 02 HTML 03 JAVASCRIPT13年3月5日火曜日
  26. 26. CSS13年3月5日火曜日
  27. 27. MEDIA QUERIES 解像度やデバイスの向きなどから条件を判定13年3月5日火曜日
  28. 28. 書き方3種類13年3月5日火曜日
  29. 29. MEDIA属性 <link rel="stylesheet" media="screen and (max-width:800px)" href="#" /> @IMPORTルール @import url(example.css) screen and (max-width:800px); @MEDIAルール GOOD! @media screen and (max-width:800px) {}13年3月5日火曜日
  30. 30. PC用サイトのCSSを上書きする http://web.invogue.biz/seminar/iwamura/css/common/global.css13年3月5日火曜日
  31. 31. <div id="Container"> header footer article </div>13年3月5日火曜日
  32. 32. header article13年3月5日火曜日
  33. 33. PC用 /* ================================================== Header ================================================== */ #Header{ ! width:205px; ! height:100%; ! position:fixed; ! top:0; ! left:0; ! z-index:100; ! background:url(../../images/common/ bg_main_shadow.png) repeat-y 0 0; } #Header div.header-inline{ ! width:202px; }13年3月5日火曜日
  34. 34. スマホ用 /* ================================================== Header ================================================== */ @media screen and (max-width: 767px){ #Header{ ! width:100%; ! height:40px; ! padding:0; ! background:#FFF; } } 必要な部分のみ上書きする13年3月5日火曜日
  35. 35. HTML13年3月5日火曜日
  36. 36. 13年3月5日火曜日
  37. 37. デザイン自体を変更したい = 背景画像を使用したマークアップ13年3月5日火曜日
  38. 38. <nav> <ul id="GlobalNav"> <li class="g-nav01"><a href="#">ARAI</a></li> <li class="g-nav02"><a href="#">HATTORI</a></li> <li class="g-nav03"><a href="#">AKIBA</a></li> <li class="g-nav04"><a href="#">IWAMURA</a></li> <li id="SpClose"><a href="javascript:void(0);">CLOSE</a></li> </ul> </nav>13年3月5日火曜日
  39. 39. /* 各画像に指定 */ #Header #GlobalNavWrap #GlobalNav li.g-nav01 > a{ ! background-image:url(../../images/common/ g_navi_btn01.png); } #Header #GlobalNavWrap #GlobalNav li.g-nav02 > a{ ! background-image:url(../../images/common/ g_navi_btn02.png); } #Header #GlobalNavWrap #GlobalNav li.g-nav03 > a{ ! background-image:url(../../images/common/ g_navi_btn03.png); } #Header #GlobalNavWrap #GlobalNav li.g-nav04 > a{ ! background-image:url(../../images/common/ g_navi_btn04.png); }13年3月5日火曜日
  40. 40. /* SP */ @media screen and (max-width: 767px){ /* 各画像に指定 */ #Header #GlobalNavWrap #GlobalNav li.g-nav01 a{ ! background-image:url(../../images/common/sp/ g_navi_btn01.png); } #Header #GlobalNavWrap #GlobalNav li.g-nav02 a{ ! background-image:url(../../images/common/sp/ g_navi_btn02.png); } #Header #GlobalNavWrap #GlobalNav li.g-nav03 a{ ! background-image:url(../../images/common/sp/ g_navi_btn03.png); } #Header #GlobalNavWrap #GlobalNav li.g-nav04 a{ ! background-image:url(../../images/common/sp/ g_navi_btn04.png); } }13年3月5日火曜日
  41. 41. MENU、CLOSEボタンはPCでは非表示13年3月5日火曜日
  42. 42. 画像を伸縮させたい = 画像に100%の記述13年3月5日火曜日
  43. 43. 13年3月5日火曜日
  44. 44. MAX-WIDTH:100%; img { max-width: 100%; border: 0; vertical-align: top; } WIDTH:100%; <img src="images/index/mainvisual_l.png" width="100%">13年3月5日火曜日
  45. 45. 100% 50% 33%13年3月5日火曜日
  46. 46. JAVASCRIPT13年3月5日火曜日
  47. 47. HTML CSSでは実現できない事をサポート13年3月5日火曜日
  48. 48. デバイスタイプの取得13年3月5日火曜日
  49. 49. Common.getdeviceType = function(){ ! ! var deviceType; ! ! var userAgent = window.navigator.userAgent.toLowerCase(); ! ! if((userAgent.indexOf(iphone) > -1 && userAgent.indexOf(ipad) == -1) || userAgent.indexOf(ipod) > -1){ ! ! ! deviceType=iphone; ! ! } else if(userAgent.indexOf(android) > -1){ ! ! ! deviceType=android; ! ! }else if(userAgent.indexOf(windows phone) > -1){ ! ! ! deviceType=windowsphone; ! ! }else if(userAgent.indexOf(ipad) > -1 ){ ! ! ! deviceType=ipad; ! ! }else{ ! ! ! deviceType=pc; ! ! } ! ! ! ! ! return deviceType; };//getbrowserType13年3月5日火曜日
  50. 50. ブラウザタイプの取得13年3月5日火曜日
  51. 51. Common.getbrowserType = function(){ ! ! var browserType; ! ! var userAgent = window.navigator.userAgent.toLowerCase(); ! ! var appVersion = window.navigator.appVersion.toLowerCase(); ! ! if(userAgent.indexOf("msie") > -1) { ! ! ! if(appVersion.indexOf("msie 6.") > -1) { ! ! ! ! browserType=ie6; ! ! ! } else if(appVersion.indexOf("msie 7.") > -1) { ! ! ! ! browserType=ie7; ! ! ! } else if(appVersion.indexOf("msie 8.") > -1) { ! ! ! ! browserType=ie8; ! ! ! } else if(appVersion.indexOf("msie 9.") > -1) { ! ! ! ! browserType=ie9; ! ! ! } ! ! } else if(userAgent.indexOf("firefox") > -1) { ! ! ! browserType=firefox; ! ! } else if(userAgent.indexOf("opera") > -1) { ! ! ! browserType=opera; ! ! } else if(userAgent.indexOf("chrome") > -1) { ! ! ! browserType=chrome; ! ! } else if(userAgent.indexOf("safari") > -1) { ! ! ! browserType=safari; ! ! } else { ! ! ! browserType=unknown; ! ! } ! ! return browserType; };//getbrowserType13年3月5日火曜日
  52. 52. BODYにフラグとなるクラスをつける13年3月5日火曜日
  53. 53. Common.switchClass = function(){ ! var _w = $(window).width(); ! var _h = $(window).height(); ! var $body = $(body); ! /** ! * PC---1024px ! * SP---768px以下 ! */ var flgWidth = 767; ! $(window).resize(resizeHandler); ! resizeHandler(); ! function resizeHandler(){ ! ! //widthを再定義 ! ! _w = $(window).width(); ! ! if(_w <= flgWidth){ ! ! ! if(!$body.hasClass(Sp)){ ! ! ! ! $body.removeClass(Pc); ! ! ! ! $body.addClass(Sp); ! ! ! } ! ! }else{ ! ! ! if(!$body.hasClass(Pc)){ ! ! ! ! $body.removeClass(Sp); ! ! ! ! $body.addClass(Pc); ! ! ! } ! ! } ! } };//13年3月5日火曜日
  54. 54. まとめ @MEDIAルールを使おう デザインが変わる部分は背景画像で パーセント指定のレイアウトを心がけよう JAVASCRIPTはHTML、CSSで補えない部分を13年3月5日火曜日
  55. 55. 全体まとめ ユーザー目線を忘れずに13年3月5日火曜日
  56. 56. ありがとうございました13年3月5日火曜日

×