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
190
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
300
How I Got Here - NLP, Geospatial, and beyond / NAIST NLP
sorami
0
78
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
110
データ可視化をやりたくて北海道におひっこし / TechRAMEN 2024 Conference
sorami
2
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
5min GuardDuty Extended Threat Detection EKS
takakuni
0
140
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.2k
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
240
Witchcraft for Memory
pocke
1
310
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
140
ハノーバーメッセ2025座談会.pdf
iotcomjpadmin
0
160
AIのAIによるAIのための出力評価と改善
chocoyama
2
550
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
フィンテック養成勉強会#54
finengine
0
180
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
2
1.1k
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
100
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
160
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
Code Review Best Practice
trishagee
68
18k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Embracing the Ebb and Flow
colly
86
4.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Scaling GitHub
holman
459
140k
Navigating Team Friction
lara
187
15k
Designing for Performance
lara
609
69k
Building an army of robots
kneath
306
45k
BBQ
matthewcrist
89
9.7k
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 ࢀ ߟ จ ݙ