CSS Grid・Flexboxの最近の進化とミライ

Slide 1

Slide 1 text

$44(SJEɾ'MFYCPYͷ ࠷ۙͷਐԽͱϛϥΠ ϚωʔϑΥϫʔυࣛ໺૖ ૉࡐ࡞੒ڠྗɿদԼֆས

Slide 2

Slide 2 text

ࣛ໺૖!UPOLPUTVCPZ@DPN ϚωʔϑΥϫʔυϏδωεΧϯύχʔ   ܦཧࡒ຿ϓϩμΫτຊ෦ϓϩμΫτ։ൃ෦෭෦௕

Slide 3

Slide 3 text

ࣥච͠·ͨ͠

Slide 4

Slide 4 text

দԼֆས ຊ೔ͷૉࡐ࡞੒ڠྗ matsu_eri

Slide 5

Slide 5 text

$44(SJEͱ͸ ʮߦྻʯΛ࢖ͬͨϨΠΞ΢τͷ͜ͱ

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

ΤϦΞ໊Λࢦఆͯ͠഑ஔ .container { display: grid; grid-template: "main-visual logo" 70% "main-visual title" 30% / 50% 50%; } ߦྻͷߦྻΛͭ͘ΓɺͦΕͧΕ໊લΛαΠζΛઃఆ͢Δͱ͍͏ࢦఆ

Slide 9

Slide 9 text

ΤϦΞ໊Λࢦఆͯ͠഑ஔ .container { display: grid; grid-template: "main-visual logo" 70% "main-visual title" 30% / 50% 50%; } .main-visual { grid-area: main-visual; } .logo { grid-area: logo; } .title { grid-area: title; }

Slide 10

Slide 10 text

ߦྻΛ܁Γฦͨ͠Γɺ伱ؒΛͭ͘Δ .container { display: grid; grid-template: repeat(3, 100px) / repeat(3, 100px); gap: 24px; } ߦྻͷQYͷαΠζͷࢦఆɺ ߦྻؒͷ伱ؒΛQYʹ͢Δࢦఆ

Slide 11

Slide 11 text

ߦྻΛ܁Γฦͨ͠Γɺ伱ؒΛͭ͘Δ .container { display: grid; grid-template: repeat(3, 100px) / repeat(3, 100px); gap: 24px; }

Slide 12

Slide 12 text

ߦɾྻ਺ͷࣗಈมߋ .container { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } QYҎ্GSҎԼͰɺͰ͖Δ͚ͩଟ͘ͷྻΛ࡞͍ͬͯͩ͘͞ͱ͍͏ࢦఆ

Slide 13

Slide 13 text

ߦɾྻ਺ͷࣗಈมߋ .container { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } QYҎ্GSҎԼͰɺͰ͖Δ͚ͩଟ͘ͷྻΛ࡞͍ͬͯͩ͘͞ͱ͍͏ࢦఆ

Slide 14

Slide 14 text

ෑ͖٧Ί .container { grid-auto-flow: dense; } 伱͕ؒ͋ͬͨΒͰ͖Δ͚ͩෑ͖٧Ί͍ͯͩ͘͞ͱ͍͏ࢦఆ

Slide 15

Slide 15 text

ߦɾྻ਺ͷࣗಈมߋɺෑ͖٧Ί .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: 200px; grid-auto-flow: dense; } .item.featured { grid-column: span 2; grid-row: span 2; }

Slide 16

Slide 16 text

࠷ۙ࢖͑ΔΑ͏ʹͳͬͨ৽ػೳ w࠷୹ߦͰ্Լࠨӈἧ͑ w'MFYCPYͷHBQ w$44(SJEͰΞχϝʔγϣϯ

Slide 17

Slide 17 text

ߦͰ্Լࠨӈதἧ͕͑ Ͱ͖ΔΑ͏ʹͳͬͨ 01

Slide 18

Slide 18 text

࢖͏ػձͷଟ্͍Լࠨӈதԝἧ͑

Slide 19

Slide 19 text

ੲͷ΍Γ͔ͨʢ4ʙ7ߦʣ .container { position: relative; } .container .box { position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; }

Slide 20

Slide 20 text

FlexboxͰ΋3ߦ .container { display: flex; justify-content: center; align-items: center; }

Slide 21

Slide 21 text

CSS GridΛ࢖͑͹2ߦ .container { display: grid; place-content: center; }

Slide 22

Slide 22 text

Demo

Slide 23

Slide 23 text

place-content: center; (SJEࣗମͷ഑ஔΛ্Լࠨӈதԝἧ͑ʹ͢Δ

Slide 24

Slide 24 text

place-items: center; (SJEͷηϧ಺ͷΞΠςϜͷ഑ஔΛ্Լࠨӈதԝἧ͑ʹ͢Δ

Slide 25

Slide 25 text

place-content͸2020೥1݄͔Βશϒϥ΢βରԠ IUUQTDBOJVTFDPNNEODTT@QSPQFSUJFT@QMBDFDPOUFOU ೥݄ &EHF ˞$ISPNJVN&EHF

Slide 26

Slide 26 text

'MFYCPYͰHBQ͕࢖͑ΔΑ͏ʹͳͬͨ 02

Slide 27

Slide 27 text

ԣฒͼϦϯΫͷ伱ؒΛࢦఆ͍ͨ͠

Slide 28

Slide 28 text

ԣฒͼϦϯΫͷ伱ؒΛࢦఆ͍ͨ͠

Slide 29

Slide 29 text

ੲɿཁૉؒʹmarginΛࢦఆ͍ͯͨ͠ .container { display: flex; } .container > a { margin-left: 20px; margin-right: 20px; } .container > a:first-of-type { margin-left: 0; } .container > a:last-of-type { margin-right: 0; }

Slide 30

Slide 30 text

ݱ୅͸FlexboxͰ΋gap͕࢖͑Δ .container { display: flex; gap: 40px; }

Slide 31

Slide 31 text

Demo

Slide 32

Slide 32 text

2021೥4݄͔Βશϒϥ΢βରԠ IUUQTDBOJVTFDPN fl FYCPYHBQ ೥݄ 4BGBSJ

Slide 33

Slide 33 text

ߦɾྻͷΞχϝʔγϣϯ͕ Ͱ͖ΔΑ͏ʹͳͬͨ 03

Slide 34

Slide 34 text

φϏήʔγϣϯΛΞχϝʔγϣϯͤ͞Δ

Slide 35

Slide 35 text

CSS GridʹΞχϝʔγϣϯΛࢦఆ͢Δ .container { display: grid; transition: 300ms all; grid-template-columns: 40px 1fr; } .container.open { grid-template-columns: 200px 1fr; }

Slide 36

Slide 36 text

CSS GridʹΞχϝʔγϣϯΛࢦఆ͢Δ .container { display: grid; transition: 300ms all; grid-template-columns: 40px 1fr; } .container.open { grid-template-columns: 200px 1fr; }

Slide 37

Slide 37 text

Demo

Slide 38

Slide 38 text

Ξχϝʔγϣϯ͸2022೥10݄͔Βશϒϥ΢βରԠ IUUQTDBOJVTFDPNNEODTT@QSPQFSUJFT@HSJEUFNQMBUFDPMVNOT@BOJNBUJPO ೥݄ $ISPNF

Slide 39

Slide 39 text

ࠓޙ࢖͑ΔΑ͏ʹͳΔ৽ػೳ wߦྻͷೖΕࢠ wੵΈ໦ϨΠΞ΢τ

Slide 40

Slide 40 text

ߦྻͷೖΕࢠ͕ՄೳʹͳΔ 04

Slide 41

Slide 41 text

֤ߦͰཁૉ͝ͱͷߴ͞Λἧ͍͑ͨ

Slide 42

Slide 42 text

֤ߦͰཁૉ͝ͱͷߴ͞Λἧ͍͑ͨ

Slide 43

Slide 43 text

$44(SJEΛೖΕࢠʹͯ͠ղܾ͢Δ

Slide 44

Slide 44 text

8ߦ×3ྻͷʮ਌ʯߦྻΛ࡞Δ

Slide 45

Slide 45 text

ʮࢠʯߦྻΛ࡞Γɺ਌ͷ4ߦ෼Λ࢖༻͢Δ

Slide 46

Slide 46 text

$44Ͱදݱ͢Δͱʜ /* 親⾏列 */ .container { display: grid; } /* ⼦⾏列 */ .container .item { display: grid; grid-template-rows: subgrid; grid-row: span 4; }

Slide 47

Slide 47 text

$44Ͱදݱ͢Δͱʜ /* 親⾏列 */ .container { display: grid; } /* ⼦⾏列 */ .container .item { display: grid; grid-template-rows: subgrid; grid-row: span 4; }

Slide 48

Slide 48 text

Demo

Slide 49

Slide 49 text

subgrid͸SafariɾFirefoxͰରԠࡁΈ IUUQTDBOJVTFDPNDTTTVCHSJE

Slide 50

Slide 50 text

$ISPNFɾ&EHF͸ݱࡏ։ൃத IUUQTCVHTDISPNJVNPSHQDISPNJVNJTTVFTEFUBJM JE

Slide 51

Slide 51 text

ੵΈ໦ϨΠΞ΢τ 05

Slide 52

Slide 52 text

pinterestΈ͍ͨͳϨΠΞ΢τΛ࡞Γ͍ͨ

Slide 53

Slide 53 text

ݱঢ়ͷCSSͰ΋ٕज़తʹ͸Մೳ .container { /* カラム数成り⾏き、基本的に300pxの横幅 */ columns: auto 300px; /* 列間の隙間 */ column-gap: 24px; } .item { /* ⾏間の隙間 */ margin-bottom: 24px; } ը૾Λԣํ޲ʹฒ΂ΒΕͳ͍ɺ伱ؒΛ਌ͱࢠʹࢦఆ͢ΔͳͲ੍໿͕ଟ͍

Slide 54

Slide 54 text

কདྷతʹ͸ɺNBTPOSZΛ࢖͏ .container { grid-template-rows: masonry; grid-template-columns: repeat(auto-fill, 24px); gap: 40px; } ௐ੔த ॎํ޲ʹ΋ԣํ޲ʹ΋ฒ΂ΒΕΔɻ伱ؒࢦఆ͸HBQͰՄೳ

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Demo

Slide 57

Slide 57 text

Firefoxͷϑϥά෇͖ͷΈͰରԠ IUUQTDBOJVTFDPNNEODTT@QSPQFSUJFT@HSJEUFNQMBUFSPXT@NBTPOSZ

Slide 58

Slide 58 text

FirefoxͷϑϥάΛ༗ޮԽ͢Δํ๏ BCPVUDPO fi HʹΞΫηε

Slide 59

Slide 59 text

·ͱΊ

Slide 60

Slide 60 text

࠷ۙ࢖͑ΔΑ͏ʹͳͬͨ΋ͷ w ࠷୹ߦͰ্Լࠨӈἧ͑ w 'MFYCPYͷHBQ w $44(SJEͰΞχϝʔγϣϯ ࠓޙ࢖͑ΔΑ͏ʹͳΔ΋ͷ w ߦྻͷೖΕࢠ w ੵΈ໦ϨΠΞ΢τ

Slide 61

Slide 61 text

$44(SJE΍'MFYCPYΛ࢖Θͳ͍Ҋ݅͸ͳ͍ɻ ৽͍͠৘ใΛΩϟονΞοϓ͠ɺ ϥΫʹָ͘͠։ൃ͠Α͏

Slide 62

Slide 62 text

Thank y ! @tonkotsuboy_com @matsu_eri 5XJUUFSͰ͸࠷৽ϑϩϯτΤϯυٕज़Λൃ৴͍ͯ͠·͢