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
840
Easy Semantic HTML Structure for Komerco Team
kenshir0f
5
6k
Cookpad Spring Internship 2019 Service Development Course
kenshir0f
2
1.1k
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
RubyでKubernetesプログラミング
sat
PRO
4
160
2025年のARグラスの潮流
kotauchisunsun
0
800
データ基盤におけるIaCの重要性とその運用
mtpooh
4
530
GoogleのAIエージェント論 Authors: Julia Wiesinger, Patrick Marlow and Vladimir Vuskovic
customercloud
PRO
0
160
新卒1年目、はじめてのアプリケーションサーバー【IBM WebSphere Liberty】
ktgrryt
0
130
Building Scalable Backend Services with Firebase
wisdommatt
0
110
EMConf JP の楽しみ方 / How to enjoy EMConf JP
pauli
2
150
[IBM TechXchange Dojo]Watson Discoveryとwatsonx.aiでRAGを実現!事例のご紹介+座学②
siyuanzh09
0
110
2025年に挑戦したいこと
molmolken
0
160
AIアプリケーション開発でAzure AI Searchを使いこなすためには
isidaitc
1
120
Copilotの力を実感!3ヶ月間の生成AI研修の試行錯誤&成功事例をご紹介。果たして得たものとは・・?
ktc_shiori
0
350
シフトライトなテスト活動を適切に行うことで、無理な開発をせず、過剰にテストせず、顧客をビックリさせないプロダクトを作り上げているお話 #RSGT2025 / Shift Right
nihonbuson
3
2.2k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
133
9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
3
360
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Building Your Own Lightsaber
phodgson
104
6.2k
Building Adaptive Systems
keathley
38
2.4k
Six Lessons from altMBA
skipperchong
27
3.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
192
16k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
870
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%͘Β͍͔ͳʜ ҙਤ͠ͳ͍ڍಈάάΔ͔ฉ͍͍ͯͩ͘͞ʂ Α͘ΕΔ