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

Transcript

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

2. ࣛ໺
   ૖
   !UPOLPUTVCPZ@DPN
   ϚωʔϑΥϫʔυϏδωεΧϯύχʔ 
 ܦཧࡒ຿ϓϩμΫτຊ෦ϓϩμΫτ։ൃ෦෭෦௕

3. ࣥච͠·ͨ͠

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

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

6. None
7. None

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Ͱ͸࠷৽ϑϩϯτΤϯυٕज़Λൃ৴͍ͯ͠·͢