CSS Masonry レイアウトの 今までとこれから

- サンプルコード
- https://codepen.io/totocalcio/pen/rNgByMV
- https://codepen.io/totocalcio/pen/VwOZVQe
- https://codepen.io/totocalcio/pen/WNBeLjP
- GitHub issues
- https://github.com/w3c/csswg-drafts/issues/9041
- https://github.com/w3c/csswg-drafts/issues/9733
- 参考
- メイソンリーレイアウト / MDN
- https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Masonry_layout
- Help us invent CSS Grid Level 3, aka “Masonry” layout / Webkit
- https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/
- An alternative proposal for CSS masonry / Chrome for Developers
- https://developer.chrome.com/blog/masonry
- CSS Grid Layout Module Level 3 / W3C
- https://drafts.csswg.org/css-grid-3/
- Native CSS Masonry Layout In CSS Grid / Smashing Magazine
- https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/

Transcript

1. Masonry レイアウトの 今までとこれから
2. 自己紹介 - 名前 - 亀ノ上　孝雄 - アカウント - ととかるちょ / totocalcio - 会社 - 株式会社ラクス - ペット - うさぎ、フトアゴヒゲトカゲ、ヒョウモンリクガメ - 一言 - 初めての外部登壇
3. Masonry レイアウトとは
4. Masonry - 読み方 - メイソンリー - 意味 - 石畳・石積・煉瓦 - CSSの世界のMasonry - レイアウトを指す - デザインはgridレイアウトに近い - 高さの違うカードが敷き詰められたようなレイアウト
5. Masonry レイアウト採用例
6. Pinterest
7. Tumblr
8. Civitai
9. blog
10. Masonryレイアウト：今まで
11. flex サンプルコード https://codepen.io/toto calcio/pen/rNgByMV
12. column-count サンプルコード https://codepen.io/toto calcio/pen/VwOZVQe
13. grid サンプルコード https://codepen.io/toto calcio/pen/WNBeLjP
14. grid -
15. Masonryレイアウト：これから
16. CSS Grid - CSS Grid Layout Module Level 3 Editor’s Draftに Masonryレイアウトの記述がある。 - Grid Layout の機能なので、grid-column / row プロ パティといった機能や、 span の指定もできる。 - masonry-auto-flowプロパティでアイテムの流れを 制御できる。
17. span
18. masonry-auto-flow
19. Webkit - CSS Gridの機能にするか、それとも代替案を考える か。 - 議論に参加して意見を聞かせてほしい。 - AppleはCSS Gridの一部にすべきと考えている。 - CSS Gridにすべきじゃないという声もあがっている - もしgridにメイソンリーいれたら今よりも gridが複雑になって しまう。 - そもそもメイソンリーという名称もわかりにくいかもし れない。 - ウォーターフォールとかでもいいかも 4/19
20. Chrome - CSS Gridの一部として実装するのは間違いだと考 える - メイソンリーの課題を解消したい。 - display:masonry（もしくは別のキーワード） - パフォーマンスの問題 - Grid：レイアウト処理前にアイテム配置 - メイソンリー：動的に変化 →事前レイアウト - subgridもあわさったら更に大変 - Gridの機能使える⇔メイソンリーでは使えない 4/30
21. まとめ - メイソンリー絶賛議論中！ - https://github.com/w3c/csswg-drafts/issues/9041 - https://github.com/w3c/csswg-drafts/issues/9733 - CSS Gridの一部になるか - display:masonryとなるか - masonryという名前は最適なのか - 果たして実装される日は訪れるのか
22. 参考 - メイソンリーレイアウト / MDN - https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout /Masonry_layout - Help us invent CSS Grid Level 3, aka “Masonry” layout / Webkit - https://webkit.org/blog/15269/help-us-invent-masonry-layouts-f or-css-grid-level-3/ - An alternative proposal for CSS masonry / Chrome for Developers - https://developer.chrome.com/blog/masonry - CSS Grid Layout Module Level 3 / W3C - https://drafts.csswg.org/css-grid-3/ - Native CSS Masonry Layout In CSS Grid / Smashing Magazine - https://www.smashingmagazine.com/native-css-masonry-layout- css-grid/
23. 仕舞