Drupal テーマ開発入門講座 第5回 ブレークポイントとメディアクエリ

https://www.acquia.com/jp/events/webinars/drupal-theming-development-vol5

Transcript

1. ୈ5ճ ϒϨʔΫϙΠϯτͱϝσΟΞΫΤϦ Drupal ςʔϚ ։ൃೖ໳ߨ࠲
2. Drupal ςʔϚ։ൃೖ໳ߨ࠲γϦʔζ – Drupalʹ͓͚ΔʮςʔϚʯͱ͸ɺWebαΠτͷݟͨ໨Λ୲͏ػೳͰ͢ɻຊ΢ΣϏφʔγϦʔ ζͰ͸ɺDrupalͷςʔϚ։ൃʹؔ͢Δجૅ஌ࣝΛղઆ͠·͢ɻ – DrupalͷϑϩϯτΤϯυपΓʹ͍ͭͯମܥతʹֶͼ͍ͨํɺࣗ෼ͰΧελϜςʔϚΛ࡞Ε ΔΑ͏ʹͳΓ͍ͨํɺΞΫΠΞೝఆσϕϩούʔࢼݧΛ໨ࢦ͢ํʹ͓͢͢ΊͰ͢ɻ – DrupalΛҰ௨Γૢ࡞ͨ͜͠ͱ͕͋ΔํΛର৅ͱ͍ͯ͠·͢ɻ·ͩDrupalΛ৮ͬͨ͜ͱ͕ແ ͍ํ͸ɺॳ৺ऀ޲͚DrupalνϡʔτϦΞϧಈըʢ೔ຊޠʣΛઌʹݟ͓ͯ͘ͱΑΓཧղ͕ਂ ·Γ·͢ɻ
3. 1. ϝσΟΞΫΤϦͷ֓ཁ 2. DrupalͷϒϨʔΫϙΠϯτ 3. ࿅श໰୊ ΞδΣϯμ
4. ϝσΟΞΫΤϦͷ֓ཁ
5. – ը໘෯ʹԠͯ͡ҟͳΔϨΠΞ΢τΛ࡞੒Ͱ ͖ΔɺCSSͷػೳͰ͢ɻ – 1ͭͷϖʔδͰෳ਺ͷҟͳΔදࣔ؀ڥʹରԠ ͢ΔϨεϙϯγϒWebσβΠϯΛ࣮ݱ͢Δ͜ ͱ͕Ͱ͖·͢ɻ ϝσΟΞΫΤϦ(Media Query)ͱ͸ λϒϨοτ εϚϗ σεΫτοϓ
6. ϝσΟΞΫΤϦͷجຊߏจ @media media-type and (media-feature-rule) { /* CSS نଇΛ͜͜ʹ */ } CSSϑΝΠϧʹهड़͠·͢ɻ
7. ϝσΟΞΫΤϦͷجຊߏจ @media media-type and (media-feature-rule) { /* CSS نଇΛ͜͜ʹ */ } ʮϝσΟΞλΠϓʯ Λࢦఆ ʮϝσΟΞಛੑʯΛ ࢖༻͠ͳ͕Βϧʔϧ Λهड़ { } ಺ʹCSSΛهड़ɻ ϝσΟλΠϓɺϧʔϧʹ߹க͠ ͨ৔߹ɺCSS͕ద༻͞ΕΔɻ
8. ϝσΟΞλΠϓͱ͸ – σόΠεͷҰൠతͳΧςΰϦΛදͨ͠΋ͷͰ͢ɻ – ࣍ͷ஋͕ར༻ՄೳͰ͢ɻ – allɿશͯͷσόΠεʹదͨ͠΋ͷ – printɿҹ࡮༻ը໘Λର৅ – screenɿओʹը໘Λର৅ 
 – ϝσΟΞλΠϓͷࢦఆ͸ඞਢͰ͸͋Γ·ͤΜɻະࢦఆͷ৔߹͸ all ͕ ݺͼग़͞Ε·͢ɻ
9. ϝσΟΞλΠϓΛࢦఆͨ͠ྫ ྫɿϖʔδͷҹ࡮ը໘ͷΈbodyཁૉͷϑΥϯταΠζΛ12ptʹઃఆ ͢Δ৔߹ @media print { body { font-size: 12pt; } }
10. ϝσΟΞಛੑͱ͸ – ϢʔβʔΤʔδΣϯτɺग़ྗσόΠε΍ɺ؀ڥͷಛఆͷಛੑΛهड़͢Δ ͨΊʹ࢖༻͞Ε·͢ɻ – ओͳϝσΟΞಛੑ – orientationɿը໘ͷ޲͖Λ൑ఆ – heightɿը໘ͷߴ͞Λ൑ఆ – widthɿը໘ͷ෯Λ൑ఆ – ଞʹ΋ͨ͘͞Μʂৄ͘͠͸MDN Web Docs 
 – ϝσΟΞಛੑʹؔͯ͠΋ɺࢦఆ͸ඞਢͰ͸͋Γ·ͤΜɻ
11. ϝσΟΞಛੑΛࢦఆͨ͠ྫ ྫɿϝσΟΞλΠϓ͕εΫϦʔϯɺ͔ͭը໘෯͕600pxʹ߹கͨ͠ ࡍʹbodyཁૉͷςΩετͷ৭Λ੺৭ʹ͢Δ @media screen and (width: 600px) { body { color: red; } }
12. ϒϨʔΫϙΠϯτͱ͸ – ը໘෯ʹԠͯ͡ϨΠΞ΢τΛ੾Γସ͑ΔϙΠϯτΛҙຯ͠·͢ɻ – ଟ͘ͷ৔߹ɺϝσΟΞΫΤϦͷwin-width΍max-widthʹΑͬͯهड़͞Ε·͢ɻ @media all and (min-width: 560px) { /* ࠷খ෯͕560pxͷ৔߹ */ } @media all and (min-width: 851px) { /* ࠷খ෯͕851pxͷ৔߹ */ }
13. BartikͰ࢖༻͞ΕΔϒϨʔΫϙΠϯτͷྫ /* ԼهͷϝσΟΞΫΤϦҎ֎(0ʙ559px)ͷը໘෯Ͱద༻͞ΕΔ */ @media all and (min-width: 560px) { /* 560ʙ850pxͷ෯Ͱద༻͞ΕΔ */ } @media all and (min-width: 851px) { /* 851pxҎ্ͷ෯Ͱద༻͞ΕΔ */ } core/themes/bartik/css/components/featured-bottom.css
14. ࢀߟ) ϞόΠϧϑΝʔετͱσεΫτοϓϑΝʔετ https://joegalley.com/articles/mobile-first-vs-desktop-first-media-queries Qɿmin-width ΍ max-width ͸Ͳ͏࢖͍෼͚Δ΂͖͔ʁ Aɿ࣮૷͢ΔαΠτ͕ 
 ɹϞόΠϧϑΝʔετͷ৔߹͸ min-width Λ࢖༻͠ɺ 
 ɹσεΫτοϓϑΝʔετͷ৔߹͸ max-width Λ࢖༻͢Δɻ ɹͦ͏͢Δ͜ͱͰɺϝσΟΞΫΤϦͷ֎ଆͰෳࡶʹͳΓ͑Δը໘෯ɹ ΛελΠϦϯάͰ͖ΔΑ͏ʹͳΔɻ
15. ࢀߟ) ϞόΠϧϑΝʔετͱσεΫτοϓϑΝʔετ ϞόΠϧϑΝʔετͷ৔߹ σεΫτοϓϑΝʔετͷ৔߹ /* ԼهͷϝσΟΞΫΤϦҎ֎(1201pxҎ্)ͷը໘෯Ͱ ద༻͞ΕΔ */ @media (max-width: 1200px) { /* 993ʙ1200pxͷ෯Ͱద༻͞ΕΔ */ } @media (max-width: 992px) { /* 769ʙ992pxͷ෯Ͱద༻͞ΕΔ */ } @media (max-width: 768px) { /* 0ʙ768pxͷ෯Ͱద༻͞ΕΔ */ } /* ԼهͷϝσΟΞΫΤϦҎ֎(0ʙ767px)ͷը໘෯Ͱ ద༻͞ΕΔ */ @media (min-width: 768px) { /* 768ʙ991pxͷ෯Ͱద༻͞ΕΔ */ } @media (min-width: 992px) { /* 992ʙ1199pxͷ෯Ͱద༻͞ΕΔ */ } @media (min-width: 1200px) { /* 1200pxҎ্ͷ෯Ͱద༻͞ΕΔ */ } https://joegalley.com/articles/mobile-first-vs-desktop-first-media-queries ϝσΟΞΫΤ Ϧͷ֎ଆͰɺ Ұ൪هड़ྔ͕ ଟ͘ͳΔ
16. ࠶ܝ) BartikͰ࢖༻͞ΕΔϒϨʔΫϙΠϯτͷྫ /* ԼهͷϝσΟΞΫΤϦҎ֎(0ʙ559px)ͷը໘෯Ͱద༻͞ΕΔ */ @media all and (min-width: 560px) { /* 560ʙ850pxͷ෯Ͱద༻͞ΕΔ */ } @media all and (min-width: 851px) { /* 851pxҎ্ͷ෯Ͱద༻͞ΕΔ */ } BartikͰ͸ɺϞόΠϧϑΝʔετɺσεΫτοϓϑΝʔετɺͲͪΒͷΞϓϩʔ νΛऔ͍ͬͯΔͰ͠ΐ͏ʁ
17. DrupalͷϒϨʔΫϙΠϯτ
18. BreakpointϞδϡʔϧͱ *.breakpionts.yml – BartikͷྫΛݟ͍͍ͯͨͩͨ௨ΓɺDrupalͰ΋௨ৗͷϑϩϯτΤϯυ։ ൃͱಉ༷ʹɺCSSϑΝΠϧʹϝσΟΞΫΤϦΛهड़͢Δ͜ͱͰϒϨʔΫ ϙΠϯτΛ௥Ճ͠ɺσόΠεʹԠͨ͡ϨΠΞ΢τΛ࡞੒Ͱ͖·͢ɻ – ςʔϚͰ࢖༻͍ͯ͠ΔϒϨʔΫϙΠϯτΛ *.breakpoints.yml ʹఆٛ͢ Δ͜ͱͰɺίΞͷBreakpointϞδϡʔϧΛհͯ͠ϒϨʔΫϙΠϯτͷ৘ ใΛDrupalαΠτ಺Ͱར༻Ͱ͖ΔΑ͏ʹͳΓ·͢ɻ – DrupalίΞͰ͸ɺResponsive ImageϞδϡʔϧͰϒϨʔΫϙΠϯτ৘ ใΛར༻Ͱ͖·͢ɻ
19. Responsive ImageϞδϡʔϧͱ͸ – ςʔϚ/ϞδϡʔϧʹΑͬͯఏڙ͞ΕΔϒϨʔΫϙ Πϯτ৘ใΛ࢖༻ͯ͠ɺϖʔδͷը໘෯ʹԠͯ͡ ҟͳΔαΠζͷը૾ΛಡΈࠐΉ͜ͱ͕Ͱ͖·͢ɻ – Responsive ImageϞδϡʔϧͰ͸ςʔϚ/Ϟδϡʔ ϧͷϒϨʔΫϙΠϯτ৘ใΛಡΈࠐΉඞཁ͕͋Δ ͨΊɺBreakpointϞδϡʔϧ͕ඞཁͰ͢ɻ – Responsive ImageϞδϡʔϧ͸ɺHTML5ͷ pictureλάΛ༻͍ͯը૾ΛαΠτʹදࣔ͠·͢ɻ
20. Responsive ImageϞδϡʔϧͱ͸ – εϚϗͷΑ͏ͳখ͍͞ը໘Ͱϖʔδ͔ΒΞΫηε͕͋Δ৔߹ɺσόΠεʹૹ৴͞ ΕΔը૾αΠζΛখ͘͞Ͱ͖ɺϖʔδͷಡΈࠐΈ࣌ؒΛ୹ॖͰ͖ΔՄೳੑ͕͋ Γ·͢ɻ – ·ͨɺը໘ͷେ͖͍σΟεϓϨΠ΍ɺRetinaσΟεϓϨΠͳͲߴըૉσόΠε͔ ΒΞΫηε͕͋Δ৔߹ɺେ͖͍αΠζͷը૾Λૹ৴͢Δ͜ͱͰɺը૾͕ߥΕΔ ͜ͱͳ͘៉ྷʹݟͤΔ͜ͱ͕Ͱ͖·͢ɻ
21. *.breakpionts.yml ͸ͲΜͳ࣌ʹඞཁ͔ QɿΧελϜςʔϚͰ *.breakpoints.yml ͕ඞཁʹͳΔγʔϯͬͯͲΜͳ࣌ʁ AɿResponsive ImageϞδϡʔϧͳͲɺDrupalαΠτ಺ͷ 
 ɹଞϞδϡʔϧ/ςʔϚͰϒϨʔΫϙΠϯτ৘ใΛར༻͍ͨ࣌͠ʹ 
 ɹඞཁͰ͢ɻ ɹٯΛݴ͏ͱɺ DrupalαΠτ಺ͰϒϨʔΫϙΠϯτ৘ใΛ 
 ɹར༻͠ͳ͍ʢResponsive ImageϞδϡʔϧΛར༻͠ͳ͍ͳͲʣ৔߹͸ɺ 
 ɹ*.breakpoints.yml͸ඞཁ͋Γ·ͤΜɻ
22. *.breakpoints.ymlͷهड़ํ๏ bartik.mobile: label: mobile mediaQuery: '' weight: 0 multipliers: - 1x bartik.narrow: label: narrow mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)' weight: 1 multipliers: - 1x bartik.wide: label: wide mediaQuery: 'all and (min-width: 851px)' weight: 2 multipliers: - 1x ઃఆϑΝΠϧ͸ɺओʹϥϕϧͱϝσΟΞΫΤϦͰߏ ੒͞Ε·͢ɻ – bartik.mobileͳͲ࠷্ҐͷΩʔ͸ϒϨʔΫϙΠ ϯτͷϚγϯ໊ɻϑΝΠϧ಺ͰҰҙͰ͋Δඞཁ ͋Γɻ – labelɿϒϨʔΫϙΠϯτΛࣔ͢ɺਓ͕ಡΉͨ Ίͷϥϕϧ໊ɻ຋༁Մೳɻ – mediaQueryɿϒϨʔΫϙΠϯτͰදݱ͍ͨ͠ ϝσΟΞΫΤϦɻۭ΋ࢦఆՄೳɻ – weightɿϒϨʔΫϙΠϯτͷॱংɻ – multipliersɿϐΫηϧղ૾౓ɻ1xɺ1.5xɺ2xͰ ࢦఆɻ
23. ԋश ΧελϜςʔϚͰϒϨʔΫϙΠϯτઃఆϑΝΠϧΛ࡞੒͠Α͏ – *.breakpoints.yml ϑΝΠϧͷ࡞੒ – ͲΜͳϒϨʔΫϙΠϯτΛఆٛ͢Δ͔ – ϨεϙϯγϒΠϝʔδϞδϡʔϧͰϒϨʔΫϙΠϯτ৘ใΛ׆ ༻ͯ͠ΈΑ͏
24. ࿅श໰୊
25. *.breakpoints.yml ͸ɺԿΛߦ͏ͨΊͷϑΝΠϧͰ͔͢ʁ 1. ςʔϚ಺Ͱ࢖༻͢ΔϒϨʔΫϙΠϯτΛఆٛ͠ɺը໘෯ʹԠͯ͡࢖༻͢Δ CSSΛ੾Γସ͑ΔͨΊʹ࢖༻͞ΕΔɻ 2. ςʔϚͰ͋Β͔͡Ίఆٛ͞Ε͍ͯΔϒϨʔΫϙΠϯτΛ্ॻ͖͢ΔͨΊʹ ࢖༻͞ΕΔɻ 3. ςʔϚ։ൃͰσόοά࡞ۀΛߦ͏ͨΊʹ࢖༻͞ΕΔɻ 4. ίΞͷResponsive ImageϞδϡʔϧʹϒϨʔΫϙΠϯτ৘ใΛఏڙ͢Δͨ Ίʹ࢖༻͞ΕΔɻ ࿅श໰୊1
26. *.breakpoints.yml ͸ɺԿΛߦ͏ͨΊͷϑΝΠϧͰ͔͢ʁ 1. ςʔϚ಺Ͱ࢖༻͢ΔϒϨʔΫϙΠϯτΛఆٛ͠ɺը໘෯ʹԠͯ͡࢖༻͢Δ CSSΛ੾Γସ͑ΔͨΊʹ࢖༻͞ΕΔɻ 2. ςʔϚͰ͋Β͔͡Ίఆٛ͞Ε͍ͯΔϒϨʔΫϙΠϯτΛ্ॻ͖͢ΔͨΊʹ ࢖༻͞ΕΔɻ 3. ςʔϚ։ൃͰσόοά࡞ۀΛߦ͏ͨΊʹ࢖༻͞ΕΔɻ 4. ίΞͷResponsive ImageϞδϡʔϧʹϒϨʔΫϙΠϯτ৘ใΛఏڙ͢Δͨ Ίʹ࢖༻͞ΕΔɻ ࿅श໰୊1 4
27. ςʔϚʹ͓͚Δ *.breakpoints.yml ϑΝΠϧʹ͍ͭͯͷਖ਼͍͠هड़͸ͲΕͰ ͔͢ʁ 1. ϑΝΠϧͷ಺༰͸Drupalͷ؅ཧը໘͔Βฤू͕ߦ͑Δɻ 2. ϑΝΠϧͷ಺༰ΛDrupalαΠτ಺Ͱ׆༻͢Δʹ͸ɺBreakpointϞδϡʔ ϧΛ༗ޮʹ͠ͳ͚Ε͹ͳΒͳ͍ɻ 3. ϑΝΠϧʹهड़͢ΔϝσΟΞΫΤϦ͸ɺςʔϚͷCSSͰར༻͢ΔϒϨʔ ΫϙΠϯτͷϝσΟΞΫΤϦͱ׬શҰகͤ͞ͳ͍ͱػೳ͠ͳ͍ɻ ࿅श໰୊2
28. ςʔϚʹ͓͚Δ *.breakpoints.yml ϑΝΠϧʹ͍ͭͯͷਖ਼͍͠هड़͸ͲΕͰ ͔͢ʁ 1. ϑΝΠϧͷ಺༰͸Drupalͷ؅ཧը໘͔Βฤू͕ߦ͑Δɻ 2. ϑΝΠϧͷ಺༰ΛDrupalαΠτ಺Ͱ׆༻͢Δʹ͸ɺBreakpointϞδϡʔ ϧΛ༗ޮʹ͠ͳ͚Ε͹ͳΒͳ͍ɻ 3. ϑΝΠϧʹهड़͢ΔϝσΟΞΫΤϦ͸ɺςʔϚͷCSSͰར༻͢ΔϒϨʔ ΫϙΠϯτͷϝσΟΞΫΤϦͱ׬શҰகͤ͞ͳ͍ͱػೳ͠ͳ͍ɻ ࿅श໰୊2 2
29. ຊ೔ͷΞδΣϯμ͸ऴྃ
30. 1. ϝσΟΞΫΤϦͷ֓ཁ 2. DrupalͷϒϨʔΫϙΠϯτ 3. ࿅श໰୊ ΞδΣϯμ