Responsive Web Design もう一度

HTML5j Web プラットフォーム研究部　第20回講演資料

レスポンシブWebデザインでウェブサイトを構築する際に、大切なメディアクエリの取扱について、いかに減らすかについて。

Web Directions East 合同会社
菊池聡

Transcript

1. 3FTQPOTJWF
   8FC
   %FTJHO
   ΋͏Ұ౓ Satoshi Kikuchi )5.-K
   8FCϓϥοτϑΥʔϜ෦
   ୈճษڧձ
2. ͠ͳ΍͔Ͱ͋Δ͜ͱ
3. Flexible/Scalable/Readable
4. Responsive Web Design
5. 2011- 2018
6. RWD in 2011 •Fluid Image •Fluid Grid •Media Query
7. RWD in 2018 •Fluid Image - Res Image •Fluid Grid - Flex&grid •Media Query-͔ΘΓͳ͠
8. More MQ More CSS
 MORE PROBLEMS
9. Կ͔Β$44Λهड़
10. grid Vertical Rhythm Color Padding Flexbox
11. Font Size
12. How do you efficiently scale up / down any UI component (e.g. a slider or calendar) and keep all the proportions intact—without fiddling with width, height or border-radius manually? — @simurai
13. Ͳ͏΍ͬͨΒɺ͍͍ͪͪखΛ
    ͘Θ͑ͳ͍Ͱ΋6*ͷίϯϙʔωϯτΛ ࣗ༝ʹେ͖ͨ͘͠Γখͨ͘͞͠Γ
    Ͱ͖ΔͷͩΖ͏͔ɻ
    Š
    !TJNVSBJ
    
    
14. By sneaking a Trojan horse into your components. We use rem for components “root” and em for sub- parts of the components. Then, by adjusting the font-size of the root, we adjust all size-related CSS properties of a component at once. 
 — @simurai
15. τϩΠͷ໦അͷΑ͏ʹɺ
    SPPU
    ʹ࢓ֻ͚Λ͘͠Ήͷͩɻ
    SFNΛSPPUʹ͍Ε͜Έɺ
    FNͰίϯϙʔωϯτΛ࡞੒͢Δͷ ͩɻͦ͏͢Ε͹ɺSPPUͷϑΥϯτα ΠζΛ͍͡Ε͹શ෦มΘΔɻ
 Š
    !TJNVSBJ
    
    
16. https://goo.gl/HeKpbB
18. https://goo.gl/PakhMh
19. vw,vh,vmin,vmax
20. https://www.yunbitsoftware.com/blog/2017/06/22/viewport-units-css-que-es/
21. https://www.yunbitsoftware.com/blog/2017/06/22/viewport-units-css-que-es/
22. https://www.yunbitsoftware.com/blog/2017/06/22/viewport-units-css-que-es/
23. https://www.yunbitsoftware.com/blog/2017/06/22/viewport-units-css-que-es/
26. .button__delete{ border-radius: 50%; display: table-cell; color: white; background: red; font-size: 1.25rem; width: 7.5vw; height: 7.5vw; line-height: 0; cursor: pointer; }
27. .button__delete{ border-radius: 50%; display: table-cell; color: white; background: red; font-size: 1.25rem; width: 7.5vim; height: 7.5vim; line-height: 0; cursor: pointer; }
28. .button__delete{ border-radius: 50%; display: table-cell; color: white; background: red; font-size: 1.25rem; width: calc (???); height: calc (???); line-height: 0; cursor: pointer; }
29. .button__delete{ border-radius: 50%; display: table-cell; color: white; background: red; font-size: 1.25rem; width: calc (1cm + 1.5vmin); height: calc (1cm + 1.5vmin); line-height: 0; cursor: pointer; }
30. DN
    ࢦͷԡͤΔൣғͷ࠷খ஋
31. 1cm
    ࢦͷԡͤΔൣғͷ࠷খ஋
32. Google Material Desgin
34. Apple Human Interface Guideline
36. ࣗ෼Ͱߟ͑ͯ
    ࢼߦࡨޡ
37. Fluid Type
38. html { font-size: 2vw; }?
41. min-font-size
42. html { font-size: calc(1em + 1vw); }
43. Image credit: Mike Riethmueller
45. https://www.smashingmagazine.com/
46. Image credit: Jake Wilson, https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing/
48. Image credit: Jake Wilson
49. Image credit: Jake Wilson, https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing/ https://www.smashingmagazine.com/author/jake-wilson/
50. Image credit: Jake Wilson, https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing/ https://www.smashingmagazine.com/author/jake-wilson/
51. Image credit: Jake Wilson, https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing/ https://www.smashingmagazine.com/author/jake-wilson/
52. m = slope
 x = current viewport width b = the y-intercept
 y = resulting font size Image credit: Jake Wilson, https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing/ https://www.smashingmagazine.com/author/jake-wilson/
54. Image credit: Mike Riethmueller
55. GPOUTJ[F\࠷খͷϑΥϯταΠζ ࠷େͷϑΥϯταΠζ࠷খͷϑΥϯταΠζ
    WX࠷খͷεΫϦʔϯαΠζʢ࠷େͷεΫϦʔϯαΠζ࠷খͷεΫϦʔϯαΠζʣʩ
56. https://ia.net/topics/the-web-is-all-about-typography-period/
57. Line-height
58. Image credit: Tim Brown, CSS Locks, https://blog.typekit.com/2016/08/17/flexible-typography-with-css-locks/
60. Image credit: Tim Brown, CSS Locks, https://blog.typekit.com/2016/08/17/flexible-typography-with-css-locks/
61. େ͖͍෯
    
    খ͍͞෯
63. Line-height:1.5
64. CSS Variables
65. More MQ More CSS
 MORE PROBLEMS
68. :root{ --colour #ACE7EF } body{ background var(—colour) }
69. :root{ --colour #ACE7EF } @media (min-width 320px) :root{ --colour #A56CC1 } body{ background var(—colour) }
70. http://www.modularscale.com/
72. :root { /* scale for 1.2 */ --ms-small-1: 1rem; --ms-small-2: 1.2rem; --ms-small-3: 1.44rem; --ms-small-4: 1.728rem; --ms-small-5: 2.074rem; --ms-small-6: 2.488rem; /* scale for 1.33 */ --ms-large-1: 1rem; --ms-large-2: 1.333rem; --ms-large-3: 1.777rem; --ms-large-4: 2.369rem; --ms-large-5: 3.157rem; --ms-large-6: 4.209rem; } IUUQTXXXNBEFCZNJLFDPNBVXSJUJOHVTJOHDTTWBSJBCMFT
73. /* Small scale for small screens: */ h1 { font-size: var(--ms-small-6); } h2 { font-size: var(--ms-small-5); } h3 { font-size: var(--ms-small-4); } h4 { font-size: var(--ms-small-3); } h5 { font-size: var(--ms-small-2); } h6 { font-size: var(--ms-small-1); } /* And large scale for larger screens */ @media screen and (min-width: 800px) { h1 { font-size: var(--ms-large-6); } h2 { font-size: var(--ms-large-5); } h3 { font-size: var(--ms-large-4); } h4 { font-size: var(--ms-large-3); } h5 { font-size: var(--ms-large-2); } h6 { font-size: var(--ms-large-1); } } IUUQTXXXNBEFCZNJLFDPNBVXSJUJOHVTJOHDTTWBSJBCMFT
74. font-size01:12px
75. h1 { font-size: var(--font-size-6); } h2 { font-size: var(--font-size-5); } h3 { font-size: var(--font-size-4); } h4 { font-size: var(--font-size-3); } h5 { font-size: var(--font-size-2); } h6 { font-size: var(--font-size-1); } IUUQTXXXNBEFCZNJLFDPNBVXSJUJOHVTJOHDTTWBSJBCMFT
76. :root { /* scale for 1.2 */ --font-size-1: 1rem; --font-size-2: 1.2rem; --font-size-3: 1.44rem; --font-size-4: 1.728rem; --font-size-5: 2.074rem; --font-size-6: 2.488rem; } @media screen and (min-width: 800px) { :root { /* scale for 1.33 */ --font-size-1: 1rem; --font-size-2: 1.333rem; --font-size-3: 1.777rem; --font-size-4: 2.369rem; --font-size-5: 3.157rem; --font-size-6: 4.209rem; } IUUQTXXXNBEFCZNJLFDPNBVXSJUJOHVTJOHDTTWBSJBCMFT
77. /* σϑΥϧτͷࢦఆ */ :root { --font-size: 1.2rem; --background-color: #fff; --text-color: #222; } /* asideͷࢦఆ */ aside { --font-size: 1rem; --background-color: #222; --text-color: #fafafa; } /* ಉ݁͡Ռ */ main, aside { font-size: var(--font-size); color: var(--text-color); background-color: var(--background-color); }
78. Logic Fold $44ϑΝΠϧͷ্ͷํʹ·ͱΊͯྑ͘࢖͏΋ͷΛ͓͍͓ͯ͘
79. :root { --font-family: tondo_rg, sans-serif; --font-family-light: tondo_lt, sans-serif; --font-family-bold: tondo_bd, sans-serif; --font-weight: 400; --font-size-xxx-display: 8vmin; --font-size-xx-display: 4.11rem; --font-size-x-display: 3.653rem; --font-size-display: 3.247rem; --font-size-xxxx-large: 2.887rem; --font-size-xxx-large: 2.027rem; --font-size-xx-large: 1.802rem; --font-size-x-large: 1.602rem; --font-size-large: 1.424rem; --font-size-medium: 1.266rem; --font-size: 1.125rem; --font-size-small: 1rem; --font-size-x-small: .889rem; --font-size-xx-small: .79rem; --lineheight-text: 1.5; --lineheight-heading: 1.3; --color-background: #fff; --color-background-selection: #f0f2f3; --color-border: #cacfd5; --color-text-default: #0b1016; --color-text-alt: #95a0ac;
80. One more thing
81. ch unit
82. ch=character Relative to width of the "0" (zero)
84. Ch for form
85. Relative to width of the "0" (zero) จࣈͷେ͖͞ͰɺDIΛՄมͤ͞Δ͜ͱ͕Ͱ͖Δ
86. ϑΥʔϜͷೖྗϑΟʔϧυ͕௕͗͢Δ
87. ೖྗ͢ΔཁૉʹΑͬͯϑΥʔϜͷ௕͞Λ͔͑Δ
88. DI͸ઈର୯ҐͳͷͰɺ͸ΈͰΔͷͰ஫ҙ
89. ch&min-width
90. 45ch = ೔ຊޠͩͱ26จࣈ͙Β͍
91. 45ch = robotoͩͱ32จࣈ͙Β͍
93. @support
94. @supports (display: flex) { div { display: flex; } } https://developer.mozilla.org/en-US/docs/Web/CSS/%40supports
95. @supports not (display: flex) { div { float: right; } } https://developer.mozilla.org/en-US/docs/Web/CSS/%40supports
96. Atomic Designʢ೔ຊޠ൛ʣ ࣌୅ʹ໊Λͷ͜͞ͳ͍͔ʁ ຋༁ऴྃɾߍਖ਼ऀΛٻΉ
    NBOUBOHT!HNBJMDPN Brad Frost ஶ