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

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

0fdc62ee683c65e17f2a90728570f455?s=47 もりてつ
April 22, 2017
Technology
1
470

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

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

0fdc62ee683c65e17f2a90728570f455?s=128

もりてつ

April 22, 2017
Tweet

More Decks by もりてつ

See All by もりてつ
0fdc62ee683c65e17f2a90728570f455?s=48 m_n_t_p
0
580
0fdc62ee683c65e17f2a90728570f455?s=48 m_n_t_p
0
160
0fdc62ee683c65e17f2a90728570f455?s=48 m_n_t_p
0
130
0fdc62ee683c65e17f2a90728570f455?s=48 m_n_t_p
0
110
0fdc62ee683c65e17f2a90728570f455?s=48 m_n_t_p
0
140
0fdc62ee683c65e17f2a90728570f455?s=48 m_n_t_p
0
660
0fdc62ee683c65e17f2a90728570f455?s=48 m_n_t_p
2
580
0fdc62ee683c65e17f2a90728570f455?s=48 m_n_t_p
1
640
0fdc62ee683c65e17f2a90728570f455?s=48 m_n_t_p
0
110

Other Decks in Technology

See All in Technology
B3d3a2cce932eca144b8c13a63966404?s=48 alblue
2
450
Cdf97a1b1b132c56582773c3ba09a3a6?s=48 rakus_dev
0
300
79dcb04101764d7bf66f898dd446838e?s=48 tsukubachallenge
0
140
140494d272a4d89883a94fdfdb29dea2?s=48 oracle4engineer
PRO
10
13k
79dcb04101764d7bf66f898dd446838e?s=48 tsukubachallenge
0
160
17d4ef53b432ebf7c566fd6a11345570?s=48 ytake
1
100
1dceaa2dcea41c16004f430c1723b20e?s=48 miso
0
220
7fccfb690a818ed2f3a15fc21d426d5a?s=48 texmeijin
2
110
3fa91dc187588e13e827810d2f30d8c7?s=48 moepy_stats
2
2.3k
79dcb04101764d7bf66f898dd446838e?s=48 tsukubachallenge
0
330
2ec66a263a2de5d0184e3e1e5c809a64?s=48 naotousami
0
750
33d6320b53f63f6627508095633cf5ce?s=48 yosuke_matsuura
PRO
0
2.3k

Featured

See All Featured
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
30
5.4k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
167
20k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
295
110k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
68
4.6k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
236
990k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
91
3.7k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
78
280k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
62
7k
78b475797a14c84799063c7cd073962f?s=48 holman
464
280k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
337
30k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
4k

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