Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSSを積み重ねる - 2024年のMasonry Layout / MIERUNE 朝LT ...
Search
Sorami Hisamoto
November 14, 2024
Technology
3
200
CSSを積み重ねる - 2024年のMasonry Layout / MIERUNE 朝LT #297
MIERUNE Inc.
https://www.mierune.co.jp/
Sorami Hisamoto
November 14, 2024
Tweet
Share
More Decks by Sorami Hisamoto
See All by Sorami Hisamoto
オープンソースとビジネス: 位置情報の世界からみえる流れ / 札幌IT石狩鍋#2
sorami
0
320
How I Got Here - NLP, Geospatial, and beyond / NAIST NLP
sorami
0
86
Scrollytelling the 53 Stations of Tōkaidō: An Interactive Journey Through Japan’s Historic Route / FOSS4G ASIA 2024
sorami
1
110
Rust for Geospatial Data Processing: A Case Study with CityGML Converter for PLATEAU, Japan's Open Digital Twin Models / FOSS4G ASIA 2024
sorami
1
160
可視化がやりたくてMIERUNEに転職した話 〜“思考のための道具”とコンピューターによる新たな表現〜 / MIERUNE JCT - Tokyo 2024
sorami
4
1.8k
Scrollytelling the 53 Stations of Tōkaidō: An Interactive Journey Through Japan’s Historic Route / BUILD with Mapbox 2024
sorami
1
120
データ可視化をやりたくて北海道におひっこし / TechRAMEN 2024 Conference
sorami
2
1.1k
Svelte採用記 - 位置情報と可視化の会社で、全社の標準技術スタックに選ぶまで / Svelte Japan Online Meetup #3
sorami
3
1.3k
「スクローリーテリング」から考えるジューシーなメディア / Data Visualization Japan Meetup 2023
sorami
3
1.2k
Other Decks in Technology
See All in Technology
大量配信システムにおけるSLOの実践:「見えない」信頼性をSLOで可視化
plaidtech
PRO
0
390
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
160
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
10
5.1k
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
3
1k
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
1.3k
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
0
300
Introduction to Bill One Development Engineer
sansan33
PRO
0
260
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
An introduction to Claude Code SDK
choplin
2
1k
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
fillznoh
0
130
shake-upを科学する
rsakata
7
1k
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
x_ttyszk
0
240
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Scaling GitHub
holman
460
140k
Visualization
eitanlees
146
16k
RailsConf 2023
tenderlove
30
1.1k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Transcript
ಙౡ େࡵಕʢ݄ࡱӨʣ ΛੵΈॏͶΔ .lightning-talk { by: @sorami, date: 2024-11-14, venue:
“MIERUNE” } ͷ $44 .BTPOSZ-BZPVU
None
େࡵಕ ಙౡʹ͋ΔɺηϧϑϏϧυͷ٤ళ ళओɾౡརتଠ͕ɺࠒ͔ΒࣗྗͰݐங ࣗΒेສͷ࿃נΛম͖ɺੵΈ্͛ͨͱݴΘΕΔ ͍·ͩະͰ͋Γɺݱࡏ૿վங͕ଓ͚ΒΕ͍ͯΔ ͍ͩ΅ͭ͞ͱ͏͛
ಙౡݝѨೆࢢ
."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Ր͚EFTBOESPNBTPOSZd 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 ࢀ ߟ จ ݙ