Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

More Decks by アクイアジャパン Acquia Japan

Other Decks in Programming

Transcript

  1. ϝσΟΞΫΤϦͷجຊߏจ @media media-type and (media-feature-rule) { /* CSS نଇΛ͜͜ʹ */

    } ʮϝσΟΞλΠϓʯ Λࢦఆ ʮϝσΟΞಛੑʯΛ ࢖༻͠ͳ͕Βϧʔϧ Λهड़ { } ಺ʹCSSΛهड़ɻ ϝσΟλΠϓɺϧʔϧʹ߹க͠ ͨ৔߹ɺCSS͕ద༻͞ΕΔɻ
  2. ϝσΟΞλΠϓͱ͸ – σόΠεͷҰൠతͳΧςΰϦΛදͨ͠΋ͷͰ͢ɻ – ࣍ͷ஋͕ར༻ՄೳͰ͢ɻ – allɿશͯͷσόΠεʹదͨ͠΋ͷ – printɿҹ࡮༻ը໘Λର৅ –

    screenɿओʹը໘Λର৅ 
 – ϝσΟΞλΠϓͷࢦఆ͸ඞਢͰ͸͋Γ·ͤΜɻະࢦఆͷ৔߹͸ all ͕ ݺͼग़͞Ε·͢ɻ
  3. ϝσΟΞಛੑͱ͸ – ϢʔβʔΤʔδΣϯτɺग़ྗσόΠε΍ɺ؀ڥͷಛఆͷಛੑΛهड़͢Δ ͨΊʹ࢖༻͞Ε·͢ɻ – ओͳϝσΟΞಛੑ – orientationɿը໘ͷ޲͖Λ൑ఆ – heightɿը໘ͷߴ͞Λ൑ఆ

    – widthɿը໘ͷ෯Λ൑ఆ – ଞʹ΋ͨ͘͞Μʂৄ͘͠͸MDN Web Docs 
 – ϝσΟΞಛੑʹؔͯ͠΋ɺࢦఆ͸ඞਢͰ͸͋Γ·ͤΜɻ
  4. 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
  5. ࢀߟ) ϞόΠϧϑΝʔετͱσεΫτοϓϑΝʔετ https://joegalley.com/articles/mobile-first-vs-desktop-first-media-queries Qɿmin-width ΍ max-width ͸Ͳ͏࢖͍෼͚Δ΂͖͔ʁ Aɿ࣮૷͢ΔαΠτ͕ 
 ɹϞόΠϧϑΝʔετͷ৔߹͸

    min-width Λ࢖༻͠ɺ 
 ɹσεΫτοϓϑΝʔετͷ৔߹͸ max-width Λ࢖༻͢Δɻ ɹͦ͏͢Δ͜ͱͰɺϝσΟΞΫΤϦͷ֎ଆͰෳࡶʹͳΓ͑Δը໘෯ɹ ΛελΠϦϯάͰ͖ΔΑ͏ʹͳΔɻ
  6. ࢀߟ) ϞόΠϧϑΝʔετͱσεΫτοϓϑΝʔετ ϞόΠϧϑΝʔετͷ৔߹ σεΫτοϓϑΝʔετͷ৔߹ /* ԼهͷϝσΟΞΫΤϦҎ֎(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 ϝσΟΞΫΤ Ϧͷ֎ଆͰɺ Ұ൪هड़ྔ͕ ଟ͘ͳΔ
  7. ࠶ܝ) BartikͰ࢖༻͞ΕΔϒϨʔΫϙΠϯτͷྫ /* ԼهͷϝσΟΞΫΤϦҎ֎(0ʙ559px)ͷը໘෯Ͱద༻͞ΕΔ */ @media all and (min-width: 560px)

    { /* 560ʙ850pxͷ෯Ͱద༻͞ΕΔ */ } @media all and (min-width: 851px) { /* 851pxҎ্ͷ෯Ͱద༻͞ΕΔ */ } BartikͰ͸ɺϞόΠϧϑΝʔετɺσεΫτοϓϑΝʔετɺͲͪΒͷΞϓϩʔ νΛऔ͍ͬͯΔͰ͠ΐ͏ʁ
  8. *.breakpionts.yml ͸ͲΜͳ࣌ʹඞཁ͔ QɿΧελϜςʔϚͰ *.breakpoints.yml ͕ඞཁʹͳΔγʔϯͬͯͲΜͳ࣌ʁ AɿResponsive ImageϞδϡʔϧͳͲɺDrupalαΠτ಺ͷ 
 ɹଞϞδϡʔϧ/ςʔϚͰϒϨʔΫϙΠϯτ৘ใΛར༻͍ͨ࣌͠ʹ 


    ɹඞཁͰ͢ɻ ɹٯΛݴ͏ͱɺ DrupalαΠτ಺ͰϒϨʔΫϙΠϯτ৘ใΛ 
 ɹར༻͠ͳ͍ʢResponsive ImageϞδϡʔϧΛར༻͠ͳ͍ͳͲʣ৔߹͸ɺ 
 ɹ*.breakpoints.yml͸ඞཁ͋Γ·ͤΜɻ
  9. *.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Ͱ ࢦఆɻ