Your SlideShare is downloading. ×
0
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,782

Published on

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

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
1,782
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. スマホ 新時代に乗り遅れない為の RWD RESPONSIVE WEB DESIGN INVOGUE MARK UP Div 岩村 東正13年3月5日火曜日
  • 2. PART01 RWDについて PART02 実際の構築方法について13年3月5日火曜日
  • 3. PART00 RWDについて13年3月5日火曜日
  • 4. RWD = スマートフォンやタブレット、 PCなどあらゆるデバイスに対応する制作手法13年3月5日火曜日
  • 5. なぜそうすべきなのか?13年3月5日火曜日
  • 6. スマホユーザーの増加13年3月5日火曜日
  • 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. RWD13年3月5日火曜日
  • 9. スマホサイト作れば早くない?13年3月5日火曜日
  • 10. 良くある書かれてある メリットとデメリット13年3月5日火曜日
  • 11. メリット 単一のURLになるのでSEO面で強い メンテナンスが楽(レイアウトによる) デメリット 重くなる IE13年3月5日火曜日
  • 12. DEMO13年3月5日火曜日
  • 13. IMJ http://www.imjp.co.jp/13年3月5日火曜日
  • 14. 食べログ http://tabelog.com/13年3月5日火曜日
  • 15. ?13年3月5日火曜日
  • 16. ① サイト作り直すのが面倒 ② サイトが重くなってしまうから ③ ユーザーの目的が違うから13年3月5日火曜日
  • 17. コンテンツストラテジー13年3月5日火曜日
  • 18. PC SP 位置 固定 どこでも 走る、歩きなが 行動 座ったまま ら、電車の中 通信 安定 不安定 UI 自由 画面小13年3月5日火曜日
  • 19. • ユーザーがモバイル端末をどう使用するか、  なぜ使用するかを考慮し設計すること。 • コンテンツを重視すること • 明瞭で焦点をはっきりさせること13年3月5日火曜日
  • 20. モバイルファースト コンテンツファースト ユーザーファースト13年3月5日火曜日
  • 21. 13年3月5日火曜日
  • 22. まとめ ユーザーがどのような情報を 求めているのかよく考えよう13年3月5日火曜日
  • 23. PART02 CORDING13年3月5日火曜日
  • 24. DEMO13年3月5日火曜日
  • 25. 01 CSS 02 HTML 03 JAVASCRIPT13年3月5日火曜日
  • 26. CSS13年3月5日火曜日
  • 27. MEDIA QUERIES 解像度やデバイスの向きなどから条件を判定13年3月5日火曜日
  • 28. 書き方3種類13年3月5日火曜日
  • 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. PC用サイトのCSSを上書きする http://web.invogue.biz/seminar/iwamura/css/common/global.css13年3月5日火曜日
  • 31. <div id="Container"> header footer article </div>13年3月5日火曜日
  • 32. header article13年3月5日火曜日
  • 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. スマホ用 /* ================================================== Header ================================================== */ @media screen and (max-width: 767px){ #Header{ ! width:100%; ! height:40px; ! padding:0; ! background:#FFF; } } 必要な部分のみ上書きする13年3月5日火曜日
  • 35. HTML13年3月5日火曜日
  • 36. 13年3月5日火曜日
  • 37. デザイン自体を変更したい = 背景画像を使用したマークアップ13年3月5日火曜日
  • 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. /* 各画像に指定 */ #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. /* 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. MENU、CLOSEボタンはPCでは非表示13年3月5日火曜日
  • 42. 画像を伸縮させたい = 画像に100%の記述13年3月5日火曜日
  • 43. 13年3月5日火曜日
  • 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. 100% 50% 33%13年3月5日火曜日
  • 46. JAVASCRIPT13年3月5日火曜日
  • 47. HTML CSSでは実現できない事をサポート13年3月5日火曜日
  • 48. デバイスタイプの取得13年3月5日火曜日
  • 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. ブラウザタイプの取得13年3月5日火曜日
  • 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. BODYにフラグとなるクラスをつける13年3月5日火曜日
  • 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. まとめ @MEDIAルールを使おう デザインが変わる部分は背景画像で パーセント指定のレイアウトを心がけよう JAVASCRIPTはHTML、CSSで補えない部分を13年3月5日火曜日
  • 55. 全体まとめ ユーザー目線を忘れずに13年3月5日火曜日
  • 56. ありがとうございました13年3月5日火曜日

×