CSSを積み重ねる - 2024年のMasonry Layout / MIERUNE 朝LT #297

Slide 1

Slide 1 text

ಙౡ େ฾ࡵಕʢ೥݄ࡱӨʣ ΛੵΈॏͶΔ .lightning-talk { by: @sorami, date: 2024-11-14, venue: “MIERUNE” } ೥ͷ $44 .BTPOSZ-BZPVU

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

େ฾ࡵಕ ಙౡʹ͋ΔɺηϧϑϏϧυͷ٤஡ళ ళओɾౡརتଠ͕ɺ೥ࠒ͔ΒࣗྗͰݐங ࣗΒे਺ສ΋ͷ࿃נΛম͖ɺੵΈ্͛ͨͱݴΘΕΔ ͍·ͩະ׬੒Ͱ͋Γɺݱࡏ΋૿վங͕ଓ͚ΒΕ͍ͯΔ ͍ͩ΅ͭ͞ͱ͏͛

Slide 4

Slide 4 text

ಙౡݝѨೆࢢ

Slide 5

Slide 5 text

."40/3:

Slide 6

Slide 6 text

."40/3: ϝʔιϯϦʔ

Slide 7

Slide 7 text

https: // ja.wikipedia.org/wiki/ϑϦʔϝΠιϯ

Slide 8

Slide 8 text

https: // hobea.or.jp/masonry/

Slide 9

Slide 9 text

ϝʔιϯϦʔ૊ੵ଄ ੴ΍ϨϯΨͳͲΛੵΈॏͶͯߏ଄෺Λ࡞Δٕज़ ௕͍ྺ࢙Λ࣋ͪɺ ݹ୅Τδϓτ΍ΪϦγϟ ϩʔϚͰ΋࢖༻͞Ε͖ͯͨ ҰํͰɺ೔ຊͷΑ͏ʹྑ࣭ͳ໦ࡐ͕๛෋ͳ஍ҬͰ͸ɺ பͱྊͰ԰ࠜΛࢧ͑ΔՍߏࣜߏ଄͕Ұൠతͩͬͨ ͖ͦͤͧ͏

Slide 10

Slide 10 text

1IPUPCZ"OESFT4JJNPOPO6OTQMBTI IUUQTVOTQMBTIDPNQIPUPTCSPXOXBMMCSJDLT#-PQ@BU,YH

Slide 11

Slide 11 text

ਫฏʹ͸ ଗ͍ͬͯΔ ֤ϒϩοΫͷ ԣ෯͸ҟͳΔ

Slide 12

Slide 12 text

8FC ʹ͓͚Δ .BTPOSZ

Slide 13

Slide 13 text

https: // www.pinterest.com/search/pins/?q=stone walls&rs=typed

Slide 14

Slide 14 text

https: // unsplash.com/s/photos/masonry

Slide 15

Slide 15 text

https: // iam.beyonce.com/

Slide 16

Slide 16 text

https: // edge.ghost.io/

Slide 17

Slide 17 text

.BTPOSZ-BZPVU ҟͳΔαΠζͷίϯςϯπΛɺܺؒͳ͘άϦουঢ়ʹฒ΂Δ ɾ࣠ʢओʹΧϥϜʣ͸ଗ͑Δ ɾ΋͏࣠͸ɺαΠζʹ߹Θͤͯ٧ΊΔ ੔વͱͭͭ͠΋ɺμ ΠφϛοΫʹײ͡ΒΕΔ

Slide 18

Slide 18 text

https: // edge.ghost.io/ ॎ࣠ΧϥϜ͸ ଗ͍ͬͯΔ

Slide 19

Slide 19 text

.BTPOSZ-BZPVU ίϯςϯπͷΞεϖΫτൺΛม͑ͨΓɺ੾Γൈ͍ͨΓ͠ͳ͍ ࠷Լ෦͸ΪβΪβͱෆଗ͍ʹͳΔ 5BCબ୒ͷॱ൪͕ɺͪΐͬͱෆࢥٞͳײ͡ʹͳΔ l8BUFSGBMM-BZPVUzͱݺ͹ΕΔ͜ͱ΋͋Δͦ͏ʢಛʹΞδΞݍʣ

Slide 20

Slide 20 text

Ͳ͏΍ͬͯʁ

Slide 21

Slide 21 text

+BWB4DSJQUՐ෇͚໾EFTBOESPNBTPOSZ͸೥d https: // masonry.desandro.com/ https: // muuri.dev/ https: // packery.metafizzy.co/ FUD

Slide 22

Slide 22 text

https: // www.npmjs.com/search?ranking=popularity&q=masonry +BWB4DSJQUOQNʹ͸Ҏ্ͷύοέʔδ

Slide 23

Slide 23 text

$44Ͱ͕Μ͹Δ$44ΧϥϜ΍ 'MFYCPY (SJEͳͲΛۦ࢖ https: // css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/

Slide 24

Slide 24 text

$44ʹΑΔ ωΠςΟϒαϙʔτ ΁޲͚ͯ ͦͯ͠

Slide 25

Slide 25 text

લ࢙ ‣ ೥.P[JMMB͕ఏҊ 'JSFGPY/JHIUMZͰ࣮૷ ʢ$44(SJEͷ֦ுʣ ‣ ೥"QQMFʢ8FC,JUʣ͕ $44(SJE-FWFMϓϩϙʔβϧΛ 4BGBSJ5FDIOPMPHZ1SFWJFX΁࣮૷։࢝ ‣ ͔͠͠ɺٞ࿦ͯ͠߹ҙΛಘ͍ͯ͘͜ͱ͕ ·ͩ·ͩ୔ࢁ͋Δ

Slide 26

Slide 26 text

೥݄8FC,JUνʔϜ͔ΒͷఏҊͱσϞ https: // webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/ ੈͷ։ൃऀ΁ ʮͲ͏ࢥ͏ʁʯͱ ϑΟʔυόοΫΛ ٻΊ͍ͯΔ

Slide 27

Slide 27 text

8FC,JUνʔϜʹΑΔσϞ4BGBSJ5FDI1SFWJFX͔'JSFGPYͰӾཡ https: // webkit.org/demos/grid3/

Slide 28

Slide 28 text

ΧϥϜ෯Λ ަޓʹม͑Δ

Slide 29

Slide 29 text

ݸ͝ͱʹ ෯Λେ͖͘ εΩϚ

Slide 30

Slide 30 text

ॎͰ͸ͳ͘ ԣʢߦʣ

Slide 31

Slide 31 text

ϑΟϘφον ਺ྻʂ

Slide 32

Slide 32 text

ӈʹϝχϡʔ ͕͋Δ TVCHSJEͰ ӈدͤ

Slide 33

Slide 33 text

ӈʹϝχϡʔ ͕͋Δ TVCHSJEͰ ӈدͤ https: // webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/#using-subgrid-and-explicit-placement

Slide 34

Slide 34 text

ը૾͚ͩ͡Όͳ͍ ৽ฉͷྫ

Slide 35

Slide 35 text

ը૾͚ͩ͡Όͳ͍ ϝχϡʔͷྫ

Slide 36

Slide 36 text

https: // www.youtube.com/watch?v=3h6BCTgQ4yw 8FC,JUϝϯόʔ͕ ݱঢ়΍՝୊Λ޿͘ղઆɻ ෼͔Γ΍͘͢໘ന͍ Φεεϝʂ

Slide 37

Slide 37 text

ೋͭͷҊ͕͋Δ(SJEʹؚΊΔ͔൱͔ display: grid; grid-template-rows: masonry; ⁞ display: masonry;  

Slide 38

Slide 38 text

⁞(SJE΁౷߹ 🥳 🥺  ಠࣗͷ.BTPOSZ ‣ Ұ؏ੑอ࣋ ৑௕ੑഉআ ‣ (SJEͷॊೈ͞ʹΑΔৄࡉ੍ޚ ‣ 1SPHSFTTJWFFOIBODFNFOU ʢະରԠͰ΋lEJTQMBZHSJEzࣗମ͸ಈ࡞ʣ ‣ ෳࡶ͞(SJEʹશ෦ೖΓͰɺ ֶश΍ઃఆͷ೉қ౓Ξοϓ ‣ ʢ౰ॳࢦఠ͞ΕͨύϑΥʔϚϯεͷ ໰୊͸ղܾ͞Εͨʣ ‣ γϯϓϧֶश΍ઃఆ͕༰қ ‣ (SJEͱ͸ผͳͨΊɺ ద੾ͳॳظ஋ΛઃఆՄೳ ‣ (SJEͱ.BTPOSZͰେྔͷॏෳ ‣ ࡉ੍͔͍ޚ͕ࠔ೉ FUD ৄࡉ͸ؔ࿈ࢿྉΛࢀߟͷ͜ͱ

Slide 39

Slide 39 text

https: // webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/ https: // developer.chrome.com/blog/masonry 8FC,JU͸⁞Λࢧ࣋ $ISPNF͸ Λࢧ࣋ 2024-04-19 2024-04-30

Slide 40

Slide 40 text

https: // drafts.csswg.org/css-grid-3/#masonry-model ೥݄8$ʹΑΔॳͷ(SJE-FWFMެ։૲Ҋ ˠ྆Ҋͱ΋ʹؚ·Εͨ͜ΕΛݩʹൺֱ͠ɺ࠷ऴܾఆ΁

Slide 41

Slide 41 text

https: // developer.chrome.com/blog/masonry-syntax https: // webkit.org/blog/16026/css-masonry-syntax/ $ISPNFνʔϜ 2024-09-19 2024-10-21 8FC,JUνʔϜ

Slide 42

Slide 42 text

༷ʑͳਓʹΑΔɺ༷ʑͳҙݟ https: // ishadeed.com/article/css-grid-masonry/ https: // rachelandrew.co.uk/archives/ 2024/09/21/masonry-and-good-defaults/ https: // www.oddbird.net/2024/10/01/grid-masonry-nuance/ .JSJBN4V[BOOF 3BDIFM"OESFX$ISPNFνʔϜ "INBE4IBEFFE

Slide 43

Slide 43 text

https: // github.com/w3c/csswg-drafts/issues/11060 ݱࡏ ίϛϡχςΟͱڞʹٞ࿦͕ਐΜͰ͍Δ

Slide 44

Slide 44 text

https: // github.com/w3c/csswg-drafts/issues/11060 ݱࡏ ίϛϡχςΟͱڞʹٞ࿦͕ਐΜͰ͍Δ 5)*4*4 ΦʔϓϯɾίϥϘϨʔγϣϯʂ

Slide 45

Slide 45 text

͸΍͘ߦ͘ͳΒͻͱΓͰ ԕ͘΁ߦ͘ͳΒΈΜͳͰ l z

Slide 46

Slide 46 text

͕ɺ8FCͩʂ ੵΈॏͶ ͜ͷ

Slide 47

Slide 47 text

&OKPZ . BTPOSZ ๺ւಓ Ѵַͷࢁখ԰ʢ೥݄ࡱӨʣ FIN.

Slide 48

Slide 48 text

‣ #ZUFT5PHSJEPSOPUUPHSJE IUUQTCZUFTEFWBSDIJWFT ‣ $44.BTPOSZ$44(SJEc$445SJDLT ͜Ε·ͰͷܦҢ͔Βશମతʹ·ͱΊΒΕ͍ͯͯΑ͔ͬͨʂ IUUQTDTTUSJDLTDPNDTTNBTPOSZDTTHSJE ‣ $44(SJEͱϝΠιϯϦʔϨΠΞ΢τcΤϏείϜ&#*46$0. $44(SJE-FWFMͱͰͷҧ͍ʢલऀ͸ԣํ޲Ͱ΋ଗ͏ ը૾ͷॎԣൺมߋͷՄೳੑʣͳͲ෼͔Γ΍͔ͬͨ͢ʂ IUUQTFCJTVDPNOPUFDTTHSJEBOENBTPOSZMBZPVU ‣ .BTPOSZ-BZPVUͷਐలͱ$44(SJEͱͷؔ܎ʔϥΠϒϥϦͷมભͱࠓޙͷల๬ IUUQT[FOOEFWBMEBHSBN@UFDIBSUJDMFTGEDDGG ‣ $44.BTPOSZϨΠΞ΢τͷࠓ·Ͱͱ͜Ε͔Β4QFBLFS%FDL IUUQTTQFBLFSEFDLDPNUPUPDBMDJPNBTPOSZSFJBVUPOPKJONBEFUPLPSFLBSB ‣ 8IBUXPVMEZPVDBMMUIJTMBZPVU :PV5VCF IUUQTXXXZPVUVCFDPNXBUDI WB[TYUU@U+D ࢀ ߟ จ ݙ