Pro Yearly is on sale from $80 to $50! »

Basic css note for Komerco Team

6d74b5edd1571a5cf7ecfec9c694f26b?s=47 kenshir0f
November 09, 2018
Technology
6
5.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
310
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
6
4k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
2
690
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
14
7.1k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
3
140
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
9
4.2k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
4
4.8k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
4
540
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
10
6.2k

Other Decks in Technology

See All in Technology
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
310
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
910
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
130
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
120
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
110
A6005d14224831116d088d2240df1990?s=48 yoshitake_1201
0
110
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
110
4b2f3a64637b51e81813accbe8a98083?s=48 miura55
0
160
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
440
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
140
48428c90f3e74a0a0f7a51ea72bed332?s=48 gundama01
0
110
38f77168b7c5802adc9cc3a5cfcf031b?s=48 niharika28
0
280

Featured

See All Featured
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
13
940
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
168
7k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
52
2.7k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
85
8.4k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
10
950
9128d500301ae51524e887bb680f471d?s=48 caitiem20
306
17k
79acae287842acf29084005533a7fb3b?s=48 hursman
105
9.2k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
192
8.7k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
268
16k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
282
46k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
84
7.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%͘Β͍͔ͳʜ
 ҙਤ͠ͳ͍ڍಈ͸άάΔ͔ฉ͍͍ͯͩ͘͞ʂ ๻΋Α͘๨ΕΔ