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
130
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
Scrollytelling the 53 Stations of Tōkaidō: An Interactive Journey Through Japan’s Historic Route / FOSS4G ASIA 2024
sorami
1
44
Rust for Geospatial Data Processing: A Case Study with CityGML Converter for PLATEAU, Japan's Open Digital Twin Models / FOSS4G ASIA 2024
sorami
1
78
可視化がやりたくてMIERUNEに転職した話 〜“思考のための道具”とコンピューターによる新たな表現〜 / MIERUNE JCT - Tokyo 2024
sorami
4
1.3k
Scrollytelling the 53 Stations of Tōkaidō: An Interactive Journey Through Japan’s Historic Route / BUILD with Mapbox 2024
sorami
1
78
データ可視化をやりたくて北海道におひっこし / TechRAMEN 2024 Conference
sorami
2
910
Svelte採用記 - 位置情報と可視化の会社で、全社の標準技術スタックに選ぶまで / Svelte Japan Online Meetup #3
sorami
3
850
「スクローリーテリング」から考えるジューシーなメディア / Data Visualization Japan Meetup 2023
sorami
3
930
AIST 3DDB Client: an open-source web application for the 3D database / FOSS4G ASIA 2023
sorami
1
570
数々の多様性
sorami
2
660
Other Decks in Technology
See All in Technology
2/18/25: Java meets AI: Build LLM-Powered Apps with LangChain4j
edeandrea
PRO
0
130
データの品質が低いと何が困るのか
kzykmyzw
6
1.1k
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
1.1k
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
750
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
740
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
390
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
1.1k
現場で役立つAPIデザイン
nagix
34
12k
Larkご案内資料
customercloud
PRO
0
650
2.5Dモデルのすべて
yu4u
2
880
抽象化をするということ - 具体と抽象の往復を身につける / Abstraction and concretization
soudai
20
8.2k
速くて安いWebサイトを作る
nishiharatsubasa
12
14k
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
44
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Unsuck your backbone
ammeep
669
57k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Optimizing for Happiness
mojombo
376
70k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
KATA
mclloyd
29
14k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
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 ࢀ ߟ จ ݙ