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

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

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
    -BZPVU
    WT
    '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. ऴ
    ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ