Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Basic css note for Komerco Team
Search
kenshir0f
November 09, 2018
Technology
6
8.1k
Basic css note for Komerco Team
社内向けにCSSについて聞ける会で使ったスライドです。
基本のキホンなので、簡単すぎるわ!と思ってしまうかもしれませんがご了承ください🙏
kenshir0f
November 09, 2018
Tweet
Share
More Decks by kenshir0f
See All by kenshir0f
Figma with Cookpad
kenshir0f
16
16k
How Cookpad use Figma
kenshir0f
3
880
Easy Semantic HTML Structure for Komerco Team
kenshir0f
5
6.1k
Cookpad Spring Internship 2019 Service Development Course
kenshir0f
2
1.2k
Cookpad TechConf 2019 Komerco Service Dev
kenshir0f
14
9.8k
Introduce Atomic Design with small rework
kenshir0f
3
300
Design for Behavior and Impact
kenshir0f
9
5.1k
tech-kitchen-#16-komerco-design
kenshir0f
4
5.7k
s-dev-talks#2-komerco-team-building
kenshir0f
4
910
Other Decks in Technology
See All in Technology
ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する
shuta13
3
210
Azure Well-Architected Framework入門
tomokusaba
1
130
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
14
82k
AIでデータ活用を加速させる取り組み / Leveraging AI to accelerate data utilization
okiyuki99
1
450
ソースを読む時の思考プロセスの例-MkDocs
sat
PRO
1
210
What's new in OpenShift 4.20
redhatlivestreaming
0
270
オブザーバビリティが育むシステム理解と好奇心
maruloop
2
1.3k
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
makky_tyuyan
0
130
re:Inventに行くまでにやっておきたいこと
nagisa53
0
280
SQLAlchemy の select(User).where(User.id =="123") を理解してみる/sqlalchemy deep dive
3l4l5
3
450
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
170
RemoteFunctionを使ったコロケーション
mkazutaka
1
120
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Context Engineering - Making Every Token Count
addyosmani
8
300
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Typedesign – Prime Four
hannesfritz
42
2.8k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Docker and Python
trallard
46
3.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Build your cross-platform service in a week with App Engine
jlugia
233
18k
We Have a Design System, Now What?
morganepeng
53
7.8k
Transcript
Cookpad Inc. 2018.11.09 Komercoษڧձ iOSΤϯδχΞͷͨΊͷCSSجૅ ౻Ҫݠ࢜࿕
ීஈXFCͷϑϩϯτΛ৮Βͳ͍ਓʹ͠ΌͬͨͷͰɺ جຊͷΩϗϯͷ༰ʹͳ͍ͬͯ·͢ɻ લఏ
Cookpad Inc. All Rights Reserved. ֓ཁ શ෦Ϛελʔͯ͠ΔΘ͚Ͱͳ͍ͷͱɺҧͬͯͨΒ͝ΊΜͳ͍͞ CSSͷجຊͱ͔ΫηΛܰ͘͝հ͠·͢
Cookpad Inc. All Rights Reserved. ࣍ wجຊฤ wdisplayʹ͍ͭͯ wཁૉͷࢦఆʹ͍ͭͯ wҐஔࢦఆฤ
wposition wmargin, text-align wtipsฤ
جຊฤEJTQMBZʹ͍ͭͯ
Cookpad Inc. All Rights Reserved. EJTQMBZΛΔ
Cookpad Inc. All Rights Reserved. Ұൠతͳͷछྨ CMPDL JOMJOF
Cookpad Inc. All Rights Reserved. EJTQMBZʹΑͬͯཁૉͷฒͼํ͕ҧ͏ JOMJOFԣʹ CMPDL CMPDL CMPDL
CMPDL CMPDLॎʹੵ·ΕΔ JOMJOF JOMJOF JOMJOF JOMJOF
Cookpad Inc. All Rights Reserved. EJTQMBZʹΑͬͯཁૉͷฒͼํ͕ҧ͏ CMPDL CMPDL CMPDL CMPDL
CMPDLॎʹฒͿ
Cookpad Inc. All Rights Reserved. EJTQMBZʹΑͬͯཁૉͷฒͼํ͕ҧ͏ JOMJOFԣʹฒͿ JOMJOF JOMJOF JOMJOF
JOMJOF
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
Cookpad Inc. All Rights Reserved. جຊCMPDLΛ$POUBJOFSͱͯ͠͏ CMPDL CMPDL CMPDL JOMJOF
JOMJOF CMPDL CMPDL JOMJOFʹCMPDLཁૉஔ͚ͳ͍
Cookpad Inc. All Rights Reserved. CMPDLαΠζௐ͕Ͱ͖Δ CMPDL CMPDL
Cookpad Inc. All Rights Reserved. JOMJOFαΠζௐ͕Ͱ͖ͳ͍ JOMJOF JOMJOF จࣈͷ͞େ͖͞ͰมΘΔ
Cookpad Inc. All Rights Reserved. JOMJOFͰαΠζௐ͍ͨ͠ʁʁ
Cookpad Inc. All Rights Reserved. JOMJOFCMPDLͱ͍͏ͷ͕͋Δ *OMJOFͱCMPDLͷ͍͍ײ͡ͷࢠ JOMJOFCMPDL JOMJOF CMPDL
ԣฒͼ
Cookpad Inc. All Rights Reserved. ͦͷ΄͔ͷEJTQMBZཁૉ
جຊฤཁૉͷࢦఆʹ͍ͭͯ
Cookpad Inc. All Rights Reserved. جຊ͜Ε υοτ Ϋϥε໊
Cookpad Inc. All Rights Reserved. )5.-λάʹࢦఆͰ͖Δ EJWཁૉશͯʹదԠ͞ΕΔ
Cookpad Inc. All Rights Reserved. ֯εϖʔεͰࢠཁૉશͯࢦఆͰ͖Δ DPOUBJOFSͷΫϥεͷEJWཁૉશͯʹదԠ͞ΕΔ
Cookpad Inc. All Rights Reserved. <>ΛೖΕΔͱԼͷࢠཁૉͷΈࢦఆͰ͖Δ DPOUBJOFSͷΫϥεͷEJWཁૉશͯʹదԠ͞ΕΔ
Cookpad Inc. All Rights Reserved. ٙࣅཁૉͳΜͯͷ͋Δ ʮʯͰ֯εϖʔε։͚͍ͨؾ࣋ͪզຫ͍ͯͩ͘͠͞ʙ
Cookpad Inc. All Rights Reserved. ྫ͑ϘλϯͷΠϯλϥΫγϣϯ͜Μͳײ͡Ͱॻ͚Δ
Ґஔௐฤpositionʹ͍ͭͯ
Cookpad Inc. All Rights Reserved. ϙδγϣϯͬ͘͟Γछྨ͋Δ
Cookpad Inc. All Rights Reserved. ϙδγϣϯͬ͘͟Γछྨ͋Δ ͜ͷ̎ͭΛΑ͘͏
Cookpad Inc. All Rights Reserved. QPTJUJPOBCTPMVUFʹ͍ͭͯ ී௨ʹ͏ͱ͜͏ͳΔ UPQ4QY MFGU12QY "CTPMVUF
Cookpad Inc. All Rights Reserved. $POUBJOFS# $POUBJOFS$ QPTJUJPOBCTPMVUFʹ͍ͭͯ ج४͕ͳ͍ͨΊ$POUBJOFSͷҐஔΛແࢹ͍ͯ͠Δ UPQ4QY
MFGU12QY "CTPMVUF $POUBJOFS$
Cookpad Inc. All Rights Reserved. $POUBJOFS$ $POUBJOFS# $POUBJOFS" QPTJUJPOBCTPMVUFʹ͍ͭͯ ཁૉΛSFMBUJWFͰࢦఆ͢Δͷ͕େࣄ
"CTPMVUF UPQ4QY MFGU12QY
Cookpad Inc. All Rights Reserved. ͦͷ΄͔ɺத৺ʹͦΖ͑Δͱ͖ தԝଗ͍͍͑ͩͨ͜͏Δࣄ͕ଟ͍ɻ UFYU NBSHJO UFYUBMJHO
UJQTฤ
Cookpad Inc. All Rights Reserved. $44ॳݟͩͱΑ͔͘ΒΜڍಈΛ͢Δ͜ͱ͕͋Δ ͙͙Δͱ͍͍ͩͨͰͯ͘Δ
Cookpad Inc. All Rights Reserved. ʮ$44ը૾Լͷܺؒʯ ͜Ε img style=“vertical-align: bottom;”
/>ͰղܾͰ͖Δ
Cookpad Inc. All Rights Reserved. ʮGMPBUߴ͞0ʯ GMPBU" GMPBU# ͜Ε ͍Ζ͍Ζղܾํ๏͕͋Δ
Cookpad Inc. All Rights Reserved. ʮJOMJOFCMPDLܺؒʯ *OMJOFCMPDL" JOMJOFCMPDL# ͜Ε ཁૉʹϑΥϯταΠζͰফ͑Δ͕
খཁૉʹϑΥϯταΠζࢦఆ͕ඞཁ
Cookpad Inc. All Rights Reserved. ͋ͱSPPU͕ศར มͱͯ͠ѻ͑Δ
͜ΕͰجຊͷ10%͘Β͍͔ͳʜ ҙਤ͠ͳ͍ڍಈάάΔ͔ฉ͍͍ͯͩ͘͞ʂ Α͘ΕΔ