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

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

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

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

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
530
0fdc62ee683c65e17f2a90728570f455?s=48 m_n_t_p
0
120
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
650
0fdc62ee683c65e17f2a90728570f455?s=48 m_n_t_p
2
540
0fdc62ee683c65e17f2a90728570f455?s=48 m_n_t_p
1
600
0fdc62ee683c65e17f2a90728570f455?s=48 m_n_t_p
0
110

Other Decks in Technology

See All in Technology
65241d0356dc5a93b0fec68bcf7b42ac?s=48 yumulab
1
150
E163ae0588e154424d78e17672076ef4?s=48 kosugitti
3
450
6dc67d02d6b322ee317cece9b045317d?s=48 kalupas226
2
170
011714704c4a925e542d426d4cdaa4e3?s=48 giginet
3
490
E0db06b2e246ef948efc84bfc3909117?s=48 stkzk3110
0
440
35e08efcf39d692f540047fb756eb4e3?s=48 konifar
0
250
D0f23208dff6d54a2a4305e65af569c8?s=48 shiozaki
0
280
2037978e199b5947c8304d0435de9944?s=48 irisuinwl
0
400
8ba32afb4b7d6967cb38b2dadf1ddd80?s=48 daigo0927
2
140
B79e8f240b4b730fb692ab93ad42a89b?s=48 darquro
2
220
00101a1274d1f92977f4e442ef73be86?s=48 ahana
0
130
5a9fb3b80c517e51e4e95a27b63c6a67?s=48 takuyatezuka
3
1.9k

Featured

See All Featured
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
56k
245cee81a9c424266e5e401d844ea881?s=48 lara
175
10k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
350
20k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
6
920
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
147
20k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
324
54k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
287
47k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
171
7.6k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
58
3.8k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
20
5k

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