$30 off During Our Annual Pro Sale. View Details »

Responsive Web Design もう一度

mantangs
February 04, 2018

Responsive Web Design もう一度

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

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

Web Directions East 合同会社
菊池聡

mantangs

February 04, 2018
Tweet

More Decks by mantangs

Other Decks in Technology

Transcript

  1. 3FTQPOTJWF8FC%FTJHO΋͏Ұ౓ Satoshi Kikuchi )5.-K8FCϓϥοτϑΥʔϜ෦ୈճษڧձ

  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

  17. None
  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/

  24. None
  25. None
  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

  33. None
  34. Apple Human Interface Guideline

  35. None
  36. ࣗ෼Ͱߟ͑ͯ ࢼߦࡨޡ

  37. Fluid Type

  38. html { font-size: 2vw; }?

  39. None
  40. None
  41. min-font-size

  42. html { font-size: calc(1em + 1vw); }

  43. Image credit: Mike Riethmueller

  44. None
  45. https://www.smashingmagazine.com/

  46. Image credit: Jake Wilson, https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing/

  47. None
  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/
  53. None
  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/

  59. None
  60. Image credit: Tim Brown, CSS Locks, https://blog.typekit.com/2016/08/17/flexible-typography-with-css-locks/

  61. େ͖͍෯খ͍͞෯

  62. None
  63. Line-height:1.5

  64. CSS Variables

  65. More MQ More CSS
 MORE PROBLEMS

  66. None
  67. None
  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/

  71. None
  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)

  83. None
  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จࣈ͙Β͍

  92. None
  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 ஶ

  97. None