2017/02/07 Repro Media Team LT Session
͏ҰCSSৄࡉͷΛ͠Α͏Edward Fox 2018/02/07@media-team front-end LT session
View Slide
@edwardkenfoxEdward FoxɾΤϯδχΞ@Reproגࣜձࣾɾʑͷํ͔Βདྷ·ͨ͠ɾRuby, JavaScript, AWSɾϒϥβٕज़શൠ, PWA, Vue.js
ಥવͰ͕͢Έͳ͞Μ
CSSͷৄࡉʹ͍ͭͯ
ࣗ৴Λ͔ͬͯΔͱݴ͑·͔͢ʁ
ৄࡉ #ͱ
ͲͷϓϩύςΟ͕࠷͋Δཁૉʹ͕ؔ͋Γద༻͞ΕΔ͔Λϒϥβ͕ܾఆ͢Δखஈ※MDNΑΓ
Α͏͢Δʹ
CSS =CascadingStyleSheets
ϢʔβʔΤʔδΣϯτɺΣϒαΠτ੍࡞ऀɺϢʔβ͕ͦΕͧΕఆٛͨ͠CSSͷͨΒ͢ޮՌΛॏͶ߹ΘͤΔʢΧεέʔυ͢Δʣ͜ͱ͕Ͱ͖Δ
ͭ·Γ
OOCSSͱ͔BEMͱ͔ͦ͏͍͏ઃܭख๏શ෦͜ͷCSSͷ Ϋι༷ ಛੑΛͲ͏ཧ͢Δ͔ͱ͍͏ͩͱࢥ͏
ͱ͍͏͜ͱͰ
ৄࡉΫΠζʙ
1੍ݶ࣌ؒ10ඵ
// CSS#foo { color: red; }.bar { color: blue; }// HTMLࢲͷઓಆྗ530000Ͱ͢A. ࢲͷઓಆྗ530000Ͱ͢B. ࢲͷઓಆྗ530000Ͱ͢
ਖ਼ղ…
A
// CSS#foo { color: red; }.bar { color: blue; }// HTMLࢲͷઓಆྗ530000Ͱ͢ɾclassΑΓidͷํ͕ৄࡉ্ɾ͏ͪΐ͍ิॻ͘
2੍ݶ࣌ؒ15ඵ
// CSSul li { color: red; }#must-buy { color: blue; }// HTML͓·͔͑ͯ͠͠·͕ͩࣗࢮͳͳ͍ͱͰࢥͬͯΔΜ͡Όͳ͍͔ͶʁA. ͓·͔͑ͯ͠͠·͕ͩࣗࢮͳͳ͍ͱͰࢥͬͯΔΜ͡Όͳ͍͔ͶʁB. ͓·͔͑ͯ͠͠·͕ͩࣗࢮͳͳ͍ͱͰࢥͬͯΔΜ͡Όͳ͍͔Ͷʁ
B
// CSSul li { color: red; }#must-buy { color: blue; }// HTML͓·͔͑ͯ͠͠·͕ͩࣗࢮͳͳ͍ͱͰࢥͬͯΔΜ͡Όͳ͍͔Ͷʁղઆ
3
// CSSul.shopping-list li .highlight { color: red; }ul.shopping-list li .highlight:nth-of-type(odd) { color: blue; }// HTML͟ΘɾɾɾA. ͟ΘɾɾɾB. ͟Θɾɾɾ
// CSSul.shopping-list li .highlight { color: red; }ul.shopping-list li .highlight:nth-of-type(odd) { color: blue; }// HTML͟ΘɾɾɾB. ͟Θɾɾɾղઆ
ৄࡉΛ͍͜ͳ͠ྑ͍CSSϥΠϑΛ
͓͠·͍
edwardkenfox
visional_engineering_and_design
niba1122
sbtechnight
xibuka
you5805
amarelo_n24
pauloxnet
jacopen
line_developers
takashiinui
dongjin
miura55
philhawksworth
lauravandoore
destraynor
jeffersonlam
bkeepers
sachag
chriscoyier
lara
hannesfritz
shpigford
lemiorhan
orderedlist