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
6.3k

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
8
3.4k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
2
410
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
6
4.6k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
2
790
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
14
7.7k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
3
190
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
9
4.4k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
4
4.9k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
4
570

Other Decks in Technology

See All in Technology
00851927294532e0742c2c174730dff0?s=48 ido_kara_deru
1
110
6ddc65998177a0f05be629dc31321a8f?s=48 kken78
0
300
140494d272a4d89883a94fdfdb29dea2?s=48 oracle4engineer
PRO
0
9.4k
Ecad9d801d79f6c6e5df93094690685e?s=48 sinsoku
8
670
842515eaf8fbb2dfcc75197e7797dc15?s=48 sat
2
290
347d87fba70c3d08867844bac08d3608?s=48 kochirin
1
130
405fe9ab689473f267e2cfbd95f78c75?s=48 kyonmm
1
170
7cd783377515bdf8207062840b7b2f4e?s=48 soracom
PRO
0
220
6dc67d02d6b322ee317cece9b045317d?s=48 kalupas226
2
200
85da685d91fda190e2e3162d0de248a4?s=48 recruitengineers
4
240
C60bcac530f3b3b4d33b653ad03fbacb?s=48 aomathwift
1
860
F73cb07af91c5fe5e1e5abf0f05019bf?s=48 takanorig
0
240

Featured

See All Featured
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
3.8k
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
260
24k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
122
16k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
778
200k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
6
920
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
34
2.4k
78b475797a14c84799063c7cd073962f?s=48 holman
294
130k
245cee81a9c424266e5e401d844ea881?s=48 lara
595
62k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
253
11k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
235
18k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
364
63k

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