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

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

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

ಙౡݝѨೆࢢ

."40/3:

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

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

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

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

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

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

8FC ʹ͓͚Δ .BTPOSZ

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

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

https: // iam.beyonce.com/

https: // edge.ghost.io/

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

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

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

Ͳ͏΍ͬͯʁ

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

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

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

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

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

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

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

ΧϥϜ෯Λ ަޓʹม͑Δ

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

ॎͰ͸ͳ͘ ԣʢߦʣ

ϑΟϘφον ਺ྻʂ

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

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

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

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

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

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

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

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

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

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

༷ʑͳਓʹΑΔɺ༷ʑͳҙݟ 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

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

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

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

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

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

‣ #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 ࢀ ߟ จ ݙ

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

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

More Decks by Sorami Shiromizu

Other Decks in Technology

Featured

Transcript