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

今日から使える CSS Grid - MTDDC Meetup HOKKAIDO 2018 -

今日から使える CSS Grid - MTDDC Meetup HOKKAIDO 2018 -

MTDDC Meetup HOKKAIDO 2018
http://mtddc2018.mt-ezo.net/

で発表したスライドです。

Shotaro Sakamaki

June 09, 2018
Tweet

Other Decks in Programming

Transcript

  1. ͸͡Ίʹ • ࡔר ᠳେ࿠ʢ͔͞·͖ ͠ΐ͏ͨΖ͏ʣ • @GeckoTang (Twitter, GitHub) •

    גࣜձࣾϐΫηϧάϦου • ϑϩϯτΤϯυɾΤϯδχΞ • CSS͕޷͖ͳਓ • CSS PANICʢ2012೥ʣ
  2. HTMLΛॻ͍ͯ… • ਌ཁૉ.grid • ͍͔ͭ͘ͷࢠཁૉ • .a, .b, .c, .d,

    .e… <div class=“grid”> <div class=“a”></div> <div class=“b”></div> <div class=“c”></div> <div class=“d”></div> <div class=“e”></div> </div>
  3. CSSΛॻ͍͍ͯ͘… .a { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end:

    2; } .b { grid-column-start: 3; grid-column-end: 5; grid-row-start: 2; grid-row-end: 3; }
  4. ࢓༷ॻʹ͸… ”ཁ໿ ͜ͷ࢓༷͸ɺ UI ઃܭʹ࠷దԽ͞Εͨೋ࣍ݩ֨ࢠʹجͮ͘ϨΠΞ΢ τγεςϜʹ͍ͭͯड़΂Δɻ ֨ࢠϨΠΞ΢τϞσϧʹ͓͍ͯ͸ɺ֨ ࢠίϯςφͷҰ࿈ͷࢠΛɼ༧Ίఆٛ͞Εͨ flexible ʗݻఆతͳ

    α ΠζͷϨΠΞ΢τ֨ࢠͷதͷ೚ҙͷεϩοτʹҐஔͤ͞ΒΕΔɻ” • CSS Grid Layout Module Level 1 • CSS ֨ࢠϨΠΞ΢τ - CSS Grid Layout Module Level 1
  5. ྫɿHTML & CSS • ϨΠΞ΢τ৘ใΛCSSଆʹ࣋ͭͷͰɺHTMLͷߏ଄͕γϯϓϧʹ • CSSͰ͸Ͳ͏͍͏෼ׂʹ͢Δ͔ɺͲ͜ʹ഑ஔ͢Δ͔Λࢦఆ͢Δɻ <div class="grid"> <div

    class="title">Title</div> <div class="status">Status</div> <div class="memberList">Member List</div> <div class="gameWindow">Game Window</div> <div class="chatWindow">Chat Window</div> </div> .grid { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; } .title { grid-area: 1 / 1; } .status { grid-area: 3 / 1; } .memberList { grid-area: 2 / 1;} .gameWindow { grid-area: 1 / 2 / span 2 / auto; } .chatWindow { grid-area: 3 / 2; }
  6. ྫɿڱ͍ը໘༻ • ϝσΟΞΫΤϦΛ࢖͍ɺϨΠΞ΢τΛ૊Έସ͑Δ @media (max-width: 450px) { .grid { grid-template-columns:

    150px 1fr; grid-template-rows: auto auto auto auto; grid-template-areas: "title list" "status list" "game game" "chat chat"; } .title { grid-area: title; } .status { grid-area: status; } .memberList { grid-area: list; } .gameWindow { grid-area: game; } .chatWindow { grid-area: chat; } }
  7. ࢓༷ͷϓϩύςΟ *& ͷϓϩύςΟ "VUPQSFpYFSͰରԠ HSJEUFNQMBUFDPMVNOT NTHSJEDPMVNOT ✅ HSJEUFNQMBUFSPXT NTHSJESPXT ✅

    HSJEUFNQMBUFBSFBT  HSJEUFNQMBUF  HSJEBVUPDPMVNOT  HSJEBVUPSPXT  HSJEBVUPqPX  HSJE  HSJESPXTUBSU NTHSJESPX ✅ HSJEDPMVNOTUBSU NTHSJEDPMVNO ✅ HSJESPXFOE  HSJEDPMVNOFOE  HSJESPX  HSJEDPMVNO  HSJEBSFB  HSJESPXHBQ SPXHBQ  HSJEDPMVNOHBQ DPMVNOHBQ  HSJEHBQ HBQ   NTHSJEDPMVNOTQBO  NTHSJESPXTQBO BMJHOTFMG NTHSJEDPMVNOBMJHO ✅ KVTUJGZTFMG NTHSJESPXBMJHO ✅ IEͰ࢖͑ΔCSS Gridؔ࿈ϓϩύςΟ
  8. CSS GridΛཧղ͢ΔͨΊͷ جૅ஌ࣝ • άϦουίϯςφͱάϦουΞΠςϜ • άϦουϥΠϯ • άϦουτϥοΫ •

    άϦουηϧ • άϦουΤϦΞ ༻ޠ͕ଟ͍……ɻͰ΋͓֮͑ͯ͘ͱཧղΛॿ͚Δɻ
  9. άϦουΞΠςϜ •άϦουίϯςφͷ௚ԼͷࢠཁૉΛάϦουΞΠςϜͱݺͿɻάϦο υΞΠςϜʹ͸ɺ෼ׂ͞ΕͨάϦουͷͲ͜ʹҐஔ͢Δ͔ͳͲΛࢦఆ ͢Δɻ <div class="grid"><!-- άϦουίϯςφ --> <div class="grid__item-1">item</div>

    <!-- άϦουΞΠςϜ --> <div class="grid__item-2">item</div> <!-- άϦουΞΠςϜ --> <div class="grid__item-3">item</div> <!-- άϦουΞΠςϜ --> <div class="grid__item-4">item</div> <!-- άϦουΞΠςϜ --> </div> /* άϦουίϯςφͷࢦఆ */ .grid { display: grid; grid-template-columns: 100px 100px; grid-template-rows: 100px 100px; } /* άϦουΞΠςϜͷࢦఆ */ .grid__item-1 { grid-column: 1; grid-row: 1; } .grid__item-2 { grid-column: 2; grid-row: 1; } .grid__item-3 { grid-column: 1; grid-row: 2; } .grid__item-4 { grid-column: 2; grid-row: 2; }
  10. ྫ: άϦουΤϦΞͷࢦఆʢCSSʣ • ΞεΩʔΞʔτͷΑ͏ʹ഑ஔͰ͖Δ .grid { display: grid; grid-template-columns: 150px

    1fr; grid-template-rows: 50px 1fr 50px; grid-template-areas: "c a" "b a" "d a"; } .grid__item-a { grid-area: a; } .grid__item-b { grid-area: b; } .grid__item-c { grid-area: c; } .grid__item-d { grid-area: d; } <div class="grid"> <div class="grid__item-a">a</div> <div class="grid__item-b">b</div> <div class="grid__item-c">c</div> <div class="grid__item-d">d</div> </div>
  11. ͬ͘͟Γཧղ͢ΔͳΒ… • େ࿮ͷϨΠΞ΢τ → CSS Grid • ϦετͷϨΠΞ΢τ → CSS

    Grid, Flexbox • UIࣗମͷϨΠΞ΢τ → Flexbox • ը૾ͱจষͷϨΠΞ΢τ → float, Flexbox, CSS Grid ͦΕͧΕͷϨΠΞ΢τํ๏ͷಛ௃Λ ཧղͯ͠ɺ͏·͘׆༻͢Δɻ
  12. <div class="grid"> <div class="grid__item">1</div> <div class="grid__item">2</div> </div> .grid { display:

    grid; grid-gap: 10px; grid-template-columns: 150px 1fr; } .grid__item:nth-child(1) { background-color: tomato; } .grid__item:nth-child(2) { background-color: gold; } 2ΧϥϜ
  13. 3ΧϥϜ <div class="grid"> <div class="grid__item">1</div> <div class="grid__item">2</div> <div class="grid__item">3</div> </div>

    .grid { display: grid; grid-gap: 10px; grid-template-columns: 150px 1fr 100px; } .grid__item:nth-child(1) { background-color: tomato; } .grid__item:nth-child(2) { background-color: gold; } .grid__item:nth-child(3) { background-color: limegreen; }
  14. ϔομʔ,̎ΧϥϜ,ϑολʔ <div class="grid"> <div class="grid__header">header</div> <div class="grid__sub">sub</div> <div class="grid__main">main</div> <div

    class="grid__footer">footer</div> </div> .grid { display: grid; grid-gap: 10px; grid-template-columns: 150px 1fr; grid-template-rows: 100px auto 100px; grid-template-areas: "header header" "sub main" "footer footer"; } .grid__header { grid-area: header; } .grid__sub { grid-area: sub; } .grid__main { grid-area: main; } .grid__footer { grid-area: footer; }
  15. ͍͍ײ͡ͷϦετ <div class="grid"> <div class="grid__item">1</div> <!-- লུ --> <div class="grid__item">7</div>

    </div> .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
  16. 7. ·ͱΊ • άϦοτϨΠΞ΢τͱ͍͑͹CSS Grid • ϨΠΞ΢τʹ߹Θͤͨద੾ͳ࢖͍෼͚Λ͢Δ • CSS Grid͸΋͏࢖͑Δʂ

    • ࣮Ҋ݅Ͱ΋࢖͑Δʂ • IE11ʹରԠ͢ΔͷͰ͋Ε͹ɺIE11͕࢖͑ͳ͍ ػೳ͸ආ͚ΔɻͦΕͰ΋े෼ศརɻ
  17. https://www.codegrid.net/ • ࣥචਞ͸ݱ໾ͷϑϩϯτΤϯυɾΤϯδχΞ • جૅ͔Β࠷৽τϨϯυٕज़·ͰಡΈ͍ͨͱ͖ʹ͙͢ಡΊΔʂ • WebɾiOSΞϓϦ × ϝʔϧϚΨδϯ •

    ֹ݄800ԁ(੫ൈ)ͰɺશهࣄΞΫηεʴ݄4ճ഑৴ • ແྉهࣄɺແྉߪಡظ͕ؒ͋ΔͷͰ͓ࢼ͍ͩ͘͠͞ • CodeGrid - ͜Ε͔ΒͷάϦουϨΠΞ΢τ શ6ճ