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
170
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
200
How I Got Here - NLP, Geospatial, and beyond / NAIST NLP
sorami
0
66
Scrollytelling the 53 Stations of Tōkaidō: An Interactive Journey Through Japan’s Historic Route / FOSS4G ASIA 2024
sorami
1
99
Rust for Geospatial Data Processing: A Case Study with CityGML Converter for PLATEAU, Japan's Open Digital Twin Models / FOSS4G ASIA 2024
sorami
1
140
可視化がやりたくてMIERUNEに転職した話 〜“思考のための道具”とコンピューターによる新たな表現〜 / MIERUNE JCT - Tokyo 2024
sorami
4
1.6k
Scrollytelling the 53 Stations of Tōkaidō: An Interactive Journey Through Japan’s Historic Route / BUILD with Mapbox 2024
sorami
1
100
データ可視化をやりたくて北海道におひっこし / TechRAMEN 2024 Conference
sorami
2
1k
Svelte採用記 - 位置情報と可視化の会社で、全社の標準技術スタックに選ぶまで / Svelte Japan Online Meetup #3
sorami
3
1.2k
「スクローリーテリング」から考えるジューシーなメディア / Data Visualization Japan Meetup 2023
sorami
3
1.1k
Other Decks in Technology
See All in Technology
KubeCon EU 2025 Recap - Kubernetes CRD Design for the Long Haul: Tips, Tricks, and Lessons Learned / Kubernetes Meetup Tokyo #70 / k8sjp70-crd-long-haul-recap
everpeace
0
120
他チームへ越境したら、生データ提供ソリューションのクエリ費用95%削減へ繋がった話 / Cross-Team Impact: 95% Off Raw Data Query Costs
yamamotoyuta
0
100
Web Streams APIの基本と実践、TypeScriptでの活用法 / TSKaigi 2025 Web Streams API
tasshi
5
990
Standard Schema: スキーマライブラリの統一企画とは何か
nozomuikuta
1
360
若手中心の内製アジャイル開発で研究開発に挑戦 / 20250517 Nobuhiro Kawamura & Dami Lee & Tomohiko Tanikawa
shift_evolve
1
340
Modular RAG Architectures with Java and Spring AI
thomasvitale
0
240
LLMベースAIの基本 / basics of LLM based AI
kishida
10
2.6k
トップエンジニアが語るDX最前線 / 20250517 Kazutoshi Ono & Ken Yamazaki
shift_evolve
0
350
Contract One Dev Group 紹介資料
sansan33
PRO
0
5.7k
Oracle Cloud Infrastructure:2025年5月度サービス・アップデート
oracle4engineer
PRO
0
170
スキーマと型で拓く Full-Stack TypeScript / TSKaigi 2025
altech
3
2k
MCP で繋ぐ Figma とデザインシステム〜LLM を使った UI 実装のリアル〜
kimuson
0
240
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Navigating Team Friction
lara
185
15k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Embracing the Ebb and Flow
colly
85
4.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
Writing Fast Ruby
sferik
628
61k
Optimising Largest Contentful Paint
csswizardry
37
3.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
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 ࢀ ߟ จ ݙ