レスポンシブWebデザインの基礎と,コーディング実習：先生小川 裕之
•
35 likes•11,802 views
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/209/room ーーーーーーーーーーーーーーーーーーーーーーー
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (9)
Similar to レスポンシブWebデザインの基礎と,コーディング実習：先生小川 裕之
Similar to レスポンシブWebデザインの基礎と,コーディング実習：先生小川 裕之 (20)
More from schoowebcampus
More from schoowebcampus (20)
Recently uploaded
Recently uploaded (8)
レスポンシブWebデザインの基礎と,コーディング実習：先生小川 裕之
- 2. 印刷会社で DTP オペレーターとして 2 年間勤めたあと退職し、 Web デザイナーのアルバイトとして複数の制作会社を転々としたり 海外に行ったりしたあと横浜の制作会社に務める。 制作会社でデザイン、コーディング、ディレクション、 コンサル等を幅広く経験する。 2012 年 4 月よりフリーランスとして独立。 「レスポンシブWebデザイン入門」執筆 小川 裕之 barchin hiro.ogw 13年9月30日月曜日
- 7. Photo by Jeremy Keith スマートデバイスの増加 13年9月30日月曜日
- 21. RWDを実現する要素 •Fluid Gird •Fluid Image •Media Queries 13年9月30日月曜日
- 25. 求める要素の幅 親要素の幅 100% 相対値の求め方 620px 300px 960px 60px 20px 13年9月30日月曜日
- 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日月曜日
- 35. <img src="photo.jpg"alt"="photo"> img{ max-width: 100%; height: auto; } HTML CSS 画像を可変にする 親要素内に 収まる 13年9月30日月曜日
- 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日月曜日
- 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日月曜日
- 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日月曜日
- 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日月曜日
- 51. @media screen and (min-width: 480px){ /*style*/ } @media screen and (min-width: 940px){ /*style*/ } 940px480px ブレイクポイント 13年9月30日月曜日
- 59. <meta name="viewport" content="width=device-width, initial-scale=1"> そのデバイスの幅で サイトが表示される 13年9月30日月曜日
- 65. Responsive Web Design Performance Responsive Web Design Usability Content Strategy User Interface Readability SEO Accessibility Information Architecture User Experience Visual Design 13年9月30日月曜日
- 66. Responsive Web Design Usability Performance Content Strategy User Interface Readability SEO Accessibility Information Architecture User Experience Visual Design 13年9月30日月曜日
- 67. Good performance is good design Brad Frost 13年9月30日月曜日
- 80. 体制や案件に応じて作り方を変える •各ブレイクポイントで作成 •PCサイズのみ作成 •主要な部分のみ作りこんで 他はざっくりと •Designing in the browserで 13年9月30日月曜日
- 85. Future of Screen Technology Productivity Future Vision 13年9月30日月曜日
- 87. Best practice? Photo by Jeremy Keith 13年9月30日月曜日
- 88. RWDは発展途上 •Media Queries Level4 •Responsive Images •flexbox ,Regions,Column,... •vw,vh 13年9月30日月曜日
- 89. Photo by Barb Dybwad 考え方も変える 13年9月30日月曜日
- 90. 完全を求めない Photo by Peter Miller 13年9月30日月曜日
- 91. “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年9月30日月曜日
- 92. 13年9月30日月曜日
- 93. 13年9月30日月曜日
- 94. What is king? Photo by Kyle Johnston 13年9月30日月曜日
- 96. まとめ 13年9月30日月曜日
- 97. 本日のまとめ •RWDはワンソースでマルチデバイスに対応する手法 •RWDを実装する要素 （Fluid Grid, Fluid Image, Media Queries） •表示だけでなくパフォーマンスも最適化する工夫を •早めにテストを行いリスクを減らし効率的に進める •今後マルチデバイス対応は必須となる •変化は必ず訪れるので少しずつ順応していく 13年9月30日月曜日
- 98. 質疑応答 13年9月30日月曜日