Basic css note for Komerco Team - Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

Cookpad Inc. 2018.11.09 Komercoษڧձ iOSΤϯδχΞͷͨΊͷCSSجૅ ౻Ҫݠ࢜࿕

Slide 2

Slide 2 text

ීஈXFCͷϑϩϯτΛ৮Βͳ͍ਓʹ͠Ό΂ͬͨͷͰɺ جຊͷΩϗϯͷ಺༰ʹͳ͍ͬͯ·͢ɻ લఏ

Slide 3

Slide 3 text

Cookpad Inc. All Rights Reserved. ֓ཁ શ෦Ϛελʔͯ͠ΔΘ͚Ͱ͸ͳ͍ͷͱɺҧͬͯͨΒ͝ΊΜͳ͍͞ CSSͷجຊͱ͔ΫηΛܰ͘͝঺հ͠·͢

Slide 4

Slide 4 text

Cookpad Inc. All Rights Reserved. ໨࣍ wجຊฤ wdisplayʹ͍ͭͯ wཁૉͷࢦఆʹ͍ͭͯ wҐஔࢦఆฤ wposition wmargin, text-align wtipsฤ

Slide 5

Slide 5 text

جຊฤEJTQMBZʹ͍ͭͯ

Slide 6

Slide 6 text

Cookpad Inc. All Rights Reserved. EJTQMBZΛ஌Δ

Slide 7

Slide 7 text

Cookpad Inc. All Rights Reserved. Ұൠతͳͷ͸छྨ CMPDL JOMJOF

Slide 8

Slide 8 text

Cookpad Inc. All Rights Reserved. EJTQMBZʹΑͬͯཁૉͷฒͼํ͕ҧ͏ JOMJOF͸ԣʹ CMPDL CMPDL CMPDL CMPDL CMPDL͸ॎʹੵ·ΕΔ JOMJOF JOMJOF JOMJOF JOMJOF

Slide 9

Slide 9 text

Cookpad Inc. All Rights Reserved. EJTQMBZʹΑͬͯཁૉͷฒͼํ͕ҧ͏ CMPDL CMPDL CMPDL CMPDL CMPDL͸ॎʹฒͿ

Slide 10

Slide 10 text

Cookpad Inc. All Rights Reserved. EJTQMBZʹΑͬͯཁૉͷฒͼํ͕ҧ͏ JOMJOF͸ԣʹฒͿ JOMJOF JOMJOF JOMJOF JOMJOF

Slide 11

Slide 11 text

Cookpad Inc. All Rights Reserved. )5.-λάʹΑͬͯEJTQMBZͷॳظ஋͕ҧ͏ CMPDL JOMJOF div ୅දతͳ΍͚ͭͩ p, h1, h2, h3, … , h6 ul, ol, li form a, button img span input, label, textarea, small

Slide 12

Slide 12 text

Cookpad Inc. All Rights Reserved. جຊ͸CMPDLΛ$POUBJOFSͱͯ͠࢖͏ CMPDL CMPDL CMPDL JOMJOF JOMJOF CMPDL CMPDL JOMJOF಺ʹCMPDLཁૉ͸ஔ͚ͳ͍

Slide 13

Slide 13 text

Cookpad Inc. All Rights Reserved. CMPDL͸αΠζௐ੔͕Ͱ͖Δ CMPDL CMPDL

Slide 14

Slide 14 text

Cookpad Inc. All Rights Reserved. JOMJOF͸αΠζௐ੔͕Ͱ͖ͳ͍ JOMJOF JOMJOF จࣈͷ௕͞΍େ͖͞ͰมΘΔ

Slide 15

Slide 15 text

Cookpad Inc. All Rights Reserved. JOMJOFͰαΠζௐ੔͍ͨ͠ʁʁ

Slide 16

Slide 16 text

Cookpad Inc. All Rights Reserved. JOMJOFCMPDLͱ͍͏΋ͷ͕͋Δ *OMJOFͱCMPDLͷ͍͍ײ͡ͷࢠ JOMJOFCMPDL JOMJOF CMPDL ԣฒͼ

Slide 17

Slide 17 text

Cookpad Inc. All Rights Reserved. ͦͷ΄͔ͷEJTQMBZཁૉ

Slide 18

Slide 18 text

جຊฤཁૉͷࢦఆʹ͍ͭͯ

Slide 19

Slide 19 text

Cookpad Inc. All Rights Reserved. جຊ͸͜Ε υοτΫϥε໊

Slide 20

Slide 20 text

Cookpad Inc. All Rights Reserved. )5.-λάʹࢦఆ΋Ͱ͖Δ EJWཁૉશͯʹదԠ͞ΕΔ

Slide 21

Slide 21 text

Cookpad Inc. All Rights Reserved. ൒֯εϖʔεͰࢠཁૉશͯࢦఆͰ͖Δ DPOUBJOFSͷΫϥε಺ͷEJWཁૉશͯʹదԠ͞ΕΔ

Slide 22

Slide 22 text

Cookpad Inc. All Rights Reserved. <>ΛೖΕΔͱ௚ԼͷࢠཁૉͷΈࢦఆͰ͖Δ DPOUBJOFSͷΫϥε಺ͷEJWཁૉશͯʹదԠ͞ΕΔ

Slide 23

Slide 23 text

Cookpad Inc. All Rights Reserved. ٙࣅཁૉͳΜͯͷ΋͋Δ ʮʯͰ൒֯εϖʔε։͚͍ͨؾ࣋ͪ͸զຫ͍ͯͩ͘͠͞ʙ

Slide 24

Slide 24 text

Cookpad Inc. All Rights Reserved. ྫ͑͹ϘλϯͷΠϯλϥΫγϣϯ͸͜Μͳײ͡Ͱॻ͚Δ

Slide 25

Slide 25 text

Ґஔௐ੔ฤpositionʹ͍ͭͯ

Slide 26

Slide 26 text

Cookpad Inc. All Rights Reserved. ϙδγϣϯ͸ͬ͘͟Γछྨ͋Δ

Slide 27

Slide 27 text

Cookpad Inc. All Rights Reserved. ϙδγϣϯ͸ͬ͘͟Γछྨ͋Δ ͜ͷ̎ͭΛΑ͘࢖͏

Slide 28

Slide 28 text

Cookpad Inc. All Rights Reserved. QPTJUJPOBCTPMVUFʹ͍ͭͯ ී௨ʹ࢖͏ͱ͜͏ͳΔ UPQ4QY MFGU12QY "CTPMVUF

Slide 29

Slide 29 text

Cookpad Inc. All Rights Reserved. $POUBJOFS# $POUBJOFS$ QPTJUJPOBCTPMVUFʹ͍ͭͯ ج४఺͕ͳ͍ͨΊ$POUBJOFSͷҐஔΛແࢹ͍ͯ͠Δ UPQ4QY MFGU12QY "CTPMVUF $POUBJOFS$

Slide 30

Slide 30 text

Cookpad Inc. All Rights Reserved. $POUBJOFS$ $POUBJOFS# $POUBJOFS" QPTJUJPOBCTPMVUFʹ͍ͭͯ ਌ཁૉΛSFMBUJWFͰࢦఆ͢Δͷ͕େࣄ "CTPMVUF UPQ4QY MFGU12QY

Slide 31

Slide 31 text

Cookpad Inc. All Rights Reserved. ͦͷ΄͔ɺத৺ʹͦΖ͑Δͱ͖ தԝଗ͑͸͍͍ͩͨ͜͏΍Δࣄ͕ଟ͍ɻ UFYU NBSHJO UFYUBMJHO

Slide 32

Slide 32 text

UJQTฤ

Slide 33

Slide 33 text

Cookpad Inc. All Rights Reserved. $44͸ॳݟͩͱΑ͘෼͔ΒΜڍಈΛ͢Δ͜ͱ͕͋Δ ͙͙Δͱ͍͍ͩͨͰͯ͘Δ

Slide 34

Slide 34 text

Cookpad Inc. All Rights Reserved. ʮ$44ը૾Լͷܺؒʯ ͜Ε img style=“vertical-align: bottom;” />ͰղܾͰ͖Δ

Slide 35

Slide 35 text

Cookpad Inc. All Rights Reserved. ʮGMPBUߴ͞0ʯ GMPBU" GMPBU# ͜Ε ͍Ζ͍Ζղܾํ๏͕͋Δ

Slide 36

Slide 36 text

Cookpad Inc. All Rights Reserved. ʮJOMJOFCMPDLܺؒʯ *OMJOFCMPDL" JOMJOFCMPDL# ͜Ε ਌ཁૉʹϑΥϯταΠζͰফ͑Δ͕ খཁૉʹϑΥϯταΠζࢦఆ͕ඞཁ

Slide 37

Slide 37 text

Cookpad Inc. All Rights Reserved. ͋ͱ͸SPPU͕ศར ม਺ͱͯ͠ѻ͑Δ

Slide 38

Slide 38 text

͜ΕͰجຊͷ10%͘Β͍͔ͳʜ  ҙਤ͠ͳ͍ڍಈ͸άάΔ͔ฉ͍͍ͯͩ͘͞ʂ ๻΋Α͘๨ΕΔ