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
8k
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
870
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.7k
Introduce Atomic Design with small rework
kenshir0f
3
280
Design for Behavior and Impact
kenshir0f
9
5k
tech-kitchen-#16-komerco-design
kenshir0f
4
5.7k
s-dev-talks#2-komerco-team-building
kenshir0f
4
900
Other Decks in Technology
See All in Technology
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
780
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
830
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
iotcomjpadmin
0
140
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
2
990
本部長の代わりに提案書レビュー! KDDI営業が毎日使うAIエージェント「A-BOSS」開発秘話
minorun365
PRO
14
2.3k
VCpp Link and Library - C++ breaktime 2025 Summer
harukasao
0
220
IIWレポートからみるID業界で話題のMCP
fujie
0
700
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
140
TerraformをSaaSで使うとAzureの運用がこんなに楽ちん!HCP Terraformって何?
mnakabayashi
0
300
Welcome to the LLM Club
koic
0
130
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
2
1.6k
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
160
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
299
21k
A designer walks into a library…
pauljervisheath
206
24k
Thoughts on Productivity
jonyablonski
69
4.7k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
480
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Invisible Side of Design
smashingmag
299
51k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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%͘Β͍͔ͳʜ ҙਤ͠ͳ͍ڍಈάάΔ͔ฉ͍͍ͯͩ͘͞ʂ Α͘ΕΔ