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
700
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
90
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
570
Repro basketball club
edwardkenfox
0
240
Introduction to UX Optimizer
edwardkenfox
0
98
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
310
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
130
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
430
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1.1k
Other Decks in Technology
See All in Technology
推し書籍📚 / Books and a QA Engineer
ak1210
0
120
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
2
1.3k
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
3
570
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
720
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
710
LLM時代の検索
shibuiwilliam
2
620
TableauLangchainとは何か?
cielo1985
1
140
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4.1k
大量配信システムにおけるSLOの実践:「見えない」信頼性をSLOで可視化
plaidtech
PRO
0
260
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
860
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
520
オフィスビルを監視しよう:フィジカル×デジタルにまたがるSLI/SLO設計と運用の難しさ / Monitoring Office Buildings: The Challenge of Physical-Digital SLI/SLO Design & Operation
bitkey
1
290
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
Navigating Team Friction
lara
187
15k
GitHub's CSS Performance
jonrohan
1031
460k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Facilitating Awesome Meetings
lara
54
6.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
KATA
mclloyd
30
14k
Building an army of robots
kneath
306
45k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
It's Worth the Effort
3n
185
28k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
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ϥΠϑΛ
͓͠·͍