Basic css note for Komerco Team

社内向けにCSSについて聞ける会で使ったスライドです。
基本のキホンなので、簡単すぎるわ！と思ってしまうかもしれませんがご了承ください🙏

Transcript

1. Cookpad Inc. 2018.11.09 Komercoษڧձ iOSΤϯδχΞͷͨΊͷCSSجૅ ౻Ҫ
   ݠ࢜࿕
2. ීஈXFCͷϑϩϯτΛ৮Βͳ͍ਓʹ͠Ό΂ͬͨͷͰɺ
   جຊͷΩϗϯͷ಺༰ʹͳ͍ͬͯ·͢ɻ લఏ
3. Cookpad Inc. All Rights Reserved. ֓ཁ શ෦Ϛελʔͯ͠ΔΘ͚Ͱ͸ͳ͍ͷͱɺҧͬͯͨΒ͝ΊΜͳ͍͞
   CSSͷجຊͱ͔ΫηΛܰ͘͝঺հ͠·͢
4. Cookpad Inc. All Rights Reserved. ໨࣍ wجຊฤ
   wdisplayʹ͍ͭͯ wཁૉͷࢦఆʹ͍ͭͯ
   wҐஔࢦఆฤ
   wposition
   wmargin, text-align wtipsฤ
5. جຊฤ
   EJTQMBZʹ͍ͭͯ
6. Cookpad Inc. All Rights Reserved. EJTQMBZΛ஌Δ
7. Cookpad Inc. All Rights Reserved. Ұൠతͳͷ͸छྨ CMPDL JOMJOF
8. Cookpad Inc. All Rights Reserved. EJTQMBZʹΑͬͯཁૉͷฒͼํ͕ҧ͏ JOMJOF͸ԣʹ CMPDL
    CMPDL
    CMPDL
    CMPDL
    CMPDL͸ॎʹੵ·ΕΔ JOMJOF
    JOMJOF
    JOMJOF
    JOMJOF
   
9. Cookpad Inc. All Rights Reserved. EJTQMBZʹΑͬͯཁૉͷฒͼํ͕ҧ͏ CMPDL
    CMPDL
    CMPDL
    CMPDL
    CMPDL͸ॎʹฒͿ
10. Cookpad Inc. All Rights Reserved. EJTQMBZʹΑͬͯཁૉͷฒͼํ͕ҧ͏ JOMJOF͸ԣʹฒͿ JOMJOF
     JOMJOF
     JOMJOF
     JOMJOF
    
11. 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
12. Cookpad Inc. All Rights Reserved. جຊ͸CMPDLΛ$POUBJOFSͱͯ͠࢖͏ CMPDL
     CMPDL
     CMPDL
     JOMJOF
     JOMJOF
     CMPDL
     CMPDL JOMJOF಺ʹCMPDLཁૉ͸ஔ͚ͳ͍
13. Cookpad Inc. All Rights Reserved. CMPDL͸αΠζௐ੔͕Ͱ͖Δ CMPDL
     CMPDL
    
14. Cookpad Inc. All Rights Reserved. JOMJOF͸αΠζௐ੔͕Ͱ͖ͳ͍ JOMJOF
     JOMJOF
     จࣈͷ௕͞΍େ͖͞ͰมΘΔ
15. Cookpad Inc. All Rights Reserved. JOMJOFͰαΠζௐ੔͍ͨ͠ʁʁ
16. Cookpad Inc. All Rights Reserved. JOMJOFCMPDLͱ͍͏΋ͷ͕͋Δ *OMJOF
    ͱ
    CMPDL
    ͷ͍͍ײ͡ͷࢠ JOMJOFCMPDL
     JOMJOF
    CMPDL
     ԣฒͼ
17. Cookpad Inc. All Rights Reserved. ͦͷ΄͔ͷEJTQMBZཁૉ
18. جຊฤ
    ཁૉͷࢦఆʹ͍ͭͯ
19. Cookpad Inc. All Rights Reserved. جຊ͸͜Ε υοτ
    
    Ϋϥε໊
20. Cookpad Inc. All Rights Reserved. )5.-λάʹࢦఆ΋Ͱ͖Δ EJWཁૉશͯʹదԠ͞ΕΔ
21. Cookpad Inc. All Rights Reserved. ൒֯εϖʔεͰࢠཁૉશͯࢦఆͰ͖Δ DPOUBJOFSͷΫϥε಺ͷEJWཁૉશͯʹదԠ͞ΕΔ
22. Cookpad Inc. All Rights Reserved. <>ΛೖΕΔͱ௚ԼͷࢠཁૉͷΈࢦఆͰ͖Δ DPOUBJOFSͷΫϥε಺ͷEJWཁૉશͯʹదԠ͞ΕΔ
23. Cookpad Inc. All Rights Reserved. ٙࣅཁૉͳΜͯͷ΋͋Δ ʮʯͰ൒֯εϖʔε։͚͍ͨؾ࣋ͪ͸զຫ͍ͯͩ͘͠͞ʙ
24. Cookpad Inc. All Rights Reserved. ྫ͑͹ϘλϯͷΠϯλϥΫγϣϯ͸͜Μͳײ͡Ͱॻ͚Δ
25. Ґஔௐ੔ฤ
    positionʹ͍ͭͯ
26. Cookpad Inc. All Rights Reserved. ϙδγϣϯ͸ͬ͘͟Γछྨ͋Δ
27. Cookpad Inc. All Rights Reserved. ϙδγϣϯ͸ͬ͘͟Γछྨ͋Δ ͜ͷ̎ͭΛΑ͘࢖͏
28. Cookpad Inc. All Rights Reserved. QPTJUJPO
    BCTPMVUFʹ͍ͭͯ ී௨ʹ࢖͏ͱ͜͏ͳΔ UPQ
    4QY MFGU
    12QY "CTPMVUF
29. Cookpad Inc. All Rights Reserved. $POUBJOFS
    # $POUBJOFS
    $ QPTJUJPO
    BCTPMVUFʹ͍ͭͯ ج४఺͕ͳ͍ͨΊ$POUBJOFSͷҐஔΛແࢹ͍ͯ͠Δ UPQ
    4QY MFGU
    12QY "CTPMVUF $POUBJOFS
    $
30. Cookpad Inc. All Rights Reserved. $POUBJOFS
    $ $POUBJOFS
    # $POUBJOFS
    " QPTJUJPO
    BCTPMVUFʹ͍ͭͯ ਌ཁૉΛSFMBUJWFͰࢦఆ͢Δͷ͕େࣄ "CTPMVUF UPQ
    4QY MFGU
    12QY
31. Cookpad Inc. All Rights Reserved. ͦͷ΄͔ɺத৺ʹͦΖ͑Δͱ͖ தԝଗ͑͸͍͍ͩͨ͜͏΍Δࣄ͕ଟ͍ɻ UFYU NBSHJO UFYUBMJHO
32. UJQTฤ
33. Cookpad Inc. All Rights Reserved. $44͸ॳݟͩͱΑ͘෼͔ΒΜڍಈΛ͢Δ͜ͱ͕͋Δ ͙͙Δͱ͍͍ͩͨͰͯ͘Δ
34. Cookpad Inc. All Rights Reserved. ʮ$44
    ը૾
    Լͷܺؒʯ ͜Ε img style=“vertical-align: bottom;” />ͰղܾͰ͖Δ
35. Cookpad Inc. All Rights Reserved. ʮGMPBU
    ߴ͞
    0ʯ GMPBU
    " GMPBU
    # ͜Ε ͍Ζ͍Ζղܾํ๏͕͋Δ
36. Cookpad Inc. All Rights Reserved. ʮJOMJOFCMPDL
    ܺؒʯ *OMJOFCMPDL
    " JOMJOFCMPDL
    # ͜Ε ਌ཁૉʹϑΥϯταΠζͰফ͑Δ͕
    খཁૉʹϑΥϯταΠζࢦఆ͕ඞཁ
37. Cookpad Inc. All Rights Reserved. ͋ͱ͸
    SPPU
    ͕ศར ม਺ͱͯ͠ѻ͑Δ
38. ͜ΕͰجຊͷ10%͘Β͍͔ͳʜ
 ҙਤ͠ͳ͍ڍಈ͸άάΔ͔ฉ͍͍ͯͩ͘͞ʂ
    ๻΋Α͘๨ΕΔ