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

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

Twitter
https://twitter.com/tonkotsuboy_com

Transcript

1. $44(SJEɾ'MFYCPYͷ
   ࠷ۙͷਐԽͱϛϥΠ
   ϚωʔϑΥϫʔυࣛ໺૖
   ૉࡐ࡞੒ڠྗɿদԼֆས
   

   View Slide

2. ࣛ໺૖!UPOLPUTVCPZ@DPN
   ϚωʔϑΥϫʔυϏδωεΧϯύχʔ
   

   ܦཧࡒ຿ϓϩμΫτຊ෦ϓϩμΫτ։ൃ෦෭෦௕
   

   View Slide

3. ࣥච͠·ͨ͠
   

   View Slide

4. দԼֆས
   ຊ೔ͷૉࡐ࡞੒ڠྗ
   matsu_eri
   

   View Slide

5. $44(SJEͱ͸
   ʮߦྻʯΛ࢖ͬͨϨΠΞ΢τͷ͜ͱ
   

   View Slide

6. View Slide

7. View Slide

8. ΤϦΞ໊Λࢦఆͯ͠഑ஔ
   .container {
   
   
   display: grid;
   
   
   grid-template:
   
   
   "main-visual logo" 70%
   
   
   "main-visual title" 30% /
   
   
   50% 50%;
   
   
   }
   ߦྻͷߦྻΛͭ͘ΓɺͦΕͧΕ໊લΛαΠζΛઃఆ͢Δͱ͍͏ࢦఆ
   

   View Slide

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;
   
   
   }
   

   View Slide

10. ߦྻΛ܁Γฦͨ͠Γɺ伱ؒΛͭ͘Δ
    .container {
    
    
    display: grid;
    
    
    grid-template:
    
    
    repeat(3, 100px) /
    
    
    repeat(3, 100px);
    
    
    gap: 24px;
    
    
    }
    ߦྻͷQYͷαΠζͷࢦఆɺ
    ߦྻؒͷ伱ؒΛQYʹ͢Δࢦఆ
    

    View Slide

11. ߦྻΛ܁Γฦͨ͠Γɺ伱ؒΛͭ͘Δ
    .container {
    
    
    display: grid;
    
    
    grid-template:
    
    
    repeat(3, 100px) /
    
    
    repeat(3, 100px);
    
    
    gap: 24px;
    
    
    }
    

    View Slide

12. ߦɾྻ਺ͷࣗಈมߋ
    .container {
    
    
    grid-template-columns:
    
    
    repeat(auto-fill, minmax(300px, 1fr));
    
    
    }
    QYҎ্GSҎԼͰɺͰ͖Δ͚ͩଟ͘ͷྻΛ࡞͍ͬͯͩ͘͞ͱ͍͏ࢦఆ
    

    View Slide

13. ߦɾྻ਺ͷࣗಈมߋ
    .container {
    
    
    grid-template-columns:
    
    
    repeat(auto-fill, minmax(300px, 1fr));
    
    
    }
    QYҎ্GSҎԼͰɺͰ͖Δ͚ͩଟ͘ͷྻΛ࡞͍ͬͯͩ͘͞ͱ͍͏ࢦఆ
    

    View Slide

14. ෑ͖٧Ί
    .container {
    
    
    grid-auto-flow: dense;
    
    
    }
    伱͕ؒ͋ͬͨΒͰ͖Δ͚ͩෑ͖٧Ί͍ͯͩ͘͞ͱ͍͏ࢦఆ
    

    View Slide

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;
    
    
    }
    

    View Slide

16. ࠷ۙ࢖͑ΔΑ͏ʹͳͬͨ৽ػೳ
    w࠷୹ߦͰ্Լࠨӈἧ͑
    w'MFYCPYͷHBQ
    w$44(SJEͰΞχϝʔγϣϯ
    

    View Slide

17. ߦͰ্Լࠨӈதἧ͕͑
    Ͱ͖ΔΑ͏ʹͳͬͨ
    01
    

    View Slide

18. ࢖͏ػձͷଟ্͍Լࠨӈதԝἧ͑
    

    View Slide

19. ੲͷ΍Γ͔ͨʢ4ʙ7ߦʣ
    .container {
    
    
    position: relative;
    
    
    }
    
    
    .container .box {
    
    
    position: absolute;
    
    
    top: 50%;
    
    
    left: 50%;
    
    
    margin-top: -100px;
    
    
    margin-left: -100px;
    
    
    }
    

    View Slide

20. FlexboxͰ΋3ߦ
    .container {
    
    
    display: flex;
    
    
    justify-content: center;
    
    
    align-items: center;
    
    
    }
    

    View Slide

21. CSS GridΛ࢖͑͹2ߦ
    .container {
    
    
    display: grid;
    
    
    place-content: center;
    
    
    }
    

    View Slide

22. Demo
    

    View Slide

23. place-content: center;
    (SJEࣗମͷ഑ஔΛ্Լࠨӈதԝἧ͑ʹ͢Δ
    

    View Slide

24. place-items: center;
    (SJEͷηϧ಺ͷΞΠςϜͷ഑ஔΛ্Լࠨӈதԝἧ͑ʹ͢Δ
    

    View Slide

25. place-content͸2020೥1݄͔Βશϒϥ΢βରԠ
    IUUQTDBOJVTFDPNNEODTT@QSPQFSUJFT@QMBDFDPOUFOU
    ೥݄
    &EHF
    ˞$ISPNJVN&EHF
    

    View Slide

26. 'MFYCPYͰHBQ͕࢖͑ΔΑ͏ʹͳͬͨ
    02
    

    View Slide

27. ԣฒͼϦϯΫͷ伱ؒΛࢦఆ͍ͨ͠
    

    View Slide

28. ԣฒͼϦϯΫͷ伱ؒΛࢦఆ͍ͨ͠
    

    View Slide

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;
    
    
    }
    

    View Slide

30. ݱ୅͸FlexboxͰ΋gap͕࢖͑Δ
    .container {
    
    
    display: flex;
    
    
    gap: 40px;
    
    
    }
    

    View Slide

31. Demo
    

    View Slide

32. 2021೥4݄͔Βશϒϥ΢βରԠ
    IUUQTDBOJVTFDPN
    fl
    FYCPYHBQ
    ೥݄
    4BGBSJ
    

    View Slide

33. ߦɾྻͷΞχϝʔγϣϯ͕
    Ͱ͖ΔΑ͏ʹͳͬͨ
    03
    

    View Slide

34. φϏήʔγϣϯΛΞχϝʔγϣϯͤ͞Δ
    

    View Slide

35. CSS GridʹΞχϝʔγϣϯΛࢦఆ͢Δ
    .container {
    
    
    display: grid;
    
    
    transition: 300ms all;
    
    
    grid-template-columns: 40px 1fr;
    
    
    }
    
    
    .container.open {
    
    
    grid-template-columns: 200px 1fr;
    
    
    }
    

    View Slide

36. CSS GridʹΞχϝʔγϣϯΛࢦఆ͢Δ
    .container {
    
    
    display: grid;
    
    
    transition: 300ms all;
    
    
    grid-template-columns: 40px 1fr;
    
    
    }
    
    
    .container.open {
    
    
    grid-template-columns: 200px 1fr;
    
    
    }
    

    View Slide

37. Demo
    

    View Slide

38. Ξχϝʔγϣϯ͸2022೥10݄͔Βશϒϥ΢βରԠ
    IUUQTDBOJVTFDPNNEODTT@QSPQFSUJFT@HSJEUFNQMBUFDPMVNOT@BOJNBUJPO
    ೥݄
    $ISPNF
    

    View Slide

39. ࠓޙ࢖͑ΔΑ͏ʹͳΔ৽ػೳ
    wߦྻͷೖΕࢠ
    wੵΈ໦ϨΠΞ΢τ
    

    View Slide

40. ߦྻͷೖΕࢠ͕ՄೳʹͳΔ
    04
    

    View Slide

41. ֤ߦͰཁૉ͝ͱͷߴ͞Λἧ͍͑ͨ
    

    View Slide

42. ֤ߦͰཁૉ͝ͱͷߴ͞Λἧ͍͑ͨ
    

    View Slide

43. $44(SJEΛೖΕࢠʹͯ͠ղܾ͢Δ
    

    View Slide

44. 8ߦ×3ྻͷʮ਌ʯߦྻΛ࡞Δ
    
    
    
    
    
    
    
    
    
    

    View Slide

45. ʮࢠʯߦྻΛ࡞Γɺ਌ͷ4ߦ෼Λ࢖༻͢Δ
    
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

46. $44Ͱදݱ͢Δͱʜ
    /* 親⾏列 */
    
    
    .container {
    
    
    display: grid;
    
    
    }
    
    
    /* ⼦⾏列 */
    
    
    .container .item {
    
    
    display: grid;
    
    
    grid-template-rows: subgrid;
    
    
    grid-row: span 4;
    
    
    }
    

    View Slide

47. $44Ͱදݱ͢Δͱʜ
    /* 親⾏列 */
    
    
    .container {
    
    
    display: grid;
    
    
    }
    
    
    /* ⼦⾏列 */
    
    
    .container .item {
    
    
    display: grid;
    
    
    grid-template-rows: subgrid;
    
    
    grid-row: span 4;
    
    
    }
    

    View Slide

48. Demo
    

    View Slide

49. subgrid͸SafariɾFirefoxͰରԠࡁΈ
    IUUQTDBOJVTFDPNDTTTVCHSJE
    

    View Slide

50. $ISPNFɾ&EHF͸ݱࡏ։ൃத
    IUUQTCVHTDISPNJVNPSHQDISPNJVNJTTVFTEFUBJM JE
    

    View Slide

51. ੵΈ໦ϨΠΞ΢τ
    05
    

    View Slide

52. pinterestΈ͍ͨͳϨΠΞ΢τΛ࡞Γ͍ͨ
    

    View Slide

53. ݱঢ়ͷCSSͰ΋ٕज़తʹ͸Մೳ
    .container {
    
    
    /* カラム数成り⾏き、基本的に300pxの横幅 */
    
    
    columns: auto 300px;
    
    
    /* 列間の隙間 */
    
    
    column-gap: 24px;
    
    
    }
    
    
    .item {
    
    
    /* ⾏間の隙間 */
    
    
    margin-bottom: 24px;
    
    
    }
    ը૾Λԣํ޲ʹฒ΂ΒΕͳ͍ɺ伱ؒΛ਌ͱࢠʹࢦఆ͢ΔͳͲ੍໿͕ଟ͍
    

    View Slide

54. কདྷతʹ͸ɺNBTPOSZΛ࢖͏
    .container {
    
    
    grid-template-rows: masonry;
    
    
    grid-template-columns:
    
    
    repeat(auto-fill, 24px);
    
    
    gap: 40px;
    
    
    }
    ௐ੔த
    ॎํ޲ʹ΋ԣํ޲ʹ΋ฒ΂ΒΕΔɻ伱ؒࢦఆ͸HBQͰՄೳ
    

    View Slide

55. কདྷతʹ͸ɺNBTPOSZΛ࢖͏
    .container {
    
    
    grid-template-rows: masonry;
    
    
    grid-template-columns:
    
    
    repeat(auto-fill, 24px);
    
    
    gap: 40px;
    
    
    }
    ௐ੔த
    ॎํ޲ʹ΋ԣํ޲ʹ΋ฒ΂ΒΕΔɻ伱ؒࢦఆ͸HBQͰՄೳ
    

    View Slide

56. Demo
    

    View Slide

57. Firefoxͷϑϥά෇͖ͷΈͰରԠ
    IUUQTDBOJVTFDPNNEODTT@QSPQFSUJFT@HSJEUFNQMBUFSPXT@NBTPOSZ
    

    View Slide

58. FirefoxͷϑϥάΛ༗ޮԽ͢Δํ๏
    BCPVUDPO
    fi
    HʹΞΫηε
    
    
    
    

    View Slide

59. ·ͱΊ
    

    View Slide

60. ࠷ۙ࢖͑ΔΑ͏ʹͳͬͨ΋ͷ
    w ࠷୹ߦͰ্Լࠨӈἧ͑
    w 'MFYCPYͷHBQ
    w $44(SJEͰΞχϝʔγϣϯ
    ࠓޙ࢖͑ΔΑ͏ʹͳΔ΋ͷ
    w ߦྻͷೖΕࢠ
    w ੵΈ໦ϨΠΞ΢τ
    

    View Slide

61. $44(SJE΍'MFYCPYΛ࢖Θͳ͍Ҋ݅͸ͳ͍ɻ
    ৽͍͠৘ใΛΩϟονΞοϓ͠ɺ
    ϥΫʹָ͘͠։ൃ͠Α͏
    

    View Slide

62. Thank y !
    @tonkotsuboy_com
    @matsu_eri
    5XJUUFSͰ͸࠷৽ϑϩϯτΤϯυٕज़Λൃ৴͍ͯ͠·͢
    

    View Slide