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ͷ
    ࠷ۙͷਐԽͱϛϥΠ
    ϚωʔϑΥϫʔυࣛ໺૖
    ૉࡐ࡞੒ڠྗɿদԼֆས

    View full-size slide

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

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

    View full-size slide

  3. ࣥච͠·ͨ͠

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. ΤϦΞ໊Λࢦఆͯ͠഑ஔ
    .container {


    display: grid;


    grid-template:


    "main-visual logo" 70%


    "main-visual title" 30% /


    50% 50%;


    }
    ߦྻͷߦྻΛͭ͘ΓɺͦΕͧΕ໊લΛαΠζΛઃఆ͢Δͱ͍͏ࢦఆ

    View full-size slide

  7. ΤϦΞ໊Λࢦఆͯ͠഑ஔ
    .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 full-size slide

  8. ߦྻΛ܁Γฦͨ͠Γɺ伱ؒΛͭ͘Δ
    .container {


    display: grid;


    grid-template:


    repeat(3, 100px) /


    repeat(3, 100px);


    gap: 24px;


    }
    ߦྻͷQYͷαΠζͷࢦఆɺ
    ߦྻؒͷ伱ؒΛQYʹ͢Δࢦఆ

    View full-size slide

  9. ߦྻΛ܁Γฦͨ͠Γɺ伱ؒΛͭ͘Δ
    .container {


    display: grid;


    grid-template:


    repeat(3, 100px) /


    repeat(3, 100px);


    gap: 24px;


    }

    View full-size slide

  10. ߦɾྻ਺ͷࣗಈมߋ
    .container {


    grid-template-columns:


    repeat(auto-fill, minmax(300px, 1fr));


    }
    QYҎ্GSҎԼͰɺͰ͖Δ͚ͩଟ͘ͷྻΛ࡞͍ͬͯͩ͘͞ͱ͍͏ࢦఆ

    View full-size slide

  11. ߦɾྻ਺ͷࣗಈมߋ
    .container {


    grid-template-columns:


    repeat(auto-fill, minmax(300px, 1fr));


    }
    QYҎ্GSҎԼͰɺͰ͖Δ͚ͩଟ͘ͷྻΛ࡞͍ͬͯͩ͘͞ͱ͍͏ࢦఆ

    View full-size slide

  12. ෑ͖٧Ί
    .container {


    grid-auto-flow: dense;


    }
    伱͕ؒ͋ͬͨΒͰ͖Δ͚ͩෑ͖٧Ί͍ͯͩ͘͞ͱ͍͏ࢦఆ

    View full-size slide

  13. ߦɾྻ਺ͷࣗಈมߋɺෑ͖٧Ί
    .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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. ੲͷ΍Γ͔ͨʢ4ʙ7ߦʣ
    .container {


    position: relative;


    }


    .container .box {


    position: absolute;


    top: 50%;


    left: 50%;


    margin-top: -100px;


    margin-left: -100px;


    }

    View full-size slide

  18. FlexboxͰ΋3ߦ
    .container {


    display: flex;


    justify-content: center;


    align-items: center;


    }

    View full-size slide

  19. CSS GridΛ࢖͑͹2ߦ
    .container {


    display: grid;


    place-content: center;


    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. ੲɿཁૉؒʹ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 full-size slide

  27. ݱ୅͸FlexboxͰ΋gap͕࢖͑Δ
    .container {


    display: flex;


    gap: 40px;


    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. CSS GridʹΞχϝʔγϣϯΛࢦఆ͢Δ
    .container {


    display: grid;


    transition: 300ms all;


    grid-template-columns: 40px 1fr;


    }


    .container.open {


    grid-template-columns: 200px 1fr;


    }

    View full-size slide

  32. CSS GridʹΞχϝʔγϣϯΛࢦఆ͢Δ
    .container {


    display: grid;


    transition: 300ms all;


    grid-template-columns: 40px 1fr;


    }


    .container.open {


    grid-template-columns: 200px 1fr;


    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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









    View full-size slide

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












    View full-size slide

  41. $44Ͱදݱ͢Δͱʜ
    /* 親⾏列 */


    .container {


    display: grid;


    }


    /* ⼦⾏列 */


    .container .item {


    display: grid;


    grid-template-rows: subgrid;


    grid-row: span 4;


    }

    View full-size slide

  42. $44Ͱදݱ͢Δͱʜ
    /* 親⾏列 */


    .container {


    display: grid;


    }


    /* ⼦⾏列 */


    .container .item {


    display: grid;


    grid-template-rows: subgrid;


    grid-row: span 4;


    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. ੵΈ໦ϨΠΞ΢τ
    05

    View full-size slide

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

    View full-size slide

  47. ݱঢ়ͷCSSͰ΋ٕज़తʹ͸Մೳ
    .container {


    /* カラム数成り⾏き、基本的に300pxの横幅 */


    columns: auto 300px;


    /* 列間の隙間 */


    column-gap: 24px;


    }


    .item {


    /* ⾏間の隙間 */


    margin-bottom: 24px;


    }
    ը૾Λԣํ޲ʹฒ΂ΒΕͳ͍ɺ伱ؒΛ਌ͱࢠʹࢦఆ͢ΔͳͲ੍໿͕ଟ͍

    View full-size slide

  48. কདྷతʹ͸ɺNBTPOSZΛ࢖͏
    .container {


    grid-template-rows: masonry;


    grid-template-columns:


    repeat(auto-fill, 24px);


    gap: 40px;


    }
    ௐ੔த
    ॎํ޲ʹ΋ԣํ޲ʹ΋ฒ΂ΒΕΔɻ伱ؒࢦఆ͸HBQͰՄೳ

    View full-size slide

  49. কདྷతʹ͸ɺNBTPOSZΛ࢖͏
    .container {


    grid-template-rows: masonry;


    grid-template-columns:


    repeat(auto-fill, 24px);


    gap: 40px;


    }
    ௐ੔த
    ॎํ޲ʹ΋ԣํ޲ʹ΋ฒ΂ΒΕΔɻ伱ؒࢦఆ͸HBQͰՄೳ

    View full-size slide

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

    View full-size slide

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



    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide