Cookpad Inc.
2018.11.09
Komercoษڧձ
iOSΤϯδχΞͷͨΊͷCSSجૅ
౻Ҫݠ࢜࿕
Slide 2
Slide 2 text
ීஈXFCͷϑϩϯτΛ৮Βͳ͍ਓʹ͠ΌͬͨͷͰɺ
جຊͷΩϗϯͷ༰ʹͳ͍ͬͯ·͢ɻ
લఏ
Slide 3
Slide 3 text
Cookpad Inc. All Rights Reserved.
֓ཁ
શ෦Ϛελʔͯ͠ΔΘ͚Ͱͳ͍ͷͱɺҧͬͯͨΒ͝ΊΜͳ͍͞
CSSͷجຊͱ͔ΫηΛܰ͘͝հ͠·͢
Slide 4
Slide 4 text
Cookpad Inc. All Rights Reserved.
࣍
wجຊฤ
wdisplayʹ͍ͭͯ
wཁૉͷࢦఆʹ͍ͭͯ
wҐஔࢦఆฤ
wposition
wmargin, text-align
wtipsฤ
Slide 5
Slide 5 text
جຊฤEJTQMBZʹ͍ͭͯ
Slide 6
Slide 6 text
Cookpad Inc. All Rights Reserved.
EJTQMBZΛΔ
Slide 7
Slide 7 text
Cookpad Inc. All Rights Reserved.
Ұൠతͳͷछྨ
CMPDL JOMJOF
Slide 8
Slide 8 text
Cookpad Inc. All Rights Reserved.
EJTQMBZʹΑͬͯཁૉͷฒͼํ͕ҧ͏
JOMJOFԣʹ
CMPDL
CMPDL
CMPDL
CMPDL
CMPDLॎʹੵ·ΕΔ
JOMJOF JOMJOF JOMJOF JOMJOF
Slide 9
Slide 9 text
Cookpad Inc. All Rights Reserved.
EJTQMBZʹΑͬͯཁૉͷฒͼํ͕ҧ͏
CMPDL
CMPDL
CMPDL
CMPDL
CMPDLॎʹฒͿ
Slide 10
Slide 10 text
Cookpad Inc. All Rights Reserved.
EJTQMBZʹΑͬͯཁૉͷฒͼํ͕ҧ͏
JOMJOFԣʹฒͿ
JOMJOF JOMJOF JOMJOF JOMJOF
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
Cookpad Inc. All Rights Reserved.
جຊCMPDLΛ$POUBJOFSͱͯ͠͏
CMPDL
CMPDL
CMPDL
JOMJOF JOMJOF
CMPDL
CMPDL
JOMJOFʹCMPDLཁૉஔ͚ͳ͍
Slide 13
Slide 13 text
Cookpad Inc. All Rights Reserved.
CMPDLαΠζௐ͕Ͱ͖Δ
CMPDL
CMPDL
Slide 14
Slide 14 text
Cookpad Inc. All Rights Reserved.
JOMJOFαΠζௐ͕Ͱ͖ͳ͍
JOMJOF JOMJOF
จࣈͷ͞େ͖͞ͰมΘΔ
Slide 15
Slide 15 text
Cookpad Inc. All Rights Reserved.
JOMJOFͰαΠζௐ͍ͨ͠ʁʁ
Slide 16
Slide 16 text
Cookpad Inc. All Rights Reserved.
JOMJOFCMPDLͱ͍͏ͷ͕͋Δ
*OMJOFͱCMPDLͷ͍͍ײ͡ͷࢠ
JOMJOFCMPDL
JOMJOF
CMPDL
ԣฒͼ
Slide 17
Slide 17 text
Cookpad Inc. All Rights Reserved.
ͦͷ΄͔ͷEJTQMBZཁૉ
Slide 18
Slide 18 text
جຊฤཁૉͷࢦఆʹ͍ͭͯ
Slide 19
Slide 19 text
Cookpad Inc. All Rights Reserved.
جຊ͜Ε
υοτΫϥε໊
Slide 20
Slide 20 text
Cookpad Inc. All Rights Reserved.
)5.-λάʹࢦఆͰ͖Δ
EJWཁૉશͯʹదԠ͞ΕΔ
Slide 21
Slide 21 text
Cookpad Inc. All Rights Reserved.
֯εϖʔεͰࢠཁૉશͯࢦఆͰ͖Δ
DPOUBJOFSͷΫϥεͷEJWཁૉશͯʹదԠ͞ΕΔ
Slide 22
Slide 22 text
Cookpad Inc. All Rights Reserved.
<>ΛೖΕΔͱԼͷࢠཁૉͷΈࢦఆͰ͖Δ
DPOUBJOFSͷΫϥεͷEJWཁૉશͯʹదԠ͞ΕΔ
Slide 23
Slide 23 text
Cookpad Inc. All Rights Reserved.
ٙࣅཁૉͳΜͯͷ͋Δ
ʮʯͰ֯εϖʔε։͚͍ͨؾ࣋ͪզຫ͍ͯͩ͘͠͞ʙ
Slide 24
Slide 24 text
Cookpad Inc. All Rights Reserved.
ྫ͑ϘλϯͷΠϯλϥΫγϣϯ͜Μͳײ͡Ͱॻ͚Δ
Slide 25
Slide 25 text
Ґஔௐฤpositionʹ͍ͭͯ
Slide 26
Slide 26 text
Cookpad Inc. All Rights Reserved.
ϙδγϣϯͬ͘͟Γछྨ͋Δ
Slide 27
Slide 27 text
Cookpad Inc. All Rights Reserved.
ϙδγϣϯͬ͘͟Γछྨ͋Δ
͜ͷ̎ͭΛΑ͘͏
Slide 28
Slide 28 text
Cookpad Inc. All Rights Reserved.
QPTJUJPOBCTPMVUFʹ͍ͭͯ
ී௨ʹ͏ͱ͜͏ͳΔ
UPQ4QY
MFGU12QY
"CTPMVUF
Slide 29
Slide 29 text
Cookpad Inc. All Rights Reserved.
$POUBJOFS#
$POUBJOFS$
QPTJUJPOBCTPMVUFʹ͍ͭͯ
ج४͕ͳ͍ͨΊ$POUBJOFSͷҐஔΛແࢹ͍ͯ͠Δ
UPQ4QY
MFGU12QY
"CTPMVUF
$POUBJOFS$
Slide 30
Slide 30 text
Cookpad Inc. All Rights Reserved.
$POUBJOFS$
$POUBJOFS#
$POUBJOFS"
QPTJUJPOBCTPMVUFʹ͍ͭͯ
ཁૉΛSFMBUJWFͰࢦఆ͢Δͷ͕େࣄ
"CTPMVUF
UPQ4QY
MFGU12QY
Slide 31
Slide 31 text
Cookpad Inc. All Rights Reserved.
ͦͷ΄͔ɺத৺ʹͦΖ͑Δͱ͖
தԝଗ͍͍͑ͩͨ͜͏Δࣄ͕ଟ͍ɻ
UFYU
NBSHJO
UFYUBMJHO
Slide 32
Slide 32 text
UJQTฤ
Slide 33
Slide 33 text
Cookpad Inc. All Rights Reserved.
$44ॳݟͩͱΑ͔͘ΒΜڍಈΛ͢Δ͜ͱ͕͋Δ
͙͙Δͱ͍͍ͩͨͰͯ͘Δ
Slide 34
Slide 34 text
Cookpad Inc. All Rights Reserved.
ʮ$44ը૾Լͷܺؒʯ
͜Ε
img style=“vertical-align: bottom;” />ͰղܾͰ͖Δ
Slide 35
Slide 35 text
Cookpad Inc. All Rights Reserved.
ʮGMPBUߴ͞0ʯ
GMPBU" GMPBU#
͜Ε
͍Ζ͍Ζղܾํ๏͕͋Δ
Slide 36
Slide 36 text
Cookpad Inc. All Rights Reserved.
ʮJOMJOFCMPDLܺؒʯ
*OMJOFCMPDL" JOMJOFCMPDL#
͜Ε
ཁૉʹϑΥϯταΠζͰফ͑Δ͕
খཁૉʹϑΥϯταΠζࢦఆ͕ඞཁ
Slide 37
Slide 37 text
Cookpad Inc. All Rights Reserved.
͋ͱSPPU͕ศར
มͱͯ͠ѻ͑Δ