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
もういちどCSS詳細度の話をしよう
Search
Edward Fox
February 07, 2018
Technology
0
39
もういちどCSS詳細度の話をしよう
2017/02/07 Repro Media Team LT Session
Edward Fox
February 07, 2018
Tweet
Share
More Decks by Edward Fox
See All by Edward Fox
Priorityを制するものはローディングを制す
edwardkenfox
4
730
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
97
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
580
Repro basketball club
edwardkenfox
0
240
Introduction to UX Optimizer
edwardkenfox
0
110
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
330
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
140
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
450
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1.1k
Other Decks in Technology
See All in Technology
about #74462 go/token#FileSet
tomtwinkle
1
260
PyCon JP 2025 DAY1 「Hello, satellite data! ~Pythonではじめる衛星データ解析~」
ra0kley
0
730
Go Conference 2025: GoのinterfaceとGenericsの内部構造と進化 / Go type system internals
ryokotmng
3
530
バイブコーディングと継続的デプロイメント
nwiizo
2
350
Sidekiq その前に:Webアプリケーションにおける非同期ジョブ設計原則
morihirok
17
6.2k
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3k
stupid jj tricks
indirect
0
7.5k
VCC 2025 Write-up
bata_24
0
140
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
750
コンテキストエンジニアリングとは? 考え方と応用方法
findy_eventslides
4
810
pprof vs runtime/trace (FlightRecorder)
task4233
0
140
analysis パッケージの仕組みの上でMulti linter with configを実現する / Go Conference 2025
k1low
1
240
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Code Reviewing Like a Champion
maltzj
525
40k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Faster Mobile Websites
deanohume
310
31k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Practical Orchestrator
shlominoach
190
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
560
Navigating Team Friction
lara
189
15k
It's Worth the Effort
3n
187
28k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Transcript
͏Ұ CSSৄࡉͷ Λ͠Α͏ Edward Fox 2018/02/07 @media-team front-end LT session
@edwardkenfox Edward Fox ɾΤϯδχΞ@Reproגࣜձࣾ ɾʑͷํ͔Βདྷ·ͨ͠ ɾRuby, JavaScript, AWS ɾϒϥβٕज़શൠ, PWA,
Vue.js
ಥવͰ͕͢Έͳ͞Μ
CSSͷৄࡉʹ͍ͭͯ
ࣗ৴Λ͔ͬͯΔͱ ݴ͑·͔͢ʁ
ৄࡉ #ͱ
ͲͷϓϩύςΟ͕࠷ ͋Δཁૉʹ͕ؔ͋Γ ద༻͞ΕΔ͔Λ ϒϥβ͕ܾఆ͢Δखஈ ※MDNΑΓ
Α͏͢Δʹ
None
CSS = Cascading Style Sheets
ϢʔβʔΤʔδΣϯτɺΣ ϒαΠτ੍࡞ऀɺϢʔβ͕ ͦΕͧΕఆٛͨ͠CSSͷ ͨΒ͢ޮՌΛॏͶ߹ΘͤΔ ʢΧεέʔυ͢Δʣ͜ͱ͕ Ͱ͖Δ
ͭ·Γ
None
OOCSSͱ͔BEMͱ͔ ͦ͏͍͏ઃܭख๏શ෦ ͜ͷCSSͷ Ϋι༷ ಛੑ ΛͲ͏ཧ͢Δ͔ ͱ͍͏ͩͱࢥ͏
ͱ͍͏͜ͱͰ
ৄࡉΫΠζʙ
None
1 ੍ݶ࣌ؒ10ඵ
// CSS #foo { color: red; } .bar { color:
blue; } // HTML <p id="foo" class="bar">ࢲͷઓಆྗ530000Ͱ͢</p> A. ࢲͷઓಆྗ530000Ͱ͢ B. ࢲͷઓಆྗ530000Ͱ͢
ਖ਼ղ…
A
// CSS #foo { color: red; } .bar { color:
blue; } // HTML <p id="foo" class="bar">ࢲͷઓಆྗ530000Ͱ͢</p> ɾclassΑΓidͷํ͕ৄࡉ্ ɾ͏ͪΐ͍ิॻ͘
2 ੍ݶ࣌ؒ15ඵ
// CSS ul li { color: red; } #must-buy {
color: blue; } // HTML <ul> <li id=“must-buy"> <span>͓·͔͑ͯ͠͠·͕ͩࣗࢮͳͳ͍ͱͰࢥͬͯΔΜ͡Όͳ͍͔Ͷʁ</span> </li> </ul> A. ͓·͔͑ͯ͠͠·͕ͩࣗࢮͳͳ͍ͱͰࢥͬͯΔ Μ͡Όͳ͍͔Ͷʁ B. ͓·͔͑ͯ͠͠·͕ͩࣗࢮͳͳ͍ͱͰࢥͬͯΔ Μ͡Όͳ͍͔Ͷʁ
ਖ਼ղ…
B
// CSS ul li { color: red; } #must-buy {
color: blue; } // HTML <ul> <li id=“must-buy"> <span>͓·͔͑ͯ͠͠·͕ͩࣗࢮͳͳ͍ͱͰࢥͬͯΔΜ͡Όͳ͍͔Ͷʁ</span> </li> </ul> ղઆ
3
// CSS ul.shopping-list li .highlight { color: red; } ul.shopping-list
li .highlight:nth-of-type(odd) { color: blue; } // HTML <ul class="shopping-list"> <li><span class=“highlight">͟Θɾɾɾ</span></li> </ul> A. ͟Θɾɾɾ B. ͟Θɾɾɾ
ਖ਼ղ…
B
// CSS ul.shopping-list li .highlight { color: red; } ul.shopping-list
li .highlight:nth-of-type(odd) { color: blue; } // HTML <ul class="shopping-list"> <li><span class=“highlight">͟Θɾɾɾ</span></li> </ul> B. ͟Θɾɾɾ ղઆ
ͱ͍͏͜ͱͰ
ৄࡉΛ͍͜ͳ͠ ྑ͍CSSϥΠϑΛ
͓͠·͍