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
100
フロントエンド開発の落とし穴 / 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
kubellが考える戦略と実行を繋ぐ活用ファーストのデータ分析基盤
kubell_hr
0
130
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
攻撃と防御で実践するプロダクトセキュリティ演習~導入パート~
recruitengineers
PRO
4
1.8k
Kubernetes における cgroup driver のしくみ: runwasi の bugfix より
z63d
2
120
PRDの正しい使い方 ~AI時代にも効く思考・対話・成長ツールとして~
techtekt
PRO
0
490
Vault meets Kubernetes
mochizuki875
0
170
実践AIガバナンス
asei
3
300
Browser
recruitengineers
PRO
8
2.2k
コスト削減の基本の「キ」~ コスト消費3大リソースへの対策 ~
smt7174
2
320
実践アプリケーション設計 ①データモデルとドメインモデル
recruitengineers
PRO
5
1.4k
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
110
異業種出身エンジニアが気づいた、転向して十数年経っても変わらない自分の武器とは
macnekoayu
0
270
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
111
20k
The Language of Interfaces
destraynor
160
25k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
510
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
800
Designing Experiences People Love
moore
142
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
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ϥΠϑΛ
͓͠·͍