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
AIエージェント入門
minorun365
PRO
32
18k
事業を差別化する技術を生み出す技術
pyama86
2
110
Share my, our lessons from the road to re:Invent
naospon
0
150
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
180
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
2
240
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
530
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
2.9k
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
270
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
740
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
150
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
8
1.4k
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
160
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Site-Speed That Sticks
csswizardry
4
410
How to Ace a Technical Interview
jacobian
276
23k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Building Adaptive Systems
keathley
40
2.4k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
990
Documentation Writing (for coders)
carmenintech
67
4.6k
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%͘Β͍͔ͳʜ ҙਤ͠ͳ͍ڍಈάάΔ͔ฉ͍͍ͯͩ͘͞ʂ Α͘ΕΔ