CSS Grid・Flexboxの 最近の進化とミライ

DIST.38 「CSSな夜」で発表した内容です。
https://dist.connpass.com/event/266728/

Twitter
https://twitter.com/tonkotsuboy_com

Transcript

1. $44
   (SJEɾ'MFYCPYͷ
   ࠷ۙͷਐԽͱϛϥΠ ϚωʔϑΥϫʔυ
   ࣛ໺
   ૖ ૉࡐ࡞੒ڠྗɿদԼ
   ֆས
2. ࣛ໺
   ૖
   !UPOLPUTVCPZ@DPN
   ϚωʔϑΥϫʔυϏδωεΧϯύχʔ 
 ܦཧࡒ຿ϓϩμΫτຊ෦ϓϩμΫτ։ൃ෦෭෦௕
3. ࣥච͠·ͨ͠
4. দԼֆས ຊ೔ͷૉࡐ࡞੒ڠྗ matsu_eri
5. $44
   (SJEͱ͸
   ʮߦྻʯΛ࢖ͬͨϨΠΞ΢τͷ͜ͱ
8. ΤϦΞ໊Λࢦఆͯ͠഑ஔ .container { display: grid; grid-template: "main-visual logo" 70% "main-visual title" 30% / 50% 50%; } ߦྻͷߦྻΛͭ͘ΓɺͦΕͧΕ໊લΛαΠζΛઃఆ͢Δͱ͍͏ࢦఆ
9. ΤϦΞ໊Λࢦఆͯ͠഑ஔ .container { display: grid; grid-template: "main-visual logo" 70% "main-visual title" 30% / 50% 50%; } .main-visual { grid-area: main-visual; } .logo { grid-area: logo; } .title { grid-area: title; }
10. ߦྻΛ܁Γฦͨ͠Γɺ伱ؒΛͭ͘Δ .container { display: grid; grid-template: repeat(3, 100px) / repeat(3, 100px); gap: 24px; } ߦྻͷQYͷαΠζͷࢦఆɺ
    ߦྻؒͷ伱ؒΛQYʹ͢Δࢦఆ
11. ߦྻΛ܁Γฦͨ͠Γɺ伱ؒΛͭ͘Δ .container { display: grid; grid-template: repeat(3, 100px) / repeat(3, 100px); gap: 24px; }
12. ߦɾྻ਺ͷࣗಈมߋ .container { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } QYҎ্GSҎԼͰɺͰ͖Δ͚ͩଟ͘ͷྻΛ࡞͍ͬͯͩ͘͞ͱ͍͏ࢦఆ
13. ߦɾྻ਺ͷࣗಈมߋ .container { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } QYҎ্GSҎԼͰɺͰ͖Δ͚ͩଟ͘ͷྻΛ࡞͍ͬͯͩ͘͞ͱ͍͏ࢦఆ
14. ෑ͖٧Ί .container { grid-auto-flow: dense; } 伱͕ؒ͋ͬͨΒͰ͖Δ͚ͩෑ͖٧Ί͍ͯͩ͘͞ͱ͍͏ࢦఆ
15. ߦɾྻ਺ͷࣗಈมߋɺෑ͖٧Ί .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: 200px; grid-auto-flow: dense; } .item.featured { grid-column: span 2; grid-row: span 2; }
16. ࠷ۙ࢖͑ΔΑ͏ʹͳͬͨ৽ػೳ
    w࠷୹ߦͰ্Լࠨӈἧ͑
    w'MFYCPYͷHBQ
    w$44
    (SJEͰΞχϝʔγϣϯ
17. ߦͰ্Լࠨӈதἧ͕͑
    Ͱ͖ΔΑ͏ʹͳͬͨ 01
18. ࢖͏ػձͷଟ্͍Լࠨӈதԝἧ͑
19. ੲͷ΍Γ͔ͨʢ4ʙ7ߦʣ .container { position: relative; } .container .box { position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; }
20. FlexboxͰ΋3ߦ .container { display: flex; justify-content: center; align-items: center; }
21. CSS GridΛ࢖͑͹2ߦ .container { display: grid; place-content: center; }
22. Demo
23. place-content: center; (SJEࣗମͷ഑ஔΛ্Լࠨӈதԝἧ͑ʹ͢Δ
24. place-items: center; (SJEͷηϧ಺ͷΞΠςϜͷ഑ஔΛ্Լࠨӈதԝἧ͑ʹ͢Δ
25. place-content͸2020೥1݄͔Βશϒϥ΢βରԠ IUUQTDBOJVTFDPNNEODTT@QSPQFSUJFT@QMBDFDPOUFOU ೥݄
    &EHF
    
    ˞
    $ISPNJVN
    &EHF
26. 'MFYCPYͰHBQ͕࢖͑ΔΑ͏ʹͳͬͨ 02
27. ԣฒͼϦϯΫͷ伱ؒΛࢦఆ͍ͨ͠
28. ԣฒͼϦϯΫͷ伱ؒΛࢦఆ͍ͨ͠
29. ੲɿཁૉؒʹmarginΛࢦఆ͍ͯͨ͠ .container { display: flex; } .container > a { margin-left: 20px; margin-right: 20px; } .container > a:first-of-type { margin-left: 0; } .container > a:last-of-type { margin-right: 0; }
30. ݱ୅͸FlexboxͰ΋gap͕࢖͑Δ .container { display: flex; gap: 40px; }
31. Demo
32. 2021೥4݄͔Βશϒϥ΢βରԠ IUUQTDBOJVTFDPN fl FYCPYHBQ ೥݄
    4BGBSJ
    
33. ߦɾྻͷΞχϝʔγϣϯ͕
    Ͱ͖ΔΑ͏ʹͳͬͨ 03
34. φϏήʔγϣϯΛΞχϝʔγϣϯͤ͞Δ
35. CSS GridʹΞχϝʔγϣϯΛࢦఆ͢Δ .container { display: grid; transition: 300ms all; grid-template-columns: 40px 1fr; } .container.open { grid-template-columns: 200px 1fr; }
36. CSS GridʹΞχϝʔγϣϯΛࢦఆ͢Δ .container { display: grid; transition: 300ms all; grid-template-columns: 40px 1fr; } .container.open { grid-template-columns: 200px 1fr; }
37. Demo
38. Ξχϝʔγϣϯ͸2022೥10݄͔Βશϒϥ΢βରԠ IUUQTDBOJVTFDPNNEODTT@QSPQFSUJFT@HSJEUFNQMBUFDPMVNOT@BOJNBUJPO ೥݄
    $ISPNF
    
39. ࠓޙ࢖͑ΔΑ͏ʹͳΔ৽ػೳ
    wߦྻͷೖΕࢠ
    wੵΈ໦ϨΠΞ΢τ
40. ߦྻͷೖΕࢠ͕ՄೳʹͳΔ 04
41. ֤ߦͰཁૉ͝ͱͷߴ͞Λἧ͍͑ͨ
42. ֤ߦͰཁૉ͝ͱͷߴ͞Λἧ͍͑ͨ
43. $44
    (SJEΛೖΕࢠʹͯ͠ղܾ͢Δ
44. 8ߦ×3ྻͷʮ਌ʯߦྻΛ࡞Δ           
45. ʮࢠʯߦྻΛ࡞Γɺ਌ͷ4ߦ෼Λ࢖༻͢Δ               
46. $44Ͱදݱ͢Δͱʜ /* 親⾏列 */ .container { display: grid; } /* ⼦⾏列 */ .container .item { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
47. $44Ͱදݱ͢Δͱʜ /* 親⾏列 */ .container { display: grid; } /* ⼦⾏列 */ .container .item { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
48. Demo
49. subgrid͸SafariɾFirefoxͰରԠࡁΈ IUUQTDBOJVTFDPNDTTTVCHSJE
50. $ISPNFɾ&EHF͸ݱࡏ։ൃத IUUQTCVHTDISPNJVNPSHQDISPNJVNJTTVFTEFUBJM JE
51. ੵΈ໦ϨΠΞ΢τ 05
52. pinterestΈ͍ͨͳϨΠΞ΢τΛ࡞Γ͍ͨ
53. ݱঢ়ͷCSSͰ΋ٕज़తʹ͸Մೳ .container { /* カラム数成り⾏き、基本的に300pxの横幅 */ columns: auto 300px; /* 列間の隙間 */ column-gap: 24px; } .item { /* ⾏間の隙間 */ margin-bottom: 24px; } ը૾Λԣํ޲ʹฒ΂ΒΕͳ͍ɺ伱ؒΛ਌ͱࢠʹࢦఆ͢ΔͳͲ੍໿͕ଟ͍
54. কདྷతʹ͸ɺNBTPOSZΛ࢖͏ .container { grid-template-rows: masonry; grid-template-columns: repeat(auto-fill, 24px); gap: 40px; } ௐ੔த ॎํ޲ʹ΋ԣํ޲ʹ΋ฒ΂ΒΕΔɻ伱ؒࢦఆ͸HBQͰՄೳ
55. কདྷతʹ͸ɺNBTPOSZΛ࢖͏ .container { grid-template-rows: masonry; grid-template-columns: repeat(auto-fill, 24px); gap: 40px; } ௐ੔த ॎํ޲ʹ΋ԣํ޲ʹ΋ฒ΂ΒΕΔɻ伱ؒࢦఆ͸HBQͰՄೳ
56. Demo
57. Firefoxͷϑϥά෇͖ͷΈͰରԠ IUUQTDBOJVTFDPNNEODTT@QSPQFSUJFT@HSJEUFNQMBUFSPXT@NBTPOSZ
58. FirefoxͷϑϥάΛ༗ޮԽ͢Δํ๏ BCPVUDPO fi H
    ʹΞΫηε   
59. ·ͱΊ
60. ࠷ۙ࢖͑ΔΑ͏ʹͳͬͨ΋ͷ
    w ࠷୹ߦͰ্Լࠨӈἧ͑
    w 'MFYCPYͷHBQ
    w $44
    (SJEͰΞχϝʔγϣϯ
    ࠓޙ࢖͑ΔΑ͏ʹͳΔ΋ͷ
    w ߦྻͷೖΕࢠ
    w ੵΈ໦ϨΠΞ΢τ
61. $44
    (SJE΍'MFYCPYΛ࢖Θͳ͍Ҋ݅͸ͳ͍ɻ
    ৽͍͠৘ใΛΩϟονΞοϓ͠ɺ
    ϥΫʹָ͘͠։ൃ͠Α͏
62. Thank y ! @tonkotsuboy_com @matsu_eri 5XJUUFSͰ͸࠷৽ϑϩϯτΤϯυٕज़Λൃ৴͍ͯ͠·͢