Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

CSS Grid Layout Module Ҫ্ ୓

Slide 3

Slide 3 text

CSS Grid Layout Moduleͱ͸

Slide 4

Slide 4 text

CSS Grid Layout Moduleͱ͸ • CSS3Ͱࡦఆ͕ਐΊΒΕ͍ͯΔɺFlexible Box Layout Moduleʹ͙࣍৽ͨͳϨΠΞ΢τϞ δϡʔϧɻ • ίϯςφΛॎԣͷ֨ࢠঢ়ʹ෼ׂͯ͠ཁૉΛࣗ ༝ʹ഑ஔग़དྷΔ

Slide 5

Slide 5 text

CSS Grid Layout Module Ҫ্ ୓

Slide 6

Slide 6 text

ϒϥ΢β࣮૷ঢ়گ

Slide 7

Slide 7 text

ϒϥ΢β࣮૷ঢ়گ • Ϟμϯϒϥ΢β͸جຊతʹ࣮૷ࡁΈ

Slide 8

Slide 8 text

ʊਓਓਓਓਓਓਓʊ ʼɹ ҆ఆͷIEɹ ʻ ʉY^Y^Y^Y^Y^Yʉ

Slide 9

Slide 9 text

ॻ͖ํ

Slide 10

Slide 10 text

IFBEFS OBW NBJO TJEFCBS GPPUFS දࣔ݁Ռ

Slide 11

Slide 11 text

header
nav
main
sidebar
footer
HTML

Slide 12

Slide 12 text

.container{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 30px 30px 30px; grid-gap: 10px; } CSS

Slide 13

Slide 13 text

IFBEFS OBW NBJO TJEFCBS GPPUFS 100px 100px 100px 30px 30px 30px grid-template-columns grid-template-rows

Slide 14

Slide 14 text

.item_header, .item_footer{ grid-column: 1/4; } CSS

Slide 15

Slide 15 text

ʊਓਓਓਓਓਓਓʊ ʼɹ 1/4?? ɹ ʻ ʉY^Y^Y^Y^Y^Yʉ

Slide 16

Slide 16 text

1 2 3 4 1 2 3 4

Slide 17

Slide 17 text

1 2 3 4 1 2 3 4

Slide 18

Slide 18 text

ɹ͜ͷฆΒΘ͍͠ॻ͖ํ Ͳ͏ʹ͔ͳΒͳ͍ͷʁ

Slide 19

Slide 19 text

header
nav
main
sidebar
footer
HTML

Slide 20

Slide 20 text

.item_header{grid-area: header;} .item_nav{grid-area: nav;} .item_main{grid-area: main;} .item_sidebar{grid-area: sidebar;} .item_footer{grid-area: footer;} CSS

Slide 21

Slide 21 text

.container{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 30px 30px 30px; grid-gap: 10px; CSS

Slide 22

Slide 22 text

grid-template-areas: "header header header" "nav main sidebar" "footer footer footer”; } CSS

Slide 23

Slide 23 text

ʊਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ ಥવͷΞεΩʔΞʔτɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Y^Yʉ

Slide 24

Slide 24 text

௚ײతͰݟ΍͍͢

Slide 25

Slide 25 text

Flexible Box Layout Module ͱ CSS Grid Layout Module

Slide 26

Slide 26 text

Ͳ͕͍͍ͬͪͷ • ௚ઢతͳ഑ஔ͸Flexible Box Layout Module • ෳࡶͳ഑ஔ͸CSS Grid Layout Module

Slide 27

Slide 27 text

·ͱΊ

Slide 28

Slide 28 text

·ͱΊ • Ϟμϯϒϥ΢β͸࣮૷ࡁΈͳͷͰɺ΋͏࢖ͬ ͯେৎ෉ • ΞεΩʔΞʔτͷΑ͏ͳهड़Ͱɺཁૉͷ഑ஔ͕ ؆୯͔ͭݟ΍͍͢

Slide 29

Slide 29 text

஫ҙ • IEʹ͸ϕϯμʔϓϨϑΟοΫε͕ඞཁ • autoprefixer͕·ͩ෦෼తʹ͔͠ରԠͯ͠ͳ͍

Slide 30

Slide 30 text

͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠