Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Basic css note for Komerco Team

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

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
330
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
6
4.3k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
2
750
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
14
7.4k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
3
150
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
9
4.3k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
4
4.9k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
4
550
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
10
6.6k

Other Decks in Technology

See All in Technology
E10d51de51c08e913216385be87dc1ca?s=48 pongzu
1
280
C38fdebd15fe45a85299d6add2fb2810?s=48 blocknoisegenji
0
130
966e29b84ae7dbde170f66b0bc75b7a6?s=48 ishiayaya
PRO
1
230
D5e41f085758da619761b10b6c54e6af?s=48 chikuta
0
280
B3d52898f50eff76129f5479f51c02c3?s=48 c4yokohama
0
180
8fb8810e5e06a997bc13831b9b51007f?s=48 keinuma
0
190
E4159c65ac8decc882bfaf10088bd07e?s=48 daikimiura
5
1.7k
54bcc1069d75636cc735e72877dd30ec?s=48 taichinakamura
0
860
7e6a435700dda6cdb22105d601f20892?s=48 picardparis
4
2.5k
2b680c5f22146e764e2998dd4595ec93?s=48 sue445
0
150
D8e79ab09f15e69d600c00131bf7d2a9?s=48 yfutamura
0
410
966e29b84ae7dbde170f66b0bc75b7a6?s=48 ishiayaya
PRO
0
160

Featured

See All Featured
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
226
8.7k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
55
3.6k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
19k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
318
19k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
237
23k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
683
180k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
392
61k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
409
58k
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
25
3.2k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
8
830
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
54
2k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
12
1.8k

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