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

MIERUNE Inc.
https://www.mierune.co.jp/

Transcript

1. ಙౡ
   େ฾ࡵಕʢ೥݄ࡱӨʣ ΛੵΈॏͶΔ .lightning-talk { by: @sorami, date: 2024-11-14, venue: “MIERUNE” } ೥ͷ $44 .BTPOSZ
   -BZPVU
3. େ฾ࡵಕ ಙౡʹ͋ΔɺηϧϑϏϧυͷ٤஡ళ
   ళओɾౡརتଠ͕ɺ೥ࠒ͔ΒࣗྗͰݐங
   ࣗΒे਺ສ΋ͷ࿃נΛম͖ɺੵΈ্͛ͨͱݴΘΕΔ
   ͍·ͩະ׬੒Ͱ͋Γɺݱࡏ΋૿վங͕ଓ͚ΒΕ͍ͯΔ ͍ͩ΅ͭ͞ͱ͏͛
4. ಙౡݝѨೆࢢ
5. ."40/3:
6. ."40/3: ϝʔιϯϦʔ
7. https: // ja.wikipedia.org/wiki/ϑϦʔϝΠιϯ
8. https: // hobea.or.jp/masonry/
9. ϝʔιϯϦʔ
   ૊ੵ଄ ੴ΍ϨϯΨͳͲΛੵΈॏͶͯߏ଄෺Λ࡞Δٕज़
   ௕͍ྺ࢙Λ࣋ͪɺ
   ݹ୅Τδϓτ΍ΪϦγϟ
   ϩʔϚͰ΋࢖༻͞Ε͖ͯͨ
   ҰํͰɺ೔ຊͷΑ͏ʹྑ࣭ͳ໦ࡐ͕๛෋ͳ஍ҬͰ͸ɺ
   பͱྊͰ԰ࠜΛࢧ͑ΔՍߏࣜߏ଄͕Ұൠతͩͬͨ ͖ͦͤͧ͏
10. 1IPUP
    CZ
    "OESFT
    4JJNPO
    PO
    6OTQMBTI
    IUUQTVOTQMBTIDPNQIPUPTCSPXOXBMMCSJDLT#-PQ@BU,YH
    
11. ਫฏʹ͸
    ଗ͍ͬͯΔ ֤ϒϩοΫͷ
    ԣ෯͸ҟͳΔ
12. 8FC
    ʹ͓͚Δ
    .BTPOSZ
13. https: // www.pinterest.com/search/pins/?q=stone walls&rs=typed
14. https: // unsplash.com/s/photos/masonry
15. https: // iam.beyonce.com/
16. https: // edge.ghost.io/
17. .BTPOSZ
    -BZPVU ҟͳΔαΠζͷίϯςϯπΛɺܺؒͳ͘άϦουঢ়ʹฒ΂Δ
    ɾ࣠ʢओʹΧϥϜʣ͸
    ଗ͑Δ
    ɾ΋͏࣠͸ɺαΠζʹ߹Θͤͯ
    ٧ΊΔ
    ੔વͱͭͭ͠΋ɺμ ΠφϛοΫʹײ͡ΒΕΔ
18. https: // edge.ghost.io/ ॎ࣠ΧϥϜ͸
    ଗ͍ͬͯΔ
19. .BTPOSZ
    -BZPVU ίϯςϯπͷΞεϖΫτൺΛม͑ͨΓɺ੾Γൈ͍ͨΓ͠ͳ͍
    ࠷Լ෦͸ΪβΪβͱෆଗ͍ʹͳΔ
    
    5BCબ୒ͷॱ൪͕ɺͪΐͬͱෆࢥٞͳײ͡ʹͳΔ
    l8BUFSGBMM
    -BZPVUz
    ͱݺ͹ΕΔ͜ͱ΋͋Δͦ͏ʢಛʹΞδΞݍʣ
20. Ͳ͏΍ͬͯʁ
21. +BWB4DSJQU
    Ր෇͚໾
    EFTBOESPNBTPOSZ
    ͸೥d https: // masonry.desandro.com/ https: // muuri.dev/ https: // packery.metafizzy.co/ FUD
22. https: // www.npmjs.com/search?ranking=popularity&q=masonry +BWB4DSJQU
    OQNʹ͸Ҏ্ͷύοέʔδ
23. $44Ͱ͕Μ͹Δ
    $44ΧϥϜ΍
    'MFYCPY
    (SJE
    ͳͲΛۦ࢖ https: // css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/
24. $44ʹΑΔ
    ωΠςΟϒαϙʔτ
    ΁޲͚ͯ ͦͯ͠
    
25. લ࢙ ‣ ೥
    .P[JMMB͕ఏҊ
    'JSFGPY
    /JHIUMZͰ࣮૷
    ʢ$44
    (SJE
    ͷ֦ுʣ
    ‣ ೥
    "QQMFʢ8FC,JUʣ͕
    $44
    (SJE
    -FWFM
    ϓϩϙʔβϧΛ
    4BGBSJ
    5FDIOPMPHZ
    1SFWJFX΁࣮૷։࢝
    ‣ ͔͠͠ɺٞ࿦ͯ͠߹ҙΛಘ͍ͯ͘͜ͱ͕
    ·ͩ·ͩ୔ࢁ͋Δ
26. ೥݄
    8FC,JUνʔϜ͔ΒͷఏҊͱσϞ https: // webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/ ੈͷ։ൃऀ΁
    ʮͲ͏ࢥ͏ʁʯͱ
    ϑΟʔυόοΫΛ
    ٻΊ͍ͯΔ
27. 8FC,JUνʔϜʹΑΔσϞ
    4BGBSJ
    5FDI
    1SFWJFX
    ͔
    'JSFGPY
    ͰӾཡ https: // webkit.org/demos/grid3/
28. ΧϥϜ෯Λ
    ަޓʹม͑Δ
29. ݸ͝ͱʹ
    ෯Λେ͖͘ εΩϚ
30. ॎͰ͸ͳ͘
    ԣʢߦʣ
31. ϑΟϘφον
    ਺ྻʂ
32. ӈʹϝχϡʔ
    ͕͋Δ TVCHSJEͰ
    ӈدͤ
33. ӈʹϝχϡʔ
    ͕͋Δ TVCHSJEͰ
    ӈدͤ https: // webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/#using-subgrid-and-explicit-placement
34. ը૾͚ͩ͡Όͳ͍
    ৽ฉͷྫ
35. ը૾͚ͩ͡Όͳ͍
    ϝχϡʔͷྫ
36. https: // www.youtube.com/watch?v=3h6BCTgQ4yw 8FC,JUϝϯόʔ͕
    ݱঢ়΍՝୊Λ޿͘ղઆɻ
    ෼͔Γ΍͘͢໘ന͍
    Φεεϝʂ
37. ೋͭͷҊ͕͋Δ
    (SJEʹؚΊΔ͔൱͔ display: grid; grid-template-rows: masonry; ⁞ display: masonry;  
38. ⁞
    (SJE΁౷߹ 🥳 🥺  
    ಠࣗͷ.BTPOSZ ‣ Ұ؏ੑอ࣋
    ৑௕ੑഉআ
    ‣ (SJEͷॊೈ͞ʹΑΔৄࡉ੍ޚ
    ‣ 1SPHSFTTJWF
    FOIBODFNFOU
    ʢະରԠͰ΋
    lEJTQMBZ
    HSJEz
    ࣗମ͸ಈ࡞ʣ ‣ ෳࡶ͞
    (SJEʹશ෦ೖΓͰɺ
    ֶश΍ઃఆͷ೉қ౓Ξοϓ
    ‣ ʢ౰ॳࢦఠ͞ΕͨύϑΥʔϚϯεͷ ໰୊͸ղܾ͞Εͨʣ ‣ γϯϓϧ
    ֶश΍ઃఆ͕༰қ
    ‣ (SJEͱ͸ผͳͨΊɺ
    ద੾ͳॳظ஋ΛઃఆՄೳ ‣ (SJEͱ.BTPOSZͰେྔͷॏෳ
    ‣ ࡉ੍͔͍ޚ͕ࠔ೉ FUD
    
    ৄࡉ͸ؔ࿈ࢿྉΛࢀߟͷ͜ͱ
39. 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
40. https: // drafts.csswg.org/css-grid-3/#masonry-model ೥݄
    8$ʹΑΔॳͷ
    (SJE
    -FWFM
    
    ެ։૲Ҋ
    ˠ
    ྆Ҋͱ΋ʹؚ·Εͨ
    
    ͜ΕΛݩʹൺֱ͠ɺ࠷ऴܾఆ΁
41. https: // developer.chrome.com/blog/masonry-syntax https: // webkit.org/blog/16026/css-masonry-syntax/ $ISPNFνʔϜ 2024-09-19 2024-10-21 8FC,JUνʔϜ
42. ༷ʑͳਓʹΑΔɺ༷ʑͳҙݟ
     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/ .JSJBN
    4V[BOOF 3BDIFM
    "OESFX
    $ISPNFνʔϜ "INBE
    4IBEFFE
43. https: // github.com/w3c/csswg-drafts/issues/11060 ݱࡏ
    ίϛϡχςΟͱڞʹٞ࿦͕ਐΜͰ͍Δ
44. https: // github.com/w3c/csswg-drafts/issues/11060 ݱࡏ
    ίϛϡχςΟͱڞʹٞ࿦͕ਐΜͰ͍Δ 5)*4
    *4
    ΦʔϓϯɾίϥϘϨʔγϣϯʂ
45. ͸΍͘ߦ͘ͳΒͻͱΓͰ
    ԕ͘΁ߦ͘ͳΒΈΜͳͰ l z
46. ͕ɺ8FCͩʂ ੵΈॏͶ ͜ͷ
47. &OKPZ
    . BTPOSZ ๺ւಓ
    Ѵַͷࢁখ԰ʢ೥݄ࡱӨʣ FIN.
48. ‣ 
    #ZUFT
    
    
    5P
    HSJE
    PS
    OPU
    UP
    HSJE
    IUUQTCZUFTEFWBSDIJWFT
    ‣ 
    $44
    .BTPOSZ
    
    $44
    (SJE
    c
    $445SJDLT
    ͜Ε·ͰͷܦҢ͔Βશମతʹ·ͱΊΒΕ͍ͯͯΑ͔ͬͨʂ
    IUUQTDTTUSJDLTDPNDTTNBTPOSZDTTHSJE
    ‣ 
    $44
    (SJEͱϝΠιϯϦʔϨΠΞ΢τ
    c
    ΤϏείϜ
    
    &#*46$0.
    $44
    (SJE
    -FWFM
    
    ͱ
    
    Ͱͷҧ͍ʢલऀ͸ԣํ޲Ͱ΋ଗ͏
    ը૾ͷॎԣൺมߋͷՄೳੑʣͳͲ෼͔Γ΍͔ͬͨ͢ʂ
    IUUQTFCJTVDPNOPUFDTTHSJEBOENBTPOSZMBZPVU
    ‣ 
    .BTPOSZ
    -BZPVUͷਐలͱ$44
    (SJEͱͷؔ܎
    ʔ
    ϥΠϒϥϦͷมભͱࠓޙͷల๬
    IUUQT[FOOEFWBMEBHSBN@UFDIBSUJDMFTGEDDGG
    ‣ 
    $44
    .BTPOSZ
    ϨΠΞ΢τͷ
    ࠓ·Ͱͱ͜Ε͔Β
    
    4QFBLFS
    %FDL
    IUUQTTQFBLFSEFDLDPNUPUPDBMDJPNBTPOSZSFJBVUPOPKJONBEFUPLPSFLBSB
    ‣ 
    8IBU
    XPVME
    ZPV
    DBMM
    UIJT
    MBZPVU
    
    :PV5VCF
    IUUQTXXXZPVUVCFDPNXBUDI WB[TYUU@U+D ࢀ ߟ จ ݙ