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
90
Scrollytelling the 53 Stations of Tōkaidō: An Interactive Journey Through Japan’s Historic Route / FOSS4G ASIA 2024
sorami
1
120
Rust for Geospatial Data Processing: A Case Study with CityGML Converter for PLATEAU, Japan's Open Digital Twin Models / FOSS4G ASIA 2024
sorami
1
170
可視化がやりたくて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.3k
Other Decks in Technology
See All in Technology
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
460
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
1.1k
20250719_JAWS_kobe
takuyay0ne
1
140
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1.6k
Transformerを用いたアイテム間の 相互影響を考慮したレコメンドリスト生成
recruitengineers
PRO
2
580
Deep Security Conference 2025:生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
mizutani
5
3.6k
“日本一のM&A企業”を支える、少人数SREの効率化戦略 / SRE NEXT 2025
genda
1
300
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
5
1.2k
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
460
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
sms_tech
1
770
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
13k
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
7
7.7k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Designing Experiences People Love
moore
142
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A Modern Web Designer's Workflow
chriscoyier
695
190k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Site-Speed That Sticks
csswizardry
10
710
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
We Have a Design System, Now What?
morganepeng
53
7.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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 ࢀ ߟ จ ݙ