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

Slide 1

Slide 1 text

ࠓ೔͔Β࢖͑Δ CSS Grid MTDDC Meetup HOKKAIDO 2018

Slide 2

Slide 2 text

͸͡Ίʹ

Slide 3

Slide 3 text

͸͡Ίʹ • ࡔר ᠳେ࿠ʢ͔͞·͖ ͠ΐ͏ͨΖ͏ʣ • @GeckoTang (Twitter, GitHub) • גࣜձࣾϐΫηϧάϦου • ϑϩϯτΤϯυɾΤϯδχΞ • CSS͕޷͖ͳਓ • CSS PANICʢ2012೥ʣ

Slide 4

Slide 4 text

CSS PANIC • 2012೥͝Ζ࡞ͬͨ • JSΛ࢖͍ͬͯͳ͍ • ౰࣌͸Chrome͔SafariͷΈ

Slide 5

Slide 5 text

ࠓ೔࿩͢͜ͱ

Slide 6

Slide 6 text

ࠓ೔࿩͢͜ͱ 1.ݱࡏ·Ͱͷ༷ʑͳϨΠΞ΢τํ๏ 2.CSS Gridͱ͸ 3.֤ϒϥ΢βͷ࣮૷ঢ়گ 4.CSS GridͰ͸ͲΜͳϨΠΞ΢τ͕Ͱ͖Δʁ 5.CSS GridΛཧղ͢ΔͨΊͷجૅ஌ࣝ 6.CSS Gridͷ࢖͍ॴ΍ɺFlexboxͱͷ࢖͍෼͚ 7.CSS GridΛ࢖ͬͨ؆୯ͳαϯϓϧΛ͍͔ͭ͘ 8.·ͱΊ

Slide 7

Slide 7 text

1. ݱࡏ·Ͱͷ ɹ༷ʑͳϨΠΞ΢τํ๏ 1/8

Slide 8

Slide 8 text

ݱࡏ·Ͱͷ ༷ʑͳϨΠΞ΢τํ๏ • • ﬂoat • position • table-cell • inline-block • Flexbox • CSS Grid (New!)

Slide 9

Slide 9 text

, ﬂoat, position • ੲ͸Α͘࢖ͬͨ… • ςʔϒϧίʔσΟϯά • ﬂoat, positionʹΑΔΧϥϜϨΠΞ΢τ

Slide 10

Slide 10 text

display: table-cell; display: inline-block; • IE8Ͱ΋࢖͑Δtable-cell΍inline-blockΛ  ଟ༻͍ͯͨ࣌͠୅΋͋ͬͨ…

Slide 11

Slide 11 text

Flexbox • 2015ʙ2016೥͋ͨΓͰɺҰ༂༗໊ʹͳΓɺΑ͘ ࢖ΘΕΔΑ͏ʹͳͬͨҹ৅ɻ

Slide 12

Slide 12 text

CSS Grid • 2017೥ʹଟ͘ͷϒϥ΢βͰαϙʔτ͞Εͨʂ

Slide 13

Slide 13 text

2. CSS Gridͱ͸ 2/8

Slide 14

Slide 14 text

·ͣ͸ͬ͘͟Γͱɺ ͲΜͳ΋ͷ͔ɻ

Slide 15

Slide 15 text

HTMLΛॻ͍ͯ… • ਌ཁૉ.grid • ͍͔ͭ͘ͷࢠཁૉ • .a, .b, .c, .d, .e…

Slide 16

Slide 16 text

CSSΛॻ͍͍ͯ͘… .grid {  ɹdisplay: grid; }

Slide 17

Slide 17 text

CSSΛॻ͍͍ͯ͘… .grid {  ɹdisplay: grid; grid-template-columns:  100px 150px 100px 50px; grid-template-rows:  auto 100px auto; }

Slide 18

Slide 18 text

CSSΛॻ͍͍ͯ͘… .a { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; }

Slide 19

Slide 19 text

CSSΛॻ͍͍ͯ͘… .b { grid-column-start: 3; grid-column-end: 5; grid-row-start: 2; grid-row-end: 3; }

Slide 20

Slide 20 text

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; }

Slide 21

Slide 21 text

গ͠ৄ͘͠

Slide 22

Slide 22 text

࢓༷ॻʹ͸… ”ཁ໿ ͜ͷ࢓༷͸ɺ UI ઃܭʹ࠷దԽ͞Εͨೋ࣍ݩ֨ࢠʹجͮ͘ϨΠΞ΢ τγεςϜʹ͍ͭͯड़΂Δɻ ֨ࢠϨΠΞ΢τϞσϧʹ͓͍ͯ͸ɺ֨ ࢠίϯςφͷҰ࿈ͷࢠΛɼ༧Ίఆٛ͞Εͨ ﬂexible ʗݻఆతͳ α ΠζͷϨΠΞ΢τ֨ࢠͷதͷ೚ҙͷεϩοτʹҐஔͤ͞ΒΕΔɻ” • CSS Grid Layout Module Level 1 • CSS ֨ࢠϨΠΞ΢τ - CSS Grid Layout Module Level 1

Slide 23

Slide 23 text

ཁ͸ɺ࿮Λ࡞ͬͯ ޷͖ͳ৔ॴʹཁૉΛ഑ஔͰ͖Δ

Slide 24

Slide 24 text

΢ΣϒαΠτɾΞϓϦ͸ෳࡶ ͳϨΠΞ΢τʹͳ͍ͬͯΔ • ͚ͩͩͱແཧɺͦ΋ͦ΋ද૊Έ༻ • ﬂoat͚ͩͩͱແཧɺͦ΋ͦ΋จষϨΠΞ΢τ༻ • Flexbox΋͋Δ͚Ͳɺͪΐͬͱ଍Γͯͳ͍ • CSS Grid͸ɺͦͷͨΊʹ࡞ΒΕͨ

Slide 25

Slide 25 text

CSS Grid͸ άϦουϨΠΞ΢τΛ࡞Γ΍͍͢ • Λ࢖ͬͨςʔϒϧϨΠΞ ΢τʹࣅ͍ͯΔʢͱࢥ͏…ʣ • ͷΑ͏ʹHTMLଆͰ͸ϨΠ Ξ΢τߏ଄Λ࡞ΒͣɺCSSଆͰϨ ΠΞ΢τߏ଄Λ࡞Δ͜ͱ͕Ͱ͖Δ

Slide 26

Slide 26 text

ྫɿHTML & CSS • ϨΠΞ΢τ৘ใΛCSSଆʹ࣋ͭͷͰɺHTMLͷߏ଄͕γϯϓϧʹ • CSSͰ͸Ͳ͏͍͏෼ׂʹ͢Δ͔ɺͲ͜ʹ഑ஔ͢Δ͔Λࢦఆ͢Δɻ

Title

Status

Member List

Game Window

Chat Window

.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; }

Slide 27

Slide 27 text

ྫɿڱ͍ը໘༻ • ϝσΟΞΫΤϦΛ࢖͍ɺϨΠΞ΢τΛ૊Έସ͑Δ @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; } }

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

3. ֤ϒϥ΢βͷ ɹ ࣮૷ঢ়گ 3/8

Slide 30

Slide 30 text

֤ϒϥ΢βͷ࣮૷ঢ়گ

Slide 31

Slide 31 text

֤ϒϥ΢βͷ࣮૷ঢ়گ

Slide 32

Slide 32 text

IE10ͱIE11ʹ͸஫ҙ • IE10Ͱ୭ΑΓ΋ૣ͘CSS GridΛ࣮૷ (2012೥ • IE10ͱIE11͸ݹ͍࢓༷Ͱ࣮૷͍ͯ͠Δ… • Edge΋·ͨݹ͍࢓༷Λࢀর͍͕ͯͨ͠ɺࠓͷ όʔδϣϯͰ͸৽͍͠࢓༷ʹରԠ͍ͯ͠Δ • IE…

Slide 33

Slide 33 text

IEʹͰ͖ͳ͍͜ͱ • IE10+Ͱ΋CSS Grid͸࢖͑Δ͚ͲɺҰ෦ͷػೳ͕ ࢖͑ͳ͍ͱ͍͏͜ͱΛ͓֮͑ͯ͘͜ͱ • άϦουΞΠςϜ͸ࣗಈͰ഑ஔ͞Εͳ͍ • άϦουΤϦΞʹ໊લΛ͚ͭΔࣄ͕Ͱ͖ͳ͍

Slide 34

Slide 34 text

࢓༷ͷϓϩύςΟ *&ͷϓϩύςΟ "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ؔ࿈ϓϩύςΟ

Slide 35

Slide 35 text

4. CSS GridͰ͸ ɹͲΜͳϨΠΞ΢τ͕Ͱ͖Δʁ 4/8

Slide 36

Slide 36 text

΢ΣϒαΠτ • ΢ΣϒαΠτͷେ࿮ͷϨΠΞ΢τΛ࡞Δ

Slide 37

Slide 37 text

΢ΣϒαΠτͷ  ϨεϙϯγϒରԠ • ը໘෯ʹΑͬͯϨΠΞ΢τΛมߋ͢Δ

Slide 38

Slide 38 text

ॎԣʹἧ͑Δඞཁͷ͋Δ Ϧετ • ߦͷߴ͞Ͱ͋ͬͨΓɺྻͷ෯Λἧ͑Δ

Slide 39

Slide 39 text

ϑΥʔϜ • Λ࢖Θͳ͍ͰɺάϦουϨΠΞ΢τͷϑΥʔϜΛ࡞Δ

Slide 40

Slide 40 text

ࡶࢽͷࢽ໘ͷΑ͏ͳ ϨΠΞ΢τ • ෳࡶͳάϦουϨΠΞ΢τ΋࡞ΕΔ

Slide 41

Slide 41 text

FlexboxͰ΋Մೳ͔΋͠Εͳ͍͕... • Flexbox͸ॎɾԣͲͪΒ͔ͷ੔ྻ͕Ͱ͖Δ • CSS Grid͸ॎͱԣͷ੔ྻ͕Ͱ͖Δ • Flexboxʹ΋Gridʹ΋ɺͦΕͧΕಘҙͳϨΠΞ΢τ͕͋Δ • ॎԣʹ੔ྻ͍ͤͨ͞ͷͰ͋Ε͹CSS Grid͕޲͍͍ͯΔ • CSS Gridͷ৔߹ɺHTMLͷߏ଄΋γϯϓϧʹͳΔʢͱࢥ͏ʣ

Slide 42

Slide 42 text

5. CSS GridΛ ɹཧղ͢ΔͨΊͷ ɹجૅ஌ࣝ 5/8

Slide 43

Slide 43 text

CSS GridΛཧղ͢ΔͨΊͷ جૅ஌ࣝ • άϦουίϯςφͱάϦουΞΠςϜ • άϦουϥΠϯ • άϦουτϥοΫ • άϦουηϧ • άϦουΤϦΞ ༻ޠ͕ଟ͍……ɻͰ΋͓֮͑ͯ͘ͱཧղΛॿ͚Δɻ

Slide 44

Slide 44 text

άϦουίϯςφͱάϦουΞΠςϜ • άϦουίϯςφɿ਌ɻେ࿮ΛܾΊΔɻ • άϦουΞΠςϜɿࢠɻͲͷ࿮ʹೖΔ͔ΛܾΊΔɻ

Slide 45

Slide 45 text

άϦουίϯςφ • display: grid;·ͨ͸display: inline-grid;͕ࢦఆ͞Εͨཁૉɻ  άϦουͷ෼ׂ਺΍ɺ෼ׂ͞ΕͨάϦουͷྻɾߦͷ෯ɾߴ͞ͱ͍ͬͨɺ ϨΠΞ΢τ৘ใΛࢦఆ͢Δɻ

/* άϦουίϯςφͷࢦఆ */ .grid { display: grid; grid-template-columns: 100px 100px; grid-template-rows: 100px 100px; }

Slide 46

Slide 46 text

άϦουΞΠςϜ •άϦουίϯςφͷ௚ԼͷࢠཁૉΛάϦουΞΠςϜͱݺͿɻάϦο υΞΠςϜʹ͸ɺ෼ׂ͞ΕͨάϦουͷͲ͜ʹҐஔ͢Δ͔ͳͲΛࢦఆ ͢Δɻ

item

/* άϦουίϯςφͷࢦఆ */ .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; }

Slide 47

Slide 47 text

άϦουϥΠϯ • άϦουϥΠϯ͸ɺάϦουΛԣํ޲ɾ ॎํ޲ʹ෼ׂ͢Δܩઢͷ͜ͱɻ • ͦͷάϦουϥΠϯ͸ଠ͕͞ͳ͘ɺݟ ͨ໨ʹ͸ݱΕͳ͍ɻ

Slide 48

Slide 48 text

άϦουτϥοΫ •άϦουτϥοΫ͸ɺ֤ྻ΍ߦΛҙຯ͢Δɻ •άϦουτϥοΫͷαΠζͳͲΛࢦఆ͢Δͨ Ίʹ͸ɺgrid-template-columns΍grid- template-rowsϓϩύςΟΛάϦουίϯς φʹࢦఆ͢Δɻ

Slide 49

Slide 49 text

άϦουηϧ • ߦͷάϦουτϥοΫͱྻͷάϦουτϥοΫ͕ ަࠩ͢ΔՕॴΛʮάϦουηϧʯͱݺͿɻ

Slide 50

Slide 50 text

άϦουΤϦΞ • ෳ਺ͷߦͱྻͷάϦουτϥοΫ͕ަࠩ͢Δൣ ғ͸ʮάϦουΤϦΞʯͱݺͿɻ • ͜ͷάϦουΤϦΞʹ͸໊લΛ͚ͭΔ͜ͱ͕Ͱ ͖Δɻ

Slide 51

Slide 51 text

໊લͷ෇͚ํ

Slide 52

Slide 52 text

ྫ: άϦουΤϦΞͷࢦఆʢHTMLʣ • 3ߦ2ྻʹ෼ׂͯ͠ɺཁૉΛ഑ஔ͍ͨ͠

Slide 53

Slide 53 text

ྫ: άϦουΤϦΞͷࢦఆʢ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; }

Slide 54

Slide 54 text

6. CSS Gridͷ࢖͍ॴ΍ ɹFlexboxͱͷ࢖͍෼͚ 6/8

Slide 55

Slide 55 text

6.CSS Gridͷ࢖͍ॴ΍  ɹFlexboxͱͷ࢖͍෼͚ 1.CSS Grid͕޲͍͍ͯΔ΋ͷΛཧղ͢Δ 2.Flexbox͕޲͍͍ͯΔ΋ͷΛཧղ͢Δ 3.࣮ࡍͷ΢ΣϒαΠτͷίί͸˓˓

Slide 56

Slide 56 text

1. CSS Grid͕޲͍͍ͯΔ΋ͷ • ͍ΘΏΔάϦουϨΠΞ΢τ • େ͖͍෦෼Ͱݴ͑͹ɺ΢ΣϒαΠτͷେ࿮ • খ͍͞෦෼Ͱݴ͑͹ɺॎԣʹἧ͑Δඞཁͷ͋ΔϦετ • ߦͱྻͰɺ෯΍ߴ͞Λἧ͑Δඞཁ͕͋ΔͳΒCSS Grid

Slide 57

Slide 57 text

2. Flexbox͕޲͍͍ͯΔ΋ͷ • ԣ·ͨ͸ɺॎʹฒͿ௚ઢతͳUI • λϒɺαΠυϝχϡʔɺϖʔδૹΓɺύϯͣ͘Ϧετ • ߦ͝ͱɺྻ͝ͱʹΞΠςϜΛἧ͑ΔͷͰ͋Ε͹Flexbox

Slide 58

Slide 58 text

3. ࣮ࡍͷ΢ΣϒαΠτͷίί͸˓˓ • Ծʹɺ͜ͷΑ͏ͳαΠ τΛ࡞Δͱͯ͠ɻ

Slide 59

Slide 59 text

αΠτͷେ࿮෦෼ͷϨΠΞ΢τ

Slide 60

Slide 60 text

αΠτͷେ࿮෦෼ͷϨΠΞ΢τ • CSS GridΛ࢖͏

Slide 61

Slide 61 text

Ϧετ෦෼ͷϨΠΞ΢τ

Slide 62

Slide 62 text

Ϧετ෦෼ͷϨΠΞ΢τ • ॎͱԣʹ෯΍ߴ͞Λ ἧ͍͑ͨ • CSS GridΛ࢖͏  FlexboxͰ΋ؤுΕ͹ՄೳͰ͸͋Δ…

Slide 63

Slide 63 text

UIʢݕࡧϑΥʔϜɺύϯͣ͘ɺλϒʣ

Slide 64

Slide 64 text

UIʢݕࡧϑΥʔϜɺύϯͣ͘ɺλϒʣ • ԣ·ͨ͸ɺॎํ޲ʹ ཁૉ͕ฒͿ΋ͷ • FlexboxΛ࢖͏

Slide 65

Slide 65 text

ը૾ͱจষͷϨΠΞ΢τ

Slide 66

Slide 66 text

ը૾ͱจষͷϨΠΞ΢τ • ςΩετΛճΓࠐ· ͤΔͷͰ͋Ε͹ɺ ﬂoatΛ࢖͏ • ͦ͏Ͱͳ͍ͳΒ FlexboxͰɻ • ৔߹ʹΑͬͯ͸CSS GridͰ΋ɻ

Slide 67

Slide 67 text

ͬ͘͟Γཧղ͢ΔͳΒ… • େ࿮ͷϨΠΞ΢τ → CSS Grid • ϦετͷϨΠΞ΢τ → CSS Grid, Flexbox • UIࣗମͷϨΠΞ΢τ → Flexbox • ը૾ͱจষͷϨΠΞ΢τ → ﬂoat, Flexbox, CSS Grid ͦΕͧΕͷϨΠΞ΢τํ๏ͷಛ௃Λ ཧղͯ͠ɺ͏·͘׆༻͢Δɻ

Slide 68

Slide 68 text

7. CSS GridΛ࢖ͬͨ ɹ؆୯ͳαϯϓϧΛ ɹ͍͔ͭ͘ 7/8

Slide 69

Slide 69 text

.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ΧϥϜ

Slide 70

Slide 70 text

3ΧϥϜ

.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; }

Slide 71

Slide 71 text

ϔομʔ,̎ΧϥϜ,ϑολʔ

header

sub

main

footer

.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; }

Slide 72

Slide 72 text

͍͍ײ͡ͷϦετ

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }

Slide 73

Slide 73 text

ࢀߟʹͳΔαΠτ

Slide 74

Slide 74 text

https://gridbyexample.com/examples/ Grid by Example

Slide 75

Slide 75 text

http://labs.jensimmons.com/ The Experimental Layout Lab of Jen Simmons

Slide 76

Slide 76 text

http://cssgridgarden.com/#ja GRID GARDEN

Slide 77

Slide 77 text

8. ·ͱΊ 8/8

Slide 78

Slide 78 text

7. ·ͱΊ • άϦοτϨΠΞ΢τͱ͍͑͹CSS Grid • ϨΠΞ΢τʹ߹Θͤͨద੾ͳ࢖͍෼͚Λ͢Δ • CSS Grid͸΋͏࢖͑Δʂ • ࣮Ҋ݅Ͱ΋࢖͑Δʂ • IE11ʹରԠ͢ΔͷͰ͋Ε͹ɺIE11͕࢖͑ͳ͍ ػೳ͸ආ͚ΔɻͦΕͰ΋े෼ศརɻ

Slide 79

Slide 79 text

[PR] CodeGrid

Slide 80

Slide 80 text

https://www.codegrid.net/ • ࣥචਞ͸ݱ໾ͷϑϩϯτΤϯυɾΤϯδχΞ • جૅ͔Β࠷৽τϨϯυٕज़·ͰಡΈ͍ͨͱ͖ʹ͙͢ಡΊΔʂ • WebɾiOSΞϓϦ × ϝʔϧϚΨδϯ • ֹ݄800ԁ(੫ൈ)ͰɺશهࣄΞΫηεʴ݄4ճ഑৴ • ແྉهࣄɺແྉߪಡظ͕ؒ͋ΔͷͰ͓ࢼ͍ͩ͘͠͞ • CodeGrid - ͜Ε͔ΒͷάϦουϨΠΞ΢τ શ6ճ

Slide 81

Slide 81 text

Question?