Basic css note for Komerco Team

6d74b5edd1571a5cf7ecfec9c694f26b?s=47 kenshir0f
November 09, 2018

Basic css note for Komerco Team

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

6d74b5edd1571a5cf7ecfec9c694f26b?s=128

kenshir0f

November 09, 2018
Tweet

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. QPTJUJPOBCTPMVUFʹ͍ͭͯ ී௨ʹ࢖͏ͱ͜͏ͳΔ UPQ4QY MFGU12QY "CTPMVUF

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

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

    "CTPMVUF UPQ4QY MFGU12QY
  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%͘Β͍͔ͳʜ
 ҙਤ͠ͳ͍ڍಈ͸άάΔ͔ฉ͍͍ͯͩ͘͞ʂ ๻΋Α͘๨ΕΔ