Responsive Web Design         HTML5
2010.05
win.htmlandroid.html       ie7.html       win.html                  mac-safari.html  ie6.html   ie8.html                  ...
win.htmlandroid.html            ie7.html webm ie8.html            win.html                       mac-safari.html   ie6.htm...
win.htmlandroid.html            ie7.html webm ie8.html            win.html                       mac-safari.html   ie6.htm...
Android
Ginger Bread
Android2.3
Android3.0
Android2.3
smart TV
TV in the bath
car navigation
Yes We Can
I’ve always thought of myself as an 80 percenter. I like tothrow myself passionately into a sport or activity until I reac...
Responsive Web Design
Responsive Architecture
W3C
Opera
Responsive Web Design
Responsive Web Design • Grid Design
Responsive Web Design • Grid Design • Fluid Image
Responsive Web Design • Grid Design • Fluid Image • Media Query
Fluid Grid
Grid Design
Liquid Layout
Liquid Layoutbody { width : 960px}#main { width : 576px}#sub { width : 384px}
Liquid Layoutbody { width : 93.75%}#main { width : 60%}#sub { width : 40%}
Liquid Layoutbody { width : 93.75%}#main { width : 60%}#sub { width : 40%}
Liquid Layoutbody { width : 93.75%}#main { width : 60%}#sub { width : 40%}
Liquid Layoutbody { width : 93.75%}#main { width : 60%}#sub { width : 40%}
Fluid Image
Fluid Imageimg { max-width : 100%}.ie6 img { width : 100%}
box-sizing
box-sizing
box-sizingnav ul li a {display : block;width : 25%;border : 1px solid black; }
box-sizingnav ul li a {display : block;width : 25%;border : 1px solid black; }
box-sizingnav ul li a {display : block;width : 25%;border : 1px solid black;-webkit-box-sizing : border-box;-moz-box-sizin...
background-size
background-sizebody {-webkit-background-size : cover;background-size : cover}body {-webkit-background-size : contain;backg...
background-sizebody {-webkit-background-size : cover;background-size : cover}body {-webkit-background-size : contain;backg...
background-sizebody {-webkit-background-size : cover;background-size : cover}body {-webkit-background-size : contain;backg...
cover
contain
p,li{-ms-line-break:strict;line-break:strict;-ms-word-break:break-strict;word-break:break-strict}
imgsizr.js
imgsizr.js
imgsizr.js
respond.js IE6-8
respond.js IE6-8
respond.js IE6-8
respond.js IE6-8
Mobile Boilerplate
Mobile Boiler Plate
320andUp
320andUp
mantangs@gmail.com
mantangs@gmail.com
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
×

Responsive Web Design HTML5勉強会

2,917 views

Published on

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,917
On SlideShare
0
From Embeds
0
Number of Embeds
450
Actions
Shares
0
Downloads
24
Comments
0
Likes
5
Embeds 0
No embeds

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
  • Responsive Web Design HTML5勉強会

    1. 1. Responsive Web Design HTML5
    2. 2. 2010.05
    3. 3. win.htmlandroid.html ie7.html win.html mac-safari.html ie6.html ie8.html iphone.html opera.html
    4. 4. win.htmlandroid.html ie7.html webm ie8.html win.html mac-safari.html ie6.html H264 iphone.html opera.html
    5. 5. win.htmlandroid.html ie7.html webm ie8.html win.html mac-safari.html ie6.html H264 iphone.html opera.html
    6. 6. Android
    7. 7. Ginger Bread
    8. 8. Android2.3
    9. 9. Android3.0
    10. 10. Android2.3
    11. 11. smart TV
    12. 12. TV in the bath
    13. 13. car navigation
    14. 14. Yes We Can
    15. 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. 16. Responsive Web Design
    17. 17. Responsive Architecture
    18. 18. W3C
    19. 19. Opera
    20. 20. Responsive Web Design
    21. 21. Responsive Web Design • Grid Design
    22. 22. Responsive Web Design • Grid Design • Fluid Image
    23. 23. Responsive Web Design • Grid Design • Fluid Image • Media Query
    24. 24. Fluid Grid
    25. 25. Grid Design
    26. 26. Liquid Layout
    27. 27. Liquid Layoutbody { width : 960px}#main { width : 576px}#sub { width : 384px}
    28. 28. Liquid Layoutbody { width : 93.75%}#main { width : 60%}#sub { width : 40%}
    29. 29. Liquid Layoutbody { width : 93.75%}#main { width : 60%}#sub { width : 40%}
    30. 30. Liquid Layoutbody { width : 93.75%}#main { width : 60%}#sub { width : 40%}
    31. 31. Liquid Layoutbody { width : 93.75%}#main { width : 60%}#sub { width : 40%}
    32. 32. Fluid Image
    33. 33. Fluid Imageimg { max-width : 100%}.ie6 img { width : 100%}
    34. 34. box-sizing
    35. 35. box-sizing
    36. 36. box-sizingnav ul li a {display : block;width : 25%;border : 1px solid black; }
    37. 37. box-sizingnav ul li a {display : block;width : 25%;border : 1px solid black; }
    38. 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. 39. background-size
    40. 40. background-sizebody {-webkit-background-size : cover;background-size : cover}body {-webkit-background-size : contain;background-size : contain}
    41. 41. background-sizebody {-webkit-background-size : cover;background-size : cover}body {-webkit-background-size : contain;background-size : contain}
    42. 42. background-sizebody {-webkit-background-size : cover;background-size : cover}body {-webkit-background-size : contain;background-size : contain}
    43. 43. cover
    44. 44. contain
    45. 45. p,li{-ms-line-break:strict;line-break:strict;-ms-word-break:break-strict;word-break:break-strict}
    46. 46. imgsizr.js
    47. 47. imgsizr.js
    48. 48. imgsizr.js
    49. 49. respond.js IE6-8
    50. 50. respond.js IE6-8
    51. 51. respond.js IE6-8
    52. 52. respond.js IE6-8
    53. 53. Mobile Boilerplate
    54. 54. Mobile Boiler Plate
    55. 55. 320andUp
    56. 56. 320andUp
    57. 57. mantangs@gmail.com
    58. 58. mantangs@gmail.com

    ×