Recommended
More Related Content
What's hot
What's hot (18)
Viewers also liked
Viewers also liked (12)
Similar to レスポンシブWebデザインの基礎
Similar to レスポンシブWebデザインの基礎 (20)
レスポンシブWebデザインの基礎
- 2. 印刷会社で DTP オペレーターとして 2 年間勤めたあと退職し、 Web デザイナーのアルバイトとして複数の制作会社を転々としたり 海外に行ったりしたあと横浜の制作会社に務める。 制作会社でデザイン、コーディング、ディレクション、 コンサル等を幅広く経験する。2012 年 4 月よりフリーランスとして独立。 「レスポンシブWebデザイン入門」執筆 小川 裕之 barchin hiro.ogw 13年10月8日火曜日
- 4. 13年10月8日火曜日
- 5. Photo by Jeremy Keith スマートデバイスの増加 13年10月8日火曜日
- 17. RWDを実現する要素 •Fluid Grid •Fluid Image •Media Queries 13年10月8日火曜日
- 21. 求める要素の幅 親要素の幅 100% 相対値の求め方 620px 300px 960px 60px 20px 13年10月8日火曜日
- 26. 960px 60px 20px 1カラム=60px÷960px×100%=6.25% 2カラム=(60px×2+20)÷960px×100%=14.58333% 3カラム= (60px×3+20×2) ÷960px×100%=22.91667% 4カラム= (60px×4+20×3) ÷960px×100%=31.25% 5カラム= (60px×5+20×4) ÷960px×100%=39.5833% 13年10月8日火曜日
- 31. <img src="photo.jpg" alt="photo"> img{ max-width: 100%; height: auto; } HTML CSS 画像を可変にする 親要素内に 収まる 13年10月8日火曜日
- 34. @media screen and (min-width: 640px){ body{ background-color: red; } } メディアがスクリーンで表示領域幅が 640px以上の場合背景色を赤にする メディアタイプ メディア特性 13年10月8日火曜日
- 35. メディア特性 情報 max-/min- width 表示領域の幅 ○ height 表示領域の高さ ○ device-width デバイスの横方向の解像度 ○ device-height デバイスの縦方向の解像度 ○ orientation 表示領域の向き ☓ resolution 解像度 ○ 13年10月8日火曜日
- 36. @import url ("pc.css") screen and (min- width:600px); <link rel="stylesheet" href="pc.css" media="screen and (min-width:600px)"> @media screen and (min-width:600px){ /*style*/ } CSS CSS HTML 13年10月8日火曜日
- 38. body{ backgorund-color:red; } @media screen and (min-width:768px){ body{ backgorund-color:blue; } } モバイルファースト 1025px768px 幅768px 以上に適用 全サイズ に適用 13年10月8日火曜日
- 39. 幅1025px 以上に適用 body{ backgorund-color:red; } @media screen and (min-width:768px){ body{ backgorund-color:blue; } } @media screen and (min-width:1025px){ body{ background-color:yellow; } } モバイルファースト 1025px768px 幅768px 以上に適用 全サイズ に適用 13年10月8日火曜日
- 41. body{ backgorund-color:red; } @media screen and (max-width:1024px){ body{ backgorund-color:blue; } } 767px1024px デスクトップファースト 幅1024px 以下に適用 全サイズ に適用 13年10月8日火曜日
- 42. body{ backgorund-color:red; } @media screen and (max-width:1024px){ body{ backgorund-color:blue; } } @media screen and (max-width:767px){ body{ background-color:yellow; } } 767px1024px デスクトップファースト 幅767px 以下に適用 幅1024px 以下に適用 全サイズ に適用 13年10月8日火曜日
- 43. モバイルファーストのメリット •スタイルが少なくなる #main{ float:left; width:80%; } @media screen and (max-width: 639px){ #main{ float: none; width: auto; } } デスクトップファースト @media screen and (min-width: 640px){ #main{ float: left; width: 80%; } } モバイルファースト 13年10月8日火曜日
- 46. @media screen and (min-width: 480px){ /*style*/ } @media screen and (min-width: 940px){ /*style*/ } 940px480px ブレイクポイント 13年10月8日火曜日
- 51. @media screen and (min-width: 768px){ body{ background-color: red; } } 幅をemで指定 768px=48em1em=16px 13年10月8日火曜日
- 52. メディアがスクリーンで表示領域幅が 48文字以上の場合、背景色を赤にする 幅をemで指定 768px=48em1em=16px @media screen and (min-width: 48em){ body{ background-color: red; } } 13年10月8日火曜日
- 55. <meta name="viewport" content="width=device-width, initial-scale=1"> そのデバイスの幅で サイトが表示される 13年10月8日火曜日
- 60. どのようなワークフローで進めるのか Photo by the pale side of insomnia 13年10月8日火曜日
- 68. 体制や案件に応じて作り方を変える •各ブレイクポイントで作成 •PCサイズのみ作成する •主要な部分のみ作りこんで 他はざっくりと •Designing in the browserで 13年10月8日火曜日
- 71. Responsive Web Design Performance Responsive Web Design Usability Content Strategy User Interface Readability SEO Accessibility Information Architecture User Experience Visual Design 13年10月8日火曜日
- 72. Responsive Web Design Usability Performance Content Strategy User Interface Readability SEO Accessibility Information Architecture User Experience Visual Design 13年10月8日火曜日
- 73. Good performance is good design Brad Frost 13年10月8日火曜日
- 76. CSSを使う #btn{ padding: 0.5em; display: inline-block; font-size: 40px; color: #333; font-weight: bold; letter-spacing: 0.1em; background: #83a603; background: -webkit-linear-gradient(top, #83a603, #769300); background: -moz-linear-gradient(top, #83a603, #769300); background: -o-linear-gradient(top, #83a603, #769300); background: linear-gradient(to bottom, #83a603, #769300); border-radius: 10px; box-shadow: 0px 5px 2px #274000,0px 0px 3px #96b618 inset; text-shadow: -1px -1px 0px rgba(255,255,255,0.2); border: 4px solid #558b00; } 13年10月8日火曜日
- 81. Webフォントを使う •Google Fonts •Adobe Edge Web Fonts •FONT PLUS •Type Square 13年10月8日火曜日
- 84. <script src="matchmedia.js"></script> <script src="picturefill.js"></script> <span data-picture data-alt="pic"> <span data-src="img/smallImage.jpg"></span> <span data-src="img/largeImage.jpg" media="(min-width: 600px)"></span> <noscript><img src="img/smallImage.jpg" alt="pic"></noscript> </span> 600px smallImage.jpg largeImage.jpg 画像を差し替える 13年10月8日火曜日
- 85. 画像を差し替える Font Awesome •Picturefill •Responsive Images •Adaptive Images 13年10月8日火曜日
- 89. Future of Screen Technology Productivity Future Vision 13年10月8日火曜日
- 91. Best practice? Photo by Jeremy Keith 13年10月8日火曜日
- 92. RWDは発展途上 •Media Queries Level4 •Responsive Images •flexbox ,Regions,Column,... •vw,vh 13年10月8日火曜日
- 93. Photo by Barb Dybwad 考え方も変える 13年10月8日火曜日
- 94. 完全を求めない Photo by Peter Miller 13年10月8日火曜日
- 95. “The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things.'” John Allsopp, “A Dao of Web Design” 13年10月8日火曜日
- 96. 13年10月8日火曜日
- 97. 13年10月8日火曜日
- 98. What is king? Photo by Kyle Johnston 13年10月8日火曜日
- 100. まとめ 13年10月8日火曜日
- 101. 本日のまとめ •RWDはワンソースでマルチデバイスに対応する手法 •RWDを実装する要素 （Fluid Grid,Fluid Image,Media Queries） •グレイスフルデグラデーションで進められるとよい •早めにテストを行いリスクを減らし効率的に進める •カンプをつくるつくらないは案件に応じて •パフォーマンスを上げるため画像を最適化する •変化は必ず訪れるので少しずつ順応していく 13年10月8日火曜日