2017年4月22日「CSS Talk vol.3」でのセッション「グリッドレイアウト これまでとこれから」のスライドです。
άϦουϨΠΞτ͜Ε·Ͱͱ͜Ε͔Β2017.4.22.CSS Talkvol.3Ӭฏ5FQQFJ.PSJOBHB
View Slide
ࠓճͷ༰άϦου ϨΠΞτͱ͜Ε·Ͱͷ άϦου ϨΠΞτσϞ͜Ε͔Βͷ άϦου ϨΠΞτ$44 (SJE-BZPVU·ͱΊ
ࣗݾհӬฏ ʢΓͯͭʣגࣜձࣾάϥουΩϡʔϒ ϓϩμΫτ։ൃνʔϜ ΤϯδχΞ
άϦουϨΠΞτͱάϦουσβΠϯͱɺ8FCϖʔδͳͲͷσβΠϯख๏ͷҰͭͰɺը໘ϖʔδΛॎԣʹஅ͢ΔઢͰ֨ࢠঢ়ʹׂ͠ɺ͜ΕΛΈ߹Θͤͯ෦ͷཁૉͷେ͖͞ஔΛܾఆ͍ͯ͘͠ํࣜɻಛʹɺϖʔδΛํ؟ࢴͷΑ͏ʹಉ͡େ͖͞ͷඍࡉͳਖ਼ํܗʹׂ͠ɺ͜ΕΛෳΈ߹Θͤͯཁૉ༨നΛߏ͢Δํࣜɻग़యɿʮ*5༻ޠࣙయɹF8PSETʯ
άϦουϨΠΞτͱάϦουσβΠϯͱɺ8FCϖʔδͳͲͷσβΠϯख๏ͷҰͭͰɺը໘ϖʔδΛॎԣʹஅ͢ΔઢͰ֨ࢠঢ়ʹׂ͠ɺ͜ΕΛΈ߹Θͤͯ෦ͷཁૉͷେ͖͞ஔΛܾఆ͍ͯ͘͠ํࣜɻಛʹɺϖʔδΛํ؟ࢴͷΑ͏ʹಉ͡େ͖͞ͷඍࡉͳਖ਼ํܗʹׂ͠ɺ͜ΕΛෳΈ߹Θͤͯཁૉ༨നΛߏ͢Δํࣜɻग़యɿʮ*5༻ޠࣙయɹF8PSETʯάϦου
άϦουϨΠΞτͱํ؟ࢴ
άϦουϨΠΞτͱ
άϦουϨΠΞτͷಛ৽ฉࡶࢽͳͲҹͷϨΠΞτͰΑ͘༻͍ΒΕΔख๏Ͱɺจষը૾ɺ༨നͳͲ෦ͷߏཁૉͷڥքઢ͕ඞͣ֨ࢠঢ়ͷઢ άϦουઢʹ߹͏Α͏ʹஔ͢Δ͜ͱͰɺ༷ʑͳେ͖͞ͷཁૉΛෳࡶʹஔ͖ͯͬ͢͠Γͨ͠ݟ͍͢ߏʹ͢Δ͜ͱ͕Ͱ͖Δɻ֨ࢠઢϨΠΞτͷܾఆ࣌ʹԾతʹҾ͔ΕΔͷͰɺ࣮ࡍͷσβΠϯ্࣮ઢͱͯ͠දࣔ͞ΕΔΘ͚Ͱͳ͍ɻग़యɿʮ*5༻ޠࣙయɹF8PSETʯ
άϦουϨΠΞτͷ࣮ ଟ͍ͷʜʜ $44ϑϨʔϜϫʔΫΛ͏ํ๏
άϦουϨΠΞτͷ࣮ ଟ͍ͷʜʜ $44ϑϨʔϜϫʔΫΛ͏ํ๏ը໘෯Λׂ͢Δ͜ͱ͕ଟ͍֤ཁૉͲΕ͚ͩͷ෯Λ͏͔ΫϥεͰࢦఆ
άϦουϨΠΞτͷ࣮ ͨ·ʹ͋Δͷʜʜ +BWB4DSJQUϥΠϒϥϦΛ͏ํ๏ಈతʹ෯ɺߴ͞ɺϨΠΞτͳͲΛมԽͤ͞Δ࣌ʹ
άϦουϨΠΞτ༻ྫ άϥουΩϡʔϒ8FCαΠτʢ݄ϦχϡʔΞϧʣˠαʔϏεҰཡͷͱ͜ΖͰάϦουϨΠΞτΛ༻
$44(SJE-BZPVUw8$ʹ༷ͯࡦఆதw݄ʹקࠂީิ͕ϦϦʔεwIUUQTXXXXPSH53DTTHSJE$44͚ͩͰʢϑϨʔϜϫʔΫແ͠ͰʣάϦουϨΠΞτͷ࣮͕؆୯ʹʂ
$44(SJE-BZPVU ֤ϒϥβ͕ਖ਼ࣜ࠾༻ͯ͠ूΊΔ'JSFGPYˠ͔Β ϦϦʔε$ISPNFˠ͔Β ϦϦʔε4BGBSJ J04ˠJ04͔Β ϦϦʔε
$44(SJE-BZPVU ରԠঢ়گ*&&EHFɿϕϯμʔϓϨϑΟοΫε͕ඞཁҎલ͔ΒରԠ͞Ε͍͕༷͕ͯͨݹ͍··
$44(SJE-BZPVUσϞ αϯϓϧ
$44(SJE-BZPVUσϞ αϯϓϧɾඞཁͳ)5.-ͷهࡌArea 1Area 2Area 3Area 4
$44(SJE-BZPVUσϞ αϯϓϧɾ$44Ͱཁૉͷࢦఆ.main{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px;grid-gap: 6px;}$44(SJE-BZPVUΛ͍·͢Αͱએݴྻͷ෯ɻࠨ͔Βॱʹࢦఆߦͷߴ͞ɻ্͔Βॱʹࢦఆ֤ྻɺ֤ߦͷִؒ
$44(SJE-BZPVUσϞ αϯϓϧɾ$44Ͱཁૉͷࢦఆgrid-template-columns: 100px 1fr 2fr; ͱॻ͘ͱʜྻɿQYྻΊͱྻɿΓͷ෯ΛͰׂQY Γͷ෯
$44(SJE-BZPVUσϞ αϯϓϧɾ$44Ͱࢠཁૉͷࢦఆ.area3{background-color: #c4ff91;grid-column: 1/3;grid-row: 2;}ྻͷ։࢝ҐஔɺऴྃҐஔͷࢦఆʢͷͰͳ͍ʣߦͷ։࢝Ґஔͷࢦఆ
$44(SJE-BZPVUσϞ αϯϓϧɾ$44Ͱࢠཁૉͷࢦఆgrid-column: 1/3;grid-row: 2;ྻ͓Αͼߦͷ։࢝ɺऴྃҐஔࢦఆํ๏൪͔Β൪·Ͱͷྻ൪͔Β൪·Ͱͷߦ ऴྃҐஔলུՄ
$44(SJE-BZPVUσϞ αϯϓϧɾܗ)5.-$44ͷίʔυ$PEF1FOʹͯIUUQDPEFQFOJPU@NPSJOBHBQFO&89HC-
͜Ε͔ΒͷάϦουϨΠΞτ $44(SJE-BZPVU·Δ͔ʁ$ISPNF'JSFGPY4BGBSJରԠ͞Ε͔ͨΓ*&&EHFͷରԠݹ͍༷ͷ··ීٴ͢Δ·Ͱ͏গ͕͔͔࣌ؒ͠Δʁ
͜Ε͔ΒͷάϦουϨΠΞτ $44(SJE-BZPVUWT'MFYCPY'MFYCPYˠॎ·ͨԣͷํ ʜʜ$44(SJE-BZPVUˠॎԣ྆ํ ͏·͍͚͍ͯ͘͘͜ͱ͕ॏཁ
άϦουϨΠΞτ༻࣌ͷ৺͕͚ σβΠφʔɺσΟϨΫλʔͷํ ྻͷ෯ߦͷߴ͞ྻɺߦͷִؒQY QY QYQYQYQYQYQYQY۩ମతͳࢦࣔΛԼ͍͞ແ͍ͱΤϯδχΞ͕ࠔΓ·͢
άϦουϨΠΞτ༻࣌ͷ৺͕͚ ΤϯδχΞͱͯ͠$44ϑϨʔϜϫʔΫ+BWB4DSJQUϥΠϒϥϦ$44(SJE-BZPVUͦͷͱ͖ʹԠ͍͍ͯ͢͡ͷΛ͍·͠ΐ͏
·ͱΊ άϦουϨΠΞτ ΤϯδχΞࢹ͜Ε·Ͱɿ$44ϑϨʔϜϫʔΫͳͲΛ͏͜ͱ͕ଟ͔ͬͨ͜Ε͔Βɿ$44(SJE-BZPVUΛ্खָ࣮͕͑͘ʹͳΔʜʜͣɻ
·ͱΊ άϦουϨΠΞτσβΠφʔɺσΟϨΫλʔࢹଟ͜Ε·Ͱ͜Ε͔Β͋·ΓมΘΓ·ͤΜ͕ʜΤϯδχΞଆͰ࣮͢Δํ๏ͷબࢶ͕ͭ૿͑Δͱ͍͏͜ͱΛ৺ʹཹΊ͍͚ͯͨͩΕ͍Ͱ͢˞෯ɺߴ͞ɺִؒͷࢦఆΕͳ͍Α͏ɹΑΖ͓͘͠ئ͍͍ͨ͠·͢
ऴ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
m_n_t_p
.jpg){kind=avatar}
izzii
kyonmm
devopstaiwan
hirosatogamo
cheng_wei_chen
kobayang
culvert
hiashisan
pistatium
opelab
non97
orinbou
mza
kneath
danielanewman
keathley
tammielis
thekraken
lara
kastner
jcasabona
chriscoyier
vanstee
iamctodd