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

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

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

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

0fdc62ee683c65e17f2a90728570f455?s=128

もりてつ

April 22, 2017
Tweet

Transcript

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

  2. ࠓճͷ಺༰ άϦου
 ϨΠΞ΢τͱ͸ ͜Ε·Ͱͷ
 άϦου
 ϨΠΞ΢τ σϞ ͜Ε͔Βͷ
 άϦου
 ϨΠΞ΢τ

    $44
 (SJE-BZPVU ·ͱΊ      
  3. ࣗݾ঺հ ৿Ӭ఩ฏ
 ʢ΋Γͯͭʣ גࣜձࣾάϥουΩϡʔϒ
 ϓϩμΫτ։ൃνʔϜ
 ΤϯδχΞ

  4. ࠓճͷ಺༰ άϦου
 ϨΠΞ΢τͱ͸ ͜Ε·Ͱͷ
 άϦου
 ϨΠΞ΢τ σϞ ͜Ε͔Βͷ
 άϦου
 ϨΠΞ΢τ

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

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

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

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

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

    ग़యɿʮ*5༻ޠࣙయɹF8PSETʯ
  10. ࠓճͷ಺༰ άϦου
 ϨΠΞ΢τͱ͸ ͜Ε·Ͱͷ
 άϦου
 ϨΠΞ΢τ σϞ ͜Ε͔Βͷ
 άϦου
 ϨΠΞ΢τ

    $44
 (SJE-BZPVU ·ͱΊ      
  11. άϦουϨΠΞ΢τͷ࣮૷ 
 ଟ͍ͷ͸ʜʜ
 $44ϑϨʔϜϫʔΫΛ࢖͏ํ๏

  12. άϦουϨΠΞ΢τͷ࣮૷ 
 ଟ͍ͷ͸ʜʜ
 $44ϑϨʔϜϫʔΫΛ࢖͏ํ๏ ը໘෯Λ෼ׂ͢Δ͜ͱ͕ଟ͍ ֤ཁૉͲΕ͚ͩͷ෯Λ࢖͏͔ΫϥεͰࢦఆ

  13. άϦουϨΠΞ΢τͷ࣮૷ 
 ͨ·ʹ͋Δ΋ͷʜʜ
 +BWB4DSJQUϥΠϒϥϦΛ࢖͏ํ๏ ಈతʹ෯ɺߴ͞ɺ ϨΠΞ΢τͳͲΛ มԽͤ͞Δ࣌ʹ

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

  15. ࠓճͷ಺༰ άϦου
 ϨΠΞ΢τͱ͸ ͜Ε·Ͱͷ
 άϦου
 ϨΠΞ΢τ σϞ ͜Ε͔Βͷ
 άϦου
 ϨΠΞ΢τ

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

  17. $44(SJE-BZPVU 
 ֤ϒϥ΢β͕ਖ਼ࣜ࠾༻ͯ͠஫໨ूΊΔ 'JSFGPYˠ͔Β ϦϦʔε $ISPNFˠ͔Β ϦϦʔε 4BGBSJ J04 ˠJ04͔Β

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

  19. ࠓճͷ಺༰ άϦου
 ϨΠΞ΢τͱ͸ ͜Ε·Ͱͷ
 άϦου
 ϨΠΞ΢τ σϞ ͜Ε͔Βͷ
 άϦου
 ϨΠΞ΢τ

    $44
 (SJE-BZPVU ·ͱΊ      
  20. $44(SJE-BZPVUσϞ 
 αϯϓϧ

  21. $44(SJE-BZPVUσϞ 
 αϯϓϧɾඞཁͳ)5.-ͷهࡌ <div class="main"> <p class="area1"><span>Area 1</span></p> <p class="area2"><span>Area

    2</span></p> <p class="area3"><span>Area 3</span></p> <p class="area4"><span>Area 4</span></p> </div>
  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Λ࢖͍·͢Αͱએݴ ྻͷ෯ɻࠨ͔Βॱʹࢦఆ ߦͷߴ͞ɻ্͔Βॱʹࢦఆ ֤ྻɺ֤ߦͷִؒ
  23. $44(SJE-BZPVUσϞ 
 αϯϓϧɾ$44Ͱ਌ཁૉ΁ͷࢦఆ grid-template-columns: 100px 1fr 2fr; ͱॻ͘ͱʜ ྻ໨ɿQY ྻΊͱྻ໨ɿ࢒Γͷ෯ΛͰ෼ׂ

    QY ࢒Γͷ෯  
  24. $44(SJE-BZPVUσϞ 
 αϯϓϧɾ$44Ͱࢠཁૉ΁ͷࢦఆ .area3{ background-color: #c4ff91; grid-column: 1/3; grid-row: 2;

    } ྻͷ։࢝ҐஔɺऴྃҐஔͷࢦఆ ʢ෼ͷͰ͸ͳ͍ʣ ߦͷ։࢝Ґஔͷࢦఆ
  25. $44(SJE-BZPVUσϞ 
 αϯϓϧɾ$44Ͱࢠཁૉ΁ͷࢦఆ grid-column: 1/3; grid-row: 2; ྻ͓Αͼߦͷ։࢝ɺऴྃҐஔࢦఆํ๏ ൪͔Β൪·Ͱͷྻ෼ ൪͔Β൪·Ͱͷߦ෼

    ऴྃҐஔলུՄ
  26. $44(SJE-BZPVUσϞ 
 αϯϓϧɾ׬੒ܗ )5.-$44ͷίʔυ͸$PEF1FOʹͯ IUUQDPEFQFOJPU@NPSJOBHBQFO&89HC-

  27. ࠓճͷ಺༰ άϦου
 ϨΠΞ΢τͱ͸ ͜Ε·Ͱͷ
 άϦου
 ϨΠΞ΢τ σϞ ͜Ε͔Βͷ
 άϦου
 ϨΠΞ΢τ

    $44
 (SJE-BZPVU ·ͱΊ      
  28. ͜Ε͔ΒͷάϦουϨΠΞ΢τ 
 $44(SJE-BZPVU͸޿·Δ͔ʁ $ISPNF'JSFGPY4BGBSJ͸ରԠ͞Εͨ͹͔Γ *&&EHFͷରԠ͸ݹ͍࢓༷ͷ·· ීٴ͢Δ·Ͱ΋͏গ͕͔͔࣌ؒ͠Δʁ

  29. ͜Ε͔ΒͷάϦουϨΠΞ΢τ 
 $44(SJE-BZPVUWT'MFYCPY 'MFYCPY ˠॎ·ͨ͸ԣͷํ޲     

    ʜʜ $44(SJE-BZPVU ˠॎԣ྆ํ޲     ͏·͘࢖͍෼͚͍ͯ͘͜ͱ͕ॏཁ
  30. άϦουϨΠΞ΢τ࢖༻࣌ͷ৺͕͚ 
 σβΠφʔɺσΟϨΫλʔͷํ΁     ྻͷ෯ ߦͷߴ͞ ྻɺߦͷִؒ

    QY QY QY QY QY QY QY QY QY ۩ମతͳࢦࣔΛԼ͍͞ ແ͍ͱΤϯδχΞ͕ࠔΓ·͢
  31. άϦουϨΠΞ΢τ࢖༻࣌ͷ৺͕͚ 
 ΤϯδχΞͱͯ͠͸ $44ϑϨʔϜϫʔΫ +BWB4DSJQUϥΠϒϥϦ $44(SJE-BZPVU ͦͷͱ͖ʹԠͯ͡ ࢖͍΍͍͢΋ͷΛ ࢖͍·͠ΐ͏

  32. ࠓճͷ಺༰ άϦου
 ϨΠΞ΢τͱ͸ ͜Ε·Ͱͷ
 άϦου
 ϨΠΞ΢τ σϞ ͜Ε͔Βͷ
 άϦου
 ϨΠΞ΢τ

    $44
 (SJE-BZPVU ·ͱΊ      
  33. ·ͱΊ 
 άϦουϨΠΞ΢τ ΤϯδχΞࢹ఺ ͜Ε·Ͱɿ $44ϑϨʔϜϫʔΫͳͲΛ࢖͏͜ͱ͕ଟ͔ͬͨ ͜Ε͔Βɿ $44(SJE-BZPVUΛ্ख͘࢖͑͹ ࣮૷ָ͕ʹͳΔʜʜ͸ͣɻ

  34. ·ͱΊ 
 άϦουϨΠΞ΢τ σβΠφʔɺσΟϨΫλʔࢹ఺ ଟ෼͜Ε·Ͱ΋͜Ε͔Β΋͋·ΓมΘΓ·ͤΜ͕ʜ ΤϯδχΞଆͰ࣮૷͢Δํ๏ͷબ୒ࢶ͕ ͭ૿͑Δͱ͍͏͜ͱΛ ৺ʹཹΊ͍͚ͯͨͩΕ͹޾͍Ͱ͢ ˞෯ɺߴ͞ɺִؒͷࢦఆ͸๨Εͳ͍Α͏ ɹΑΖ͓͘͠ئ͍͍ͨ͠·͢

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