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
740
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
99
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
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
200
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.5k
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
0
220
CoRL 2025 Survey
harukiabe
1
200
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
150
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
210
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
340
Digitization部 紹介資料
sansan33
PRO
1
5.5k
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
290
『バイトル』CTOが語る! AIネイティブ世代と切り拓くモノづくり組織
dip_tech
PRO
1
130
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
240
AgentCon Accra: Ctrl + Alt + Assist: AI Agents Edition
bethany
0
110
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Site-Speed That Sticks
csswizardry
12
900
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
We Have a Design System, Now What?
morganepeng
53
7.8k
Become a Pro
speakerdeck
PRO
29
5.5k
What's in a price? How to price your products and services
michaelherold
246
12k
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ϥΠϑΛ
͓͠·͍