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
720
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
95
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
320
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
140
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
440
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1.1k
Other Decks in Technology
See All in Technology
「Linux」という言葉が指すもの
sat
PRO
4
130
Rustから学ぶ 非同期処理の仕組み
skanehira
1
140
テストを軸にした生き残り術
kworkdev
PRO
0
200
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
440
20250913_JAWS_sysad_kobe
takuyay0ne
2
210
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
480
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
420
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
400
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
170
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
180
KotlinConf 2025_イベントレポート
sony
1
130
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
21
11k
Featured
See All Featured
Done Done
chrislema
185
16k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Bash Introduction
62gerente
615
210k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
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ϥΠϑΛ
͓͠·͍