Uploaded byschoowebcampus
レスポンシブWebデザインの基礎と,コーディング実習：先生小川 裕之
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/209/room ーーーーーーーーーーーーーーーーーーーーーーー
More Related Content
![[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法](https://cdn.slidesharecdn.com/ss_thumbnails/wordbenchrwd-140709214312-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to レスポンシブWebデザインの基礎と,コーディング実習：先生小川 裕之
![11月12日セミナー資料[pdf]](https://cdn.slidesharecdn.com/ss_thumbnails/1112pdf-131112125424-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
レスポンシブWebデザインの基礎と,コーディング実習：先生小川 裕之
- 1.
- 2. 印刷会社で DTP オペレーターとして2 年間勤めたあと退職し、 Web デザイナーのアルバイトとして複数の制作会社を転々としたり 海外に行ったりしたあと横浜の制作会社に務める。 制作会社でデザイン、コーディング、ディレクション、 コンサル等を幅広く経験する。 2012 年 4 月よりフリーランスとして独立。 「レスポンシブWebデザイン入門」執筆 小川 裕之 barchin hiro.ogw 13年9月30日月曜日
- 3.
- 4.
- 5.
- 6.
- 7. Photo by JeremyKeith スマートデバイスの増加 13年9月30日月曜日
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. RWDを実現する要素 •Fluid Gird •Fluid Image •MediaQueries 13年9月30日月曜日
- 22.
- 23.
- 24.
- 25. 求める要素の幅 親要素の幅 100% 相対値の求め方 620px300px 960px 60px 20px 13年9月30日月曜日
- 26.
- 27.
- 28.
- 29.
- 30. 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% 960px 13年9月30日月曜日
- 31.
- 32.
- 33.
- 34.
- 35. <img src="photo.jpg"alt"="photo"> img{ max-width: 100%; height:auto; } HTML CSS 画像を可変にする 親要素内に 収まる 13年9月30日月曜日
- 36.
- 37.
- 38. @media screen and(min-width: 640px){ body{ background-color: red; } } メディアがスクリーンで表示領域幅が 640px以上の場合、背景色を赤にする メディアタイプ メディア特性 13年9月30日月曜日
- 39. メディア特性 情報 max-/min- width表示領域の幅 ○ height 表示領域の高さ ○ device-width デバイスの横方向の解像度 ○ device-height デバイスの縦方向の解像度 ○ orientation 表示領域の向き ☓ resolution 解像度 ○ 13年9月30日月曜日
- 40. @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年9月30日月曜日
- 41.
- 42. body{ backgorund-color:red; } @media screen and(min-width:768px){ body{ backgorund-color:blue; } } モバイルファースト 1025px768px 幅768px 以上に適用 全サイズ に適用 13年9月30日月曜日
- 43. モバイルファースト 幅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年9月30日月曜日
- 44.
- 45. body{ backgorund-color:red; } @media screen and(max-width:1024px){ body{ backgorund-color:blue; } } 767px1024px デスクトップファースト 幅1024px 以下に適用 全サイズ に適用 13年9月30日月曜日
- 46. 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年9月30日月曜日
- 47.
- 48. モバイルファーストのメリット •スタイルが少なくなる #main{ float:left; width:80%; } @media screen and(max-width: 768px){ #main{ float: none; width: auto; } } デスクトップファースト @media screen and (min-width: 769px){ #main{ float: left; width: 80%; } } モバイルファースト 13年9月30日月曜日
- 49.
- 50.
- 51. @media screen and(min-width: 480px){ /*style*/ } @media screen and (min-width: 940px){ /*style*/ } 940px480px ブレイクポイント 13年9月30日月曜日
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65. Responsive Web Design Performance ResponsiveWeb Design Usability Content Strategy User Interface Readability SEO Accessibility Information Architecture User Experience Visual Design 13年9月30日月曜日
- 66. Responsive Web Design Usability Performance ContentStrategy User Interface Readability SEO Accessibility Information Architecture User Experience Visual Design 13年9月30日月曜日
- 67. Good performance isgood design Brad Frost 13年9月30日月曜日
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85. Future of ScreenTechnology Productivity Future Vision 13年9月30日月曜日
- 86.
- 87. Best practice? Photo byJeremy Keith 13年9月30日月曜日
- 88. RWDは発展途上 •Media Queries Level4 •ResponsiveImages •flexbox ,Regions,Column,... •vw,vh 13年9月30日月曜日
- 89. Photo by BarbDybwad 考え方も変える 13年9月30日月曜日
- 90. 完全を求めない Photo by PeterMiller 13年9月30日月曜日
- 91. “The control whichdesigners 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年9月30日月曜日
- 92.
- 93.
- 94. What is king? Photoby Kyle Johnston 13年9月30日月曜日
- 95.
- 96.
- 97. 本日のまとめ •RWDはワンソースでマルチデバイスに対応する手法 •RWDを実装する要素 （Fluid Grid, FluidImage, Media Queries） •表示だけでなくパフォーマンスも最適化する工夫を •早めにテストを行いリスクを減らし効率的に進める •今後マルチデバイス対応は必須となる •変化は必ず訪れるので少しずつ順応していく 13年9月30日月曜日
- 98.
- 99.