Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Twitter
https://twitter.com/tonkotsuboy_com

tonkotsuboy_com

December 09, 2022
Tweet

More Decks by tonkotsuboy_com

Other Decks in Programming

Transcript

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

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

  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݄͔Βશϒϥ΢βରԠ IUUQTDBOJVTFDPNNEO[email protected]@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݄͔Βશϒϥ΢βରԠ IUUQTDBOJVTFDPNNEO[email protected]@HSJEUFNQMBUF[email protected] ೥݄ $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ͷϑϥά෇͖ͷΈͰରԠ IUUQTDBOJVTFDPNNEO[email protected]@HSJEUFNQMBUF[email protected]

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