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

グリッドレイアウト これまでとこれから

グリッドレイアウト これまでとこれから

2017年4月22日「CSS Talk vol.3」でのセッション「グリッドレイアウト これまでとこれから」のスライドです。

もりてつ

April 22, 2017
Tweet

More Decks by もりてつ

Other Decks in Technology

Transcript

  1. άϦουϨΠΞ΢τ
    ͜Ε·Ͱͱ͜Ε͔Β
    2017.4.22.
    CSS Talk
    vol.3
    ৿Ӭ఩ฏ
    5FQQFJ.PSJOBHB

    View Slide

  2. ࠓճͷ಺༰
    άϦου

    ϨΠΞ΢τͱ͸
    ͜Ε·Ͱͷ

    άϦου

    ϨΠΞ΢τ
    σϞ
    ͜Ε͔Βͷ

    άϦου

    ϨΠΞ΢τ
    $44

    (SJE-BZPVU
    ·ͱΊ


    View Slide

  3. ࣗݾ঺հ
    ৿Ӭ఩ฏ

    ʢ΋Γͯͭʣ
    גࣜձࣾάϥουΩϡʔϒ

    ϓϩμΫτ։ൃνʔϜ

    ΤϯδχΞ

    View Slide

  4. ࠓճͷ಺༰
    άϦου

    ϨΠΞ΢τͱ͸
    ͜Ε·Ͱͷ

    άϦου

    ϨΠΞ΢τ
    σϞ
    ͜Ε͔Βͷ

    άϦου

    ϨΠΞ΢τ
    $44

    (SJE-BZPVU
    ·ͱΊ


    View Slide

  5. άϦουϨΠΞ΢τͱ͸
    άϦουσβΠϯͱ͸ɺ8FCϖʔδͳͲͷσβΠϯख๏ͷҰ
    ͭͰɺը໘΍ϖʔδΛॎԣʹ෼அ͢Δ௚ઢͰ֨ࢠঢ়ʹ෼ׂ͠ɺ
    ͜ΕΛ૊Έ߹Θͤͯ಺෦ͷཁૉͷେ͖͞΍഑ஔΛܾఆ͍ͯ͠
    ͘ํࣜɻಛʹɺϖʔδΛํ؟ࢴͷΑ͏ʹಉ͡େ͖͞ͷඍࡉͳ
    ਖ਼ํܗʹ෼ׂ͠ɺ͜ΕΛෳ਺૊Έ߹Θͤͯཁૉ΍༨നΛߏ੒
    ͢Δํࣜɻ
    ग़యɿʮ*5༻ޠࣙయɹF8PSETʯ

    View Slide

  6. άϦουϨΠΞ΢τͱ͸
    άϦουσβΠϯͱ͸ɺ8FCϖʔδͳͲͷσβΠϯख๏ͷҰ
    ͭͰɺը໘΍ϖʔδΛॎԣʹ෼அ͢Δ௚ઢͰ֨ࢠঢ়ʹ෼ׂ͠ɺ
    ͜ΕΛ૊Έ߹Θͤͯ಺෦ͷཁૉͷେ͖͞΍഑ஔΛܾఆ͍ͯ͠
    ͘ํࣜɻಛʹɺϖʔδΛํ؟ࢴͷΑ͏ʹಉ͡େ͖͞ͷඍࡉͳ
    ਖ਼ํܗʹ෼ׂ͠ɺ͜ΕΛෳ਺૊Έ߹Θͤͯཁૉ΍༨നΛߏ੒
    ͢Δํࣜɻ
    ग़యɿʮ*5༻ޠࣙయɹF8PSETʯ
    άϦου

    View Slide

  7. άϦουϨΠΞ΢τͱ͸
    ํ؟ࢴ

    View Slide

  8. άϦουϨΠΞ΢τͱ͸

    View Slide

  9. άϦουϨΠΞ΢τͷಛ௃
    ৽ฉ΍ࡶࢽͳͲҹ࡮෺ͷϨΠΞ΢τͰ͸Α͘༻͍ΒΕΔख๏
    Ͱɺจষ΍ը૾ɺ༨നͳͲ಺෦ͷߏ੒ཁૉͷڥքઢ͕ඞͣ֨
    ࢠঢ়ͷઢ άϦουઢ
    ʹ߹͏Α͏ʹ഑ஔ͢Δ͜ͱͰɺ༷ʑͳେ
    ͖͞ͷཁૉΛෳࡶʹ഑ஔͯ͠΋͖ͬ͢Γͨ͠ݟ΍͍͢ߏ੒ʹ͢
    Δ͜ͱ͕Ͱ͖Δɻ֨ࢠઢ͸ϨΠΞ΢τͷܾఆ࣌ʹԾ૝తʹҾ
    ͔ΕΔ΋ͷͰɺ࣮ࡍͷσβΠϯ্͸࣮ઢͱͯ͠දࣔ͞ΕΔΘ͚
    Ͱ͸ͳ͍ɻ
    ग़యɿʮ*5༻ޠࣙయɹF8PSETʯ

    View Slide

  10. ࠓճͷ಺༰
    άϦου

    ϨΠΞ΢τͱ͸
    ͜Ε·Ͱͷ

    άϦου

    ϨΠΞ΢τ
    σϞ
    ͜Ε͔Βͷ

    άϦου

    ϨΠΞ΢τ
    $44

    (SJE-BZPVU
    ·ͱΊ


    View Slide

  11. άϦουϨΠΞ΢τͷ࣮૷

    ଟ͍ͷ͸ʜʜ

    $44ϑϨʔϜϫʔΫΛ࢖͏ํ๏

    View Slide

  12. άϦουϨΠΞ΢τͷ࣮૷

    ଟ͍ͷ͸ʜʜ

    $44ϑϨʔϜϫʔΫΛ࢖͏ํ๏
    ը໘෯Λ෼ׂ͢Δ͜ͱ͕ଟ͍
    ֤ཁૉͲΕ͚ͩͷ෯Λ࢖͏͔ΫϥεͰࢦఆ

    View Slide

  13. άϦουϨΠΞ΢τͷ࣮૷

    ͨ·ʹ͋Δ΋ͷʜʜ

    +BWB4DSJQUϥΠϒϥϦΛ࢖͏ํ๏
    ಈతʹ෯ɺߴ͞ɺ
    ϨΠΞ΢τͳͲΛ
    มԽͤ͞Δ࣌ʹ

    View Slide

  14. άϦουϨΠΞ΢τ࢖༻ྫ

    άϥουΩϡʔϒ8FCαΠτʢ೥݄ϦχϡʔΞϧʣ
    ˠαʔϏεҰཡͷͱ͜Ζ౳ͰάϦουϨΠΞ΢τΛ࢖༻

    View Slide

  15. ࠓճͷ಺༰
    άϦου

    ϨΠΞ΢τͱ͸
    ͜Ε·Ͱͷ

    άϦου

    ϨΠΞ΢τ
    σϞ
    ͜Ε͔Βͷ

    άϦου

    ϨΠΞ΢τ
    $44

    (SJE-BZPVU
    ·ͱΊ


    View Slide

  16. $44(SJE-BZPVU
    w8$ʹͯ࢓༷ࡦఆத
    w೥݄೔ʹקࠂީิ͕ϦϦʔε
    wIUUQTXXXXPSH53DTTHSJE
    $44͚ͩͰʢϑϨʔϜϫʔΫແ͠Ͱʣ
    άϦουϨΠΞ΢τͷ࣮૷͕؆୯ʹʂ

    View Slide

  17. $44(SJE-BZPVU

    ֤ϒϥ΢β͕ਖ਼ࣜ࠾༻ͯ͠஫໨ूΊΔ
    'JSFGPYˠ͔Β ϦϦʔε

    $ISPNFˠ͔Β ϦϦʔε

    4BGBSJ J04
    ˠJ04͔Β ϦϦʔε

    View Slide

  18. $44(SJE-BZPVU

    ରԠঢ়گ
    *&&EHFɿ
    ϕϯμʔϓϨϑΟοΫε͕ඞཁ
    Ҏલ͔ΒରԠ͞Ε͍͕ͯͨ࢓༷͕ݹ͍··

    View Slide

  19. ࠓճͷ಺༰
    άϦου

    ϨΠΞ΢τͱ͸
    ͜Ε·Ͱͷ

    άϦου

    ϨΠΞ΢τ
    σϞ
    ͜Ε͔Βͷ

    άϦου

    ϨΠΞ΢τ
    $44

    (SJE-BZPVU
    ·ͱΊ


    View Slide

  20. $44(SJE-BZPVUσϞ

    αϯϓϧ

    View Slide

  21. $44(SJE-BZPVUσϞ

    αϯϓϧɾඞཁͳ)5.-ͷهࡌ

    Area 1
    Area 2
    Area 3
    Area 4

    View Slide

  22. $44(SJE-BZPVUσϞ

    αϯϓϧɾ$44Ͱ਌ཁૉ΁ͷࢦఆ
    .main{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px;
    grid-gap: 6px;
    }
    $44(SJE-BZPVUΛ࢖͍·͢Αͱએݴ
    ྻͷ෯ɻࠨ͔Βॱʹࢦఆ
    ߦͷߴ͞ɻ্͔Βॱʹࢦఆ
    ֤ྻɺ֤ߦͷִؒ

    View Slide

  23. $44(SJE-BZPVUσϞ

    αϯϓϧɾ$44Ͱ਌ཁૉ΁ͷࢦఆ
    grid-template-columns: 100px 1fr 2fr; ͱॻ͘ͱʜ
    ྻ໨ɿQY
    ྻΊͱྻ໨ɿ࢒Γͷ෯ΛͰ෼ׂ
    QY ࢒Γͷ෯

    View Slide

  24. $44(SJE-BZPVUσϞ

    αϯϓϧɾ$44Ͱࢠཁૉ΁ͷࢦఆ
    .area3{
    background-color: #c4ff91;
    grid-column: 1/3;
    grid-row: 2;
    }
    ྻͷ։࢝ҐஔɺऴྃҐஔͷࢦఆ
    ʢ෼ͷͰ͸ͳ͍ʣ
    ߦͷ։࢝Ґஔͷࢦఆ

    View Slide

  25. $44(SJE-BZPVUσϞ

    αϯϓϧɾ$44Ͱࢠཁૉ΁ͷࢦఆ
    grid-column: 1/3;
    grid-row: 2;
    ྻ͓Αͼߦͷ։࢝ɺऴྃҐஔࢦఆํ๏
    ൪͔Β൪·Ͱͷྻ෼
    ൪͔Β൪·Ͱͷߦ෼ ऴྃҐஔলུՄ

    View Slide

  26. $44(SJE-BZPVUσϞ

    αϯϓϧɾ׬੒ܗ
    )5.-$44ͷίʔυ͸$PEF1FOʹͯ
    IUUQDPEFQFOJPU@NPSJOBHBQFO&89HC-

    View Slide

  27. ࠓճͷ಺༰
    άϦου

    ϨΠΞ΢τͱ͸
    ͜Ε·Ͱͷ

    άϦου

    ϨΠΞ΢τ
    σϞ
    ͜Ε͔Βͷ

    άϦου

    ϨΠΞ΢τ
    $44

    (SJE-BZPVU
    ·ͱΊ


    View Slide

  28. ͜Ε͔ΒͷάϦουϨΠΞ΢τ

    $44(SJE-BZPVU͸޿·Δ͔ʁ
    $ISPNF'JSFGPY4BGBSJ͸ରԠ͞Εͨ͹͔Γ
    *&&EHFͷରԠ͸ݹ͍࢓༷ͷ··
    ීٴ͢Δ·Ͱ΋͏গ͕͔͔࣌ؒ͠Δʁ

    View Slide

  29. ͜Ε͔ΒͷάϦουϨΠΞ΢τ

    $44(SJE-BZPVUWT'MFYCPY
    'MFYCPY
    ˠॎ·ͨ͸ԣͷํ޲

    ʜʜ
    $44(SJE-BZPVU
    ˠॎԣ྆ํ޲



    ͏·͘࢖͍෼͚͍ͯ͘͜ͱ͕ॏཁ

    View Slide

  30. άϦουϨΠΞ΢τ࢖༻࣌ͷ৺͕͚

    σβΠφʔɺσΟϨΫλʔͷํ΁



    ྻͷ෯
    ߦͷߴ͞
    ྻɺߦͷִؒ
    QY QY QY
    QY
    QY
    QY
    QY
    QY
    QY
    ۩ମతͳࢦࣔΛԼ͍͞
    ແ͍ͱΤϯδχΞ͕ࠔΓ·͢

    View Slide

  31. άϦουϨΠΞ΢τ࢖༻࣌ͷ৺͕͚

    ΤϯδχΞͱͯ͠͸
    $44ϑϨʔϜϫʔΫ
    +BWB4DSJQUϥΠϒϥϦ
    $44(SJE-BZPVU
    ͦͷͱ͖ʹԠͯ͡
    ࢖͍΍͍͢΋ͷΛ
    ࢖͍·͠ΐ͏

    View Slide

  32. ࠓճͷ಺༰
    άϦου

    ϨΠΞ΢τͱ͸
    ͜Ε·Ͱͷ

    άϦου

    ϨΠΞ΢τ
    σϞ
    ͜Ε͔Βͷ

    άϦου

    ϨΠΞ΢τ
    $44

    (SJE-BZPVU
    ·ͱΊ


    View Slide

  33. ·ͱΊ

    άϦουϨΠΞ΢τ ΤϯδχΞࢹ఺

    ͜Ε·Ͱɿ
    $44ϑϨʔϜϫʔΫͳͲΛ࢖͏͜ͱ͕ଟ͔ͬͨ
    ͜Ε͔Βɿ
    $44(SJE-BZPVUΛ্ख͘࢖͑͹
    ࣮૷ָ͕ʹͳΔʜʜ͸ͣɻ

    View Slide

  34. ·ͱΊ

    άϦουϨΠΞ΢τ
    σβΠφʔɺσΟϨΫλʔࢹ఺

    ଟ෼͜Ε·Ͱ΋͜Ε͔Β΋͋·ΓมΘΓ·ͤΜ͕ʜ
    ΤϯδχΞଆͰ࣮૷͢Δํ๏ͷબ୒ࢶ͕
    ͭ૿͑Δͱ͍͏͜ͱΛ
    ৺ʹཹΊ͍͚ͯͨͩΕ͹޾͍Ͱ͢
    ˞෯ɺߴ͞ɺִؒͷࢦఆ͸๨Εͳ͍Α͏
    ɹΑΖ͓͘͠ئ͍͍ͨ͠·͢

    View Slide


  35. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ

    View Slide