Basic css note for Komerco Team

6d74b5edd1571a5cf7ecfec9c694f26b?s=47 kenshir0f
November 09, 2018
Technology
6
5k

Basic css note for Komerco Team

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

6d74b5edd1571a5cf7ecfec9c694f26b?s=128

kenshir0f

November 09, 2018
Tweet

More Decks by kenshir0f

See All by kenshir0f
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
2
280
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
6
3.6k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
2
660
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
14
6.7k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
3
140
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
9
4.2k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
4
4.7k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
4
520
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
10
6.1k

Other Decks in Technology

See All in Technology
2cf373725ded741824c50fd571eda6e1?s=48 udzura
0
250
Bc1e4b3a33fe6718f50285d1c1f53feb?s=48 koudaiii
1
270
66fabad28b40a99387ab582cd0e94a2d?s=48 hiromaaa03
1
100
Ecad9d801d79f6c6e5df93094690685e?s=48 sinsoku
6
850
B1cc148711c6a37a5c922b6e72a4ad52?s=48 upura
1
870
7e6a435700dda6cdb22105d601f20892?s=48 picardparis
4
1.9k
44b799f91cc48e38c5fe9f5d9c5ecc61?s=48 takaichi00
28
11k
Ca7e4f1680e175e6462a039923e71fc5?s=48 kyokonishito
0
160
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
2
230
18f1e3993e9ead63e7a0f70d9eb996bb?s=48 wkm2
0
120
F098812e012aee9cadc37e398c193d1c?s=48 tsukaman
1
150
88f4e84b94fe07cddbd9e6479d689192?s=48 soudai
0
260

Featured

See All Featured
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
60
2.4k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
283
110k
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
175
14k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
222
46k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
105
9.4k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
203
6.6k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
257
16k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
497
36k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
606
53k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
366
42k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
308
21k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
70
3.3k

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