Downloaded 602 times
Recommended
![[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fuxux-211214103138-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
More Related Content
What's hot
Viewers also liked
Similar to レスポンシブWebデザインの基礎
![11月12日セミナー資料[pdf]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2f1112pdf-131112125424-phpapp02-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
レスポンシブWebデザインの基礎
- 1.
- 2.印刷会社で DTP オペレーターとして2 年間勤めたあと退職し、Web デザイナーのアルバイトとして複数の制作会社を転々としたり海外に行ったりしたあと横浜の制作会社に務める。制作会社でデザイン、コーディング、ディレクション、コンサル等を幅広く経験する。2012 年 4 月よりフリーランスとして独立。「レスポンシブWebデザイン入門」執筆小川 裕之barchin hiro.ogw13年10月8日火曜日
- 3.
- 4.
- 5.Photo by JeremyKeithスマートデバイスの増加13年10月8日火曜日
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.RWDを実現する要素•Fluid Grid•Fluid Image•MediaQueries13年10月8日火曜日
- 18.
- 19.
- 20.
- 21.求める要素の幅 親要素の幅 100%相対値の求め方620px300px960px60px 20px13年10月8日火曜日
- 22.
- 23.
- 24.
- 25.
- 26.960px60px 20px1カラム=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日火曜日
- 27.
- 28.
- 29.
- 30.
- 31.<img src="photo.jpg" alt="photo">img{max-width:100%;height: auto;}HTMLCSS画像を可変にする親要素内に収まる13年10月8日火曜日
- 32.
- 33.
- 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*/}CSSCSSHTML13年10月8日火曜日
- 37.
- 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日火曜日
- 40.
- 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日火曜日
- 44.
- 45.
- 46.@media screen and(min-width: 480px){/*style*/}@media screen and (min-width: 940px){/*style*/}940px480pxブレイクポイント13年10月8日火曜日
- 47.
- 48.
- 49.
- 50.
- 51.@media screen and(min-width: 768px){body{background-color: red;}}幅をemで指定768px=48em1em=16px13年10月8日火曜日
- 52.メディアがスクリーンで表示領域幅が48文字以上の場合、背景色を赤にする幅をemで指定768px=48em1em=16px@media screen and(min-width: 48em){body{background-color: red;}}13年10月8日火曜日
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.どのようなワークフローで進めるのかPhoto by thepale side of insomnia13年10月8日火曜日
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.Responsive Web DesignPerformanceResponsiveWeb DesignUsabilityContent Strategy User InterfaceReadabilitySEOAccessibilityInformation ArchitectureUser ExperienceVisual Design13年10月8日火曜日
- 72.Responsive Web DesignUsabilityPerformanceContentStrategy User InterfaceReadabilitySEOAccessibilityInformation ArchitectureUser ExperienceVisual Design13年10月8日火曜日
- 73.Good performance isgood designBrad Frost13年10月8日火曜日
- 74.
- 75.
- 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日火曜日
- 77.
- 78.
- 79.
- 80.
- 81.Webフォントを使う•Google Fonts•Adobe EdgeWeb Fonts•FONT PLUS•Type Square13年10月8日火曜日
- 82.
- 83.
- 84.<script src="matchmedia.js"></script><script src="picturefill.js"></script><spandata-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>600pxsmallImage.jpglargeImage.jpg画像を差し替える13年10月8日火曜日
- 85.画像を差し替えるFont Awesome•Picturefill•Responsive Images•AdaptiveImages13年10月8日火曜日
- 86.
- 87.
- 88.
- 89.Future of ScreenTechnologyProductivity Future Vision13年10月8日火曜日
- 90.
- 91.Best practice?Photo byJeremy Keith13年10月8日火曜日
- 92.RWDは発展途上•Media Queries Level4•ResponsiveImages•flexbox ,Regions,Column,...•vw,vh13年10月8日火曜日
- 93.Photo by BarbDybwad考え方も変える13年10月8日火曜日
- 94.完全を求めないPhoto by PeterMiller13年10月8日火曜日
- 95.“The control whichdesigners know in the print medium, and often desirein the web medium, is simply a function of the limitation of the printedpage. We should embrace the fact that the web doesn’t have the sameconstraints, and design for this flexibility. But first, we must 'accept theebb and flow of things.'”John Allsopp, “A Dao of Web Design”13年10月8日火曜日
- 96.
- 97.
- 98.What is king?Photoby Kyle Johnston13年10月8日火曜日
- 99.
- 100.
- 101.本日のまとめ•RWDはワンソースでマルチデバイスに対応する手法•RWDを実装する要素（Fluid Grid,Fluid Image,MediaQueries）•グレイスフルデグラデーションで進められるとよい•早めにテストを行いリスクを減らし効率的に進める•カンプをつくるつくらないは案件に応じて•パフォーマンスを上げるため画像を最適化する•変化は必ず訪れるので少しずつ順応していく13年10月8日火曜日