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

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

by もりてつ

Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࠓճͷ಺༰ άϦου  ϨΠΞ΢τͱ͸ ͜Ε·Ͱͷ  άϦου  ϨΠΞ΢τ σϞ ͜Ε͔Βͷ  άϦου  ϨΠΞ΢τ $44  (SJE-BZPVU ·ͱΊ

Slide 3

Slide 3 text

ࣗݾ঺հ ৿Ӭ఩ฏ  ʢ΋Γͯͭʣ גࣜձࣾάϥουΩϡʔϒ  ϓϩμΫτ։ൃνʔϜ  ΤϯδχΞ

Slide 4

Slide 4 text

ࠓճͷ಺༰ άϦου  ϨΠΞ΢τͱ͸ ͜Ε·Ͱͷ  άϦου  ϨΠΞ΢τ σϞ ͜Ε͔Βͷ  άϦου  ϨΠΞ΢τ $44  (SJE-BZPVU ·ͱΊ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

άϦουϨΠΞ΢τͱ͸

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

ࠓճͷ಺༰ άϦου  ϨΠΞ΢τͱ͸ ͜Ε·Ͱͷ  άϦου  ϨΠΞ΢τ σϞ ͜Ε͔Βͷ  άϦου  ϨΠΞ΢τ $44  (SJE-BZPVU ·ͱΊ

Slide 11

Slide 11 text

άϦουϨΠΞ΢τͷ࣮૷   ଟ͍ͷ͸ʜʜ  $44ϑϨʔϜϫʔΫΛ࢖͏ํ๏

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

ࠓճͷ಺༰ άϦου  ϨΠΞ΢τͱ͸ ͜Ε·Ͱͷ  άϦου  ϨΠΞ΢τ σϞ ͜Ε͔Βͷ  άϦου  ϨΠΞ΢τ $44  (SJE-BZPVU ·ͱΊ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

ࠓճͷ಺༰ άϦου  ϨΠΞ΢τͱ͸ ͜Ε·Ͱͷ  άϦου  ϨΠΞ΢τ σϞ ͜Ε͔Βͷ  άϦου  ϨΠΞ΢τ $44  (SJE-BZPVU ·ͱΊ

Slide 20

Slide 20 text

$44(SJE-BZPVUσϞ   αϯϓϧ

Slide 21

Slide 21 text

$44(SJE-BZPVUσϞ   αϯϓϧɾඞཁͳ)5.-ͷهࡌ

Area 1

Area 2

Area 3

Area 4

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

$44(SJE-BZPVUσϞ   αϯϓϧɾ׬੒ܗ )5.-$44ͷίʔυ͸$PEF1FOʹͯ IUUQDPEFQFOJPU@NPSJOBHBQFO&89HC-

Slide 27

Slide 27 text

ࠓճͷ಺༰ άϦου  ϨΠΞ΢τͱ͸ ͜Ε·Ͱͷ  άϦου  ϨΠΞ΢τ σϞ ͜Ε͔Βͷ  άϦου  ϨΠΞ΢τ $44  (SJE-BZPVU ·ͱΊ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

͜Ε͔ΒͷάϦουϨΠΞ΢τ   $44(SJE-BZPVUWT'MFYCPY 'MFYCPY ˠॎ·ͨ͸ԣͷํ޲ ʜʜ $44(SJE-BZPVU ˠॎԣ྆ํ޲ ͏·͘࢖͍෼͚͍ͯ͘͜ͱ͕ॏཁ

Slide 30

Slide 30 text

άϦουϨΠΞ΢τ࢖༻࣌ͷ৺͕͚   σβΠφʔɺσΟϨΫλʔͷํ΁ ྻͷ෯ ߦͷߴ͞ ྻɺߦͷִؒ QY QY QY QY QY QY QY QY QY ۩ମతͳࢦࣔΛԼ͍͞ ແ͍ͱΤϯδχΞ͕ࠔΓ·͢

Slide 31

Slide 31 text

άϦουϨΠΞ΢τ࢖༻࣌ͷ৺͕͚   ΤϯδχΞͱͯ͠͸ $44ϑϨʔϜϫʔΫ +BWB4DSJQUϥΠϒϥϦ $44(SJE-BZPVU ͦͷͱ͖ʹԠͯ͡ ࢖͍΍͍͢΋ͷΛ ࢖͍·͠ΐ͏

Slide 32

Slide 32 text

ࠓճͷ಺༰ άϦου  ϨΠΞ΢τͱ͸ ͜Ε·Ͱͷ  άϦου  ϨΠΞ΢τ σϞ ͜Ε͔Βͷ  άϦου  ϨΠΞ΢τ $44  (SJE-BZPVU ·ͱΊ

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

ऴ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ