Your SlideShare is downloading. ×
0
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
Responsive Web Design HTML5勉強会
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

Responsive Web Design HTML5勉強会

2,489

Published on

2011年7月13日開催の第19回 HTML5勉強会のスライド。Responsive Web Design について。

2011年7月13日開催の第19回 HTML5勉強会のスライド。Responsive Web Design について。

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,489
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
5
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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Responsive Web Design HTML5
    • 2. 2010.05
    • 3. win.htmlandroid.html ie7.html win.html mac-safari.html ie6.html ie8.html iphone.html opera.html
    • 4. win.htmlandroid.html ie7.html webm ie8.html win.html mac-safari.html ie6.html H264 iphone.html opera.html
    • 5. win.htmlandroid.html ie7.html webm ie8.html win.html mac-safari.html ie6.html H264 iphone.html opera.html
    • 6. Android
    • 7. Ginger Bread
    • 8. Android2.3
    • 9. Android3.0
    • 10. Android2.3
    • 11. smart TV
    • 12. TV in the bath
    • 13. car navigation
    • 14. Yes We Can
    • 15. I’ve always thought of myself as an 80 percenter. I like tothrow myself passionately into a sport or activity until I reach80 percent proficiency level. To go beyond that requires anobsession and degree of specialization that doesn’t appeal tome. 80 percenter
    • 16. Responsive Web Design
    • 17. Responsive Architecture
    • 18. W3C
    • 19. Opera
    • 20. Responsive Web Design
    • 21. Responsive Web Design • Grid Design
    • 22. Responsive Web Design • Grid Design • Fluid Image
    • 23. Responsive Web Design • Grid Design • Fluid Image • Media Query
    • 24. Fluid Grid
    • 25. Grid Design
    • 26. Liquid Layout
    • 27. Liquid Layoutbody { width : 960px}#main { width : 576px}#sub { width : 384px}
    • 28. Liquid Layoutbody { width : 93.75%}#main { width : 60%}#sub { width : 40%}
    • 29. Liquid Layoutbody { width : 93.75%}#main { width : 60%}#sub { width : 40%}
    • 30. Liquid Layoutbody { width : 93.75%}#main { width : 60%}#sub { width : 40%}
    • 31. Liquid Layoutbody { width : 93.75%}#main { width : 60%}#sub { width : 40%}
    • 32. Fluid Image
    • 33. Fluid Imageimg { max-width : 100%}.ie6 img { width : 100%}
    • 34. box-sizing
    • 35. box-sizing
    • 36. box-sizingnav ul li a {display : block;width : 25%;border : 1px solid black; }
    • 37. box-sizingnav ul li a {display : block;width : 25%;border : 1px solid black; }
    • 38. box-sizingnav ul li a {display : block;width : 25%;border : 1px solid black;-webkit-box-sizing : border-box;-moz-box-sizing : border-box;box-sizing : border-box }
    • 39. background-size
    • 40. background-sizebody {-webkit-background-size : cover;background-size : cover}body {-webkit-background-size : contain;background-size : contain}
    • 41. background-sizebody {-webkit-background-size : cover;background-size : cover}body {-webkit-background-size : contain;background-size : contain}
    • 42. background-sizebody {-webkit-background-size : cover;background-size : cover}body {-webkit-background-size : contain;background-size : contain}
    • 43. cover
    • 44. contain
    • 45. p,li{-ms-line-break:strict;line-break:strict;-ms-word-break:break-strict;word-break:break-strict}
    • 46. imgsizr.js
    • 47. imgsizr.js
    • 48. imgsizr.js
    • 49. respond.js IE6-8
    • 50. respond.js IE6-8
    • 51. respond.js IE6-8
    • 52. respond.js IE6-8
    • 53. Mobile Boilerplate
    • 54. Mobile Boiler Plate
    • 55. 320andUp
    • 56. 320andUp
    • 57. mantangs@gmail.com
    • 58. mantangs@gmail.com

    ×