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
7.9k
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
15k
How Cookpad use Figma
kenshir0f
3
850
Easy Semantic HTML Structure for Komerco Team
kenshir0f
5
6k
Cookpad Spring Internship 2019 Service Development Course
kenshir0f
2
1.2k
Cookpad TechConf 2019 Komerco Service Dev
kenshir0f
14
9.6k
Introduce Atomic Design with small rework
kenshir0f
3
260
Design for Behavior and Impact
kenshir0f
9
5k
tech-kitchen-#16-komerco-design
kenshir0f
4
5.6k
s-dev-talks#2-komerco-team-building
kenshir0f
4
880
Other Decks in Technology
See All in Technology
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
320
偏光画像処理ライブラリを作った話
elerac
1
170
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
120
Windows の新しい管理者保護モード
murachiakira
0
200
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
140
Active Directory攻防
cryptopeg
PRO
8
5.3k
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
240
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
160
php-conference-nagoya-2025
fuwasegu
0
150
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.4k
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
210
AIエージェント入門
minorun365
PRO
30
17k
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Site-Speed That Sticks
csswizardry
4
400
YesSQL, Process and Tooling at Scale
rocio
172
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Music & Morning Musume
bryan
46
6.4k
How to Ace a Technical Interview
jacobian
276
23k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
How to train your dragon (web standard)
notwaldorf
91
5.9k
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%͘Β͍͔ͳʜ ҙਤ͠ͳ͍ڍಈάάΔ͔ฉ͍͍ͯͩ͘͞ʂ Α͘ΕΔ