Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
Toro_Unit (Hiroshi Urabe)
April 12, 2016
Technology
7
2.9k
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
WP-D Week Day 2 「CSSについてLevel Up!」での発表資料です。
Toro_Unit (Hiroshi Urabe)
April 12, 2016
Tweet
Share
More Decks by Toro_Unit (Hiroshi Urabe)
See All by Toro_Unit (Hiroshi Urabe)
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
350
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
740
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
11
2.4k
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
2k
プラグインとの付き合い方 #WPmeetupkobe / 2019-08-31 Kansai WordPress Meetup Kobe vol.10
torounit
4
1.2k
プラグインとの付き合い方 #wpshinshu / 2019-08-24 Shinshu WordPress Meetup vol.15
torounit
0
160
Nuxt は簡単に SPA 作れるけど、アプリケーションが簡単に作れると思ったら大間違いだった / CaT vol.7
torounit
0
1.9k
令和時代の WordPress テーマ開発・ウェブサイト制作の勘所 #wpshinshu / 2019-07-27 Shinshu WordPress Meetup vol.14
torounit
0
160
WordPress Plugin 入門 #wpshinshu / 2019-06-22 Shinshu WordPress Meetup
torounit
2
190
Other Decks in Technology
See All in Technology
証明書って何だっけ? 〜AWSの中間CA移行に備える〜
minorun365
3
2k
Optimizing your Swift code
kateinoigakukun
0
1.3k
GraphQLスキーマ設計の勘所
yukukotani
26
5.9k
400種類のWeb APIをサポートしているデータパイプラインツールにおけるWeb APIとの共存戦略
cdataj
0
120
2022年に起きたフロントエンドの変化
sakito
28
16k
経営統合をきっかけに会社をエンジニアリングした話 / btconjp-2023
carta_engineering
0
100
ステート管理を超えるRecoil運用の考え方
uhyo
7
5.2k
OCIコンテナサービス関連の技術詳細 /oke-ocir-details
oracle4engineer
PRO
0
750
AKIBA.SaaS資料
yasumuusan
0
160
OCI DevOps 概要 / OCI DevOps overview
oracle4engineer
PRO
0
470
ROS_Japan_UG_#49_LT
maeharakeisuke
0
200
re:Invent re:Cap / AWS Lambda Updates
bulbulpaul
1
140
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
25
5.7k
Gamification - CAS2011
davidbonilla
75
4.1k
Practical Orchestrator
shlominoach
178
8.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
217
21k
Music & Morning Musume
bryan
36
4.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
254
12k
Typedesign – Prime Four
hannesfritz
34
1.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
317
22k
Six Lessons from altMBA
skipperchong
15
2.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
63k
The Mythical Team-Month
searls
210
40k
Designing on Purpose - Digital PM Summit 2013
jponch
108
5.9k
Transcript
·ͩؒʹ߹͏ʮCSSઃܭʯ͜ͱ͡Ίɻ CSSͷҋʹҿΈࠐ·Εͳ͍ͨΊͷߟ͑ํɻ 2016.4.12 @WP-D Week Day 2 2016.4.12 @WP-D Week
Day 2 1
whoami ͜͡͠ΐ͏͔͍ 2016.4.12 @WP-D Week Day 2 2
Toro_Unit ෦ ߛ (͏Β ͻΖ͠) Frontend Engineer / Web Designer
Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit WEB Site: https://torounit.com 2016.4.12 @WP-D Week Day 2 3
ݝদຊࢢͬͯͱ͜ΖͰɺ ϑϦʔϥϯεͯ͠·͢ɻ Ͱ܈അݝग़ 2016.4.12 @WP-D Week Day 2 4
Profile • WordPress ͳਓͰ͢ɻύʔϚϦϯΫͷϓϥάΠϯ࡞ͬͨΓɺ ίΞίϯτϦϏϡʔλʔʹͳͬͨΓɺ͍Ζ͍Ζͬͯ·͢ɻ • CSSབྷΈͰɺ͍͍͢WordPressͷͨΊͷCSSͷͭ͘Γ ͔ͨ ͱ͔Ͱొஃͨ͠ΓɺBasis ͱ͍͏CSSϑϨʔϜϫʔΫʹ
ϓϧϦΫΛૹΓ͚ͭͨΓͯ͠·ͨ͠ɻ 2016.4.12 @WP-D Week Day 2 5
Ͱຊɻ 2016.4.12 @WP-D Week Day 2 6
օ͞Μɺ ͜Μͳܦݧ͋Γ·ͤΜ͔ʁ 2016.4.12 @WP-D Week Day 2 7
• 1Ҏ্લʹೲͨ͠Ҋ݅ͷमਖ਼ґཔɻ • ୭͕ॻ͍ͨͷ͔ྑ͘ղΒͳ͍Ҿ͖ܧ͗Ҋ݅ɻ • 1ສߦΛ༨༟Ͱ͑ͯΔCSSɻ • ΄ͱΜͲɺίϐϖίʔυͷڰتཚɻ • ͔͠ࡉ͔͍ͱ͜Ζ͕গͣͭ͠ҧͬͯΔɻ
2016.4.12 @WP-D Week Day 2 8
ʮطଘͷCSSʁ୭͕ಡΉ͔ʂʯ 2016.4.12 @WP-D Week Day 2 9
݁Ռ 2016.4.12 @WP-D Week Day 2 10
૿৩͢ΔṖͷɺʮfix.cssʯ, ʮappend.cssʯ, ʮcustom.cssʯ, etc... 2016.4.12 @WP-D Week Day 2 11
ͦͯ͠ੜ·ΕΔ important! ͷւɻ ୭৮Εͳ͍ CSS ͷੜɻ 2016.4.12 @WP-D Week Day
2 12
2016.4.12 @WP-D Week Day 2 13
ผʹ͜Εͬͯɺ͜͜࠷ۙͷ͡Όແ͍ΑͶ ... 2016.4.12 @WP-D Week Day 2 14
ਓྨʮCSS͍͠ʂʯͱ͍͏͜ͱʹ͍͍Ճݮʹؾ͖ͮ͘ɻ 2016.4.12 @WP-D Week Day 2 15
ͦΜͳࡢࠓͰ͕͢ɺ ϚϧνσόΠεରԠɺϨεϙϯγϒͩ ͱ͔Ͱɺ·͢·͘͢͠ͳΔCSS 2016.4.12 @WP-D Week Day 2 16
• IEͷҋ͔Β͍͍Ճݮൈ͚ग़ͨ͠ͱࢥͬͨͷʹ… • ͩΕͩΑ!!! HTML/CSS؆୯ͩͱ͔ݴౕͬͨ!!! 2016.4.12 @WP-D Week Day 2
17
͍ɻ 2016.4.12 @WP-D Week Day 2 18
Q. ͰɺਓྨͲ͏ͬͯCSSͱཱͪ ͔͑ྑ͍ͷ͔ʁ 2016.4.12 @WP-D Week Day 2 19
A. ΧΦεԽ͠ͳ͍Α͏ʹCSSΛॻ͘! 2016.4.12 @WP-D Week Day 2 20
ΧΦεԽ͠ͳ͍Α͏ͳCSS • ϖʔδɾཁૉͷՃ͕؆୯ʹͰ͖Δ͜ͱɻ͋Δఔ CSS ॻ͔ ͳͯ͘ग़དྷΔΑ͏ʹ͢Δ͜ͱɻͦͦCSSΛه͠ͳ͚ ΕւԽ͠ͳ͍ɻ • อकɾσβΠϯมߋ͕؆୯ʹͰ͖Δ͜ͱɻͲ͜Λ͍͡Εྑ ͍ͷ͔͕ɺΘ͔Γ͍͢͜ͱɻෆཁͳ
CSS ͕ΓͮΒ͍ɺӨ ڹ͠ਏ͍Α͏ʹ͢ΕɺCSSͷ্ॻ͖ࠈɺimportant ࠈ ͛Δɻ 2016.4.12 @WP-D Week Day 2 21
• ਓؒʹͱͬͯಡΈ͍͢͜ͱɻͦͦɺਓ͕ؒಡΉؾʹͳ Βͳ͍ or ಡΊͳ͍ CSS ͕ւԽ͠ͳ͍Θ͚͕ͳ͍ɻͱ͍͏ ͔طʹւɻ 2016.4.12 @WP-D
Week Day 2 22
Ͳ͏ͬͯʁ 2016.4.12 @WP-D Week Day 2 23
CSS Ͱ։ൃ͢Δ্ͰͷઓུΛཱͯΔɻ 2016.4.12 @WP-D Week Day 2 24
͜ͷઓུ = ʮCSSઃܭʯ 2016.4.12 @WP-D Week Day 2 25
Google ͷΤϯδχΞͷ Philip Walton ࢯ͕͜ͷ݅ʹ͍ͭͯॻ͍ ͨهࣄ͕ͪ͜ΒɻCSS Architecture — Philip Walton
• ຊޠ൛ɿCSS Architecture 2016.4.12 @WP-D Week Day 2 26
Philip Walton ࢯͷݴ͏ྑ͍ CSS ͷ݅ͱɻ • ༧ଌ͍͢͠ (PIEͷݪଇ) • ࠶ར༻͍͢͠
(DRYݪଇ) • อक͍͢͠ / ֦ு͍͢͠ (ΦʔϓϯɾΫϩʔζυͷݪଇ) 2016.4.12 @WP-D Week Day 2 27
ͦͷͨΊʹɺ࣮ફ͍ͯ͠Δ͜ͱɻ 2016.4.12 @WP-D Week Day 2 28
1. ͪΌΜͱ OOCSS Δ 2016.4.12 @WP-D Week Day 2 29
OOCSSͷ̎େݪଇ 1. ߏͱݟͨΛɻ 2. ίϯςφͱίϯςϯπͷɻ 2016.4.12 @WP-D Week Day 2
30
ߏͱݟͨͷ 2016.4.12 @WP-D Week Day 2 31
.submit-btn { display: inline-block; padding: 10px; color: #FFF; background: #66C;
} .link-btn { display: inline-block; padding: 10px; color: #333; background: #C90; } 2016.4.12 @WP-D Week Day 2 32
͜͏͠Α͏ 2016.4.12 @WP-D Week Day 2 33
/*Ϙλϯͷߏ*/ .btn { display: inline-block; padding: 10px; } /*Ϙλϯͷݟͨ*/ .btn-submit
{ color: #FFF; background: #66C; } .btn-link { color: #333; background: #C90; } 2016.4.12 @WP-D Week Day 2 34
ߏͱݟͨͷ͢ΔϝϦοτ 1.ίʔυͷॏෳ͕ආ͚ΒΕΔɻอकੑ্͕͕Δɻ 2.֦ு͕ͱͯ༻ҙʹͳΔɻ ྫ • Bootstrap ͷ Button 2016.4.12 @WP-D
Week Day 2 35
ίϯςφͱίϯςϯπͷ <aside class="sidebar"> <div> <img class="avatar" /> </div> </aside> .sidebar
.avatar { width: 200px; border: 5px solid #FFF; box-shadow: 0 2px 3px #000; } 2016.4.12 @WP-D Week Day 2 36
͜͏͠Α͏ 2016.4.12 @WP-D Week Day 2 37
<aside class="sidebar"> <div class="sidebar-widget"> <img class="avatar" /> </div> </aside> .sidebar-widget
{ /** ίϯςφ **/ width: 200px; } .avatar { /** ίϯςϯπ **/ width: 100%; border: 5px solid #FFF; box-shadow: 0 2px 3px #000; } 2016.4.12 @WP-D Week Day 2 38
ίϯςφͱίϯςϯπͷͷϝϦοτ 1. ॴɺίϯςΩετʹґଘ͠ͳ͍ίʔυ͕૿͑Δɻ 2. ࠶ར༻͍͢͠ʂ 3. αΠυόʔͷΟδΣοτʹɺ.widget { width: 200px
} Έ͍ͨͳ CSS ͱ͔Γ͕ͪͰ͚͢ͲɺϑολʔͰ͍ͨ ͍...͚Ͳԣ෯͍͕ͯ͠अຐ…ͳΜͯͷྑ͋͘Δɻ 2016.4.12 @WP-D Week Day 2 39
OOCSSͷྫ • Bootstrap • Foundation 2016.4.12 @WP-D Week Day 2
40
OOCSSͯ͢ͷجૅͳͷͰɺ͜Ε ຊʹ͔ͬ͠Γԡ͑͞Α͏ɻ 2016.4.12 @WP-D Week Day 2 41
ৄ͘͠ຊΛಡ͏ 2016.4.12 @WP-D Week Day 2 42
2.ࣄͷΓํ 2016.4.12 @WP-D Week Day 2 43
ϖʔδɺσβΠϯΧϯϓ͝ͱʹ CSS Λ࡞Βͳ ͍ɻίϯϙʔωϯτࢦͳ CSS Λɻ • ͜ΕΛΔͱ͍͍ͩͨɺ৽نϖʔδՃͷͨͼʹ CSS Λه
͢Δࣄଶ͕ى͜Δɻ • .page-privacy Έ͍ͨͳΫϥεΛbodyΛॻ͔ͳ͍ͱͩΊͳ CSSͱ͔ɺଞͷϖʔδͰ͍͍ͨͱ͖ɺͲ͏͢Δͷʁ • ൚༻ੑͷ͋ΔύʔπΛΈ߹ΘͤͯɺHTML ΛΜͰ͍͚Δ ͷΛࢦ͢͠ɻ 2016.4.12 @WP-D Week Day 2 44
CSSཧ͢Δɻ 1. Ϧηοτɾnormalize 2. ϕʔεͷHTMLཁૉͷCSS 3. ϨΠΞτɺύʔπͳͲͷίϯϙʔωϯτͷCSS ͱ͍͏ॱʹৄࡉͷ͍ॱͰॻ͍͍ͯ͘ɻ 2016.4.12 @WP-D
Week Day 2 45
HTMLɺίϯςϯπʹґଘ͠ͳ͍ɻ • HTMLɾίϯςϯπ͕มΘͬͯมΘΒͳ͍Α͏ʹCSSઃ ܭ͢Δɻ • Ϋϥε໊ɺίϯςϯπʹґଘ͢ΔͷͰͳ͘ɺػೳʹ ର໋໊ͯ͢͠ΔɻχϡʔεΤϯτϦʔʹରͯ͠ɺ.news-entry ͱ໋໊ͯ͠ɺͦͷޙͦΕΛళฮհͰ͏͜ͱʹͳͬͨ Γɻɻɻʢ࣮ʣ 2016.4.12
@WP-D Week Day 2 46
ҰͭͷίϯϙʔωϯτͰ͍Ζ͍ΖΓա͗ͳ͍ɻ • αΠυόʔͷΟδΣοτʹɺ.widget { width: 200px } Έ͍ͨͳ CSS ͱ͔Γ͕ͪͰ͚͢ͲɺϑολʔͰ͍ͨ
͍...͚Ͳԣ෯͍͕ͯ͠अຐ…ͳΜͯͷྑ͋͘Δɻ • ཁૉͱɺϨΠΞτͷͨΊͷ CSS ͔ͬ͠ΓׂɻઈରͰ αΠζॴΛࢦఆ͍ͯ͠Δͷཁҙɻ • ίϯςφʔͱίϯςϯπͷ͔ͬ͠Γɻ 2016.4.12 @WP-D Week Day 2 47
ηϨΫλʔͷڧ͞ՄೳͳݶΓऑ͘ɻ • ID ηϨΫλΘͳ͍ʂηϨΫλʔ͕ແବʹڧ͘ͳͬͯ ! important ࠈΛҾ͖ى͜͢ɻ·ͨɺIDηϨΫλʹɺϖʔ δϦϯΫͳͲͷׂ͋ΔͷͰίϯςϯπʹґଘ͕ͪ͠ɻ • .entry-body
h1 Έ͍ͨͳ͜ͱΓ͕ͪͰ͕͢ɺ͜͏͍ͬͨ CSS͕͋ͬͨΓ͢Δͱɺh1ʹΫϥεΛͯͯ...Έ͍ͨͳͱ͖ ʹ CSS ͕ద༻͞Εͳ͍ͷτϥϒϧ͕ɻɻɻ 2016.4.12 @WP-D Week Day 2 48
ཁૉʹґଘͨ͠ηϨΫλʔΘͳ͍ɻ • .comment .title, .entry .title ͷηϨΫλʔҰݟྑͦ͞͏ͩ ͚Ͳɺ.title ʹ CSS
͕͋ͨΒͳ͍ͳΜͯอূͳ͍͠ɺ.entry ͷதʹ .comment ͕ଘࡏͨ͠߹ͱ͔ɻɻɻ.comment- title, .entry-title ɺཁૉʹґଘ͠ͳ໋໊͍େࣄɻ • SMACSSͱ͔ɺBEMΛಋೖ͢Δͱָ͔ɻ 2016.4.12 @WP-D Week Day 2 49
ػೳɺίϯϙʔωϯτ͝ͱʹϑΝΠϧׂ͢Δ • Ұຕͷ CSS ϑΝΠϧʹΰϦΰϦॻ͍͍ͯ͘ͱɺͲ͏ͯ͠Ұ ͭͷػೳΛ࣮ݱ͢ΔͨΊͷ CSS͕ࢄͨ͠Γ͕ͪ͠ɻͳͷ Ͱɺػೳ͝ͱʹ CSS ϑΝΠϧΛׂ͢͠ɻ
• ҰͭͷίϯϙʔωϯτͰ͍Ζ͍ΖΓա͗ͯͳ͍͔ʁׂ͢ ͖͔ʁͷࢦʹͳΔɻ • Θͳ͍CSSΛൃݟ͍͢͠ɻ 2016.4.12 @WP-D Week Day 2 50
ຊจͳͲͷཁૉ͔ΒCSSΛॻ͍͍ͯ͘ɻ • Ϧηοτͷ͋ͱʹॻ͘ɺHTMLཁૉͷ CSS ͦͷαΠτͷ جຊͷσβΠϯɻ͜ΕΛ·͔ͣͬ͠Γ࣮͢Δɻຊจཝ༻ ʹɺ.main-contents h2 ͷ CSS
Λॻ͘ͷ࣮֬ʹ CSS Λෳ ࡶʹ͢Δɻ 2016.4.12 @WP-D Week Day 2 51
ΈΜͳͷຊಡΜͰɺ SMACSSͱ͔FLOCSS ͱ͔Ε͍͍Α!!! 2016.4.12 @WP-D Week Day 2 52
3. ৺ߏ͑ฤ 2016.4.12 @WP-D Week Day 2 53
ڧ͍৺Λ࣋ͱ͏ɻ • CSSΏΔ;Θݴޠɻ؆୯ʹյΕΔɻҰઃܭ͕ഁ͢Δ ͱɺͦͷ CSS ͷઃܭ͕৴༻Ͱ͖ͳ͘ͳΔɻ • Ϋιίʔυͷ͠Έɺٕज़ऀͱͯ͠ͷϓϥΠυॏཁɻ • ׂΕͨ૭ͷ๏ଇɺϘʔΠεΧτͷنଇ
2016.4.12 @WP-D Week Day 2 54
҆қͳίϐϖίʔυຑༀɻ • CSS ͕ແବʹ͘ͳͬͯɺւԽ͢ΔҰ൪ͷݩڟɻ • طଘͷίϯϙʔωϯτͷ֦ுͰग़དྷͳ͍ͷ͔Λߟ͑Α͏ɻ • ίϐϖͨ͘͠ͳͬͨͱ͖ɺઃܭΛݟ͢νϟϯεɻ 2016.4.12 @WP-D
Week Day 2 55
RefactoringʂRefactoringʂRefactoringʂ • CSS Λॻ͘ͱ͖ɺσβΠϯ͕ϒϥβͰ࠶ݱͰ͖ͨʂͰऴ ΘΓʹ͠ͳ͍ɻઈରϦϑΝΫλϦϯά͢Δʂ • طଘͷίϯϙʔωϯτͷ֦ுͰग़དྷΔ͜ͱɺҰͭͷίϯϙʔ ωϯτͷׂ͕େ͖͗͢Δέʔεଟʹଘࡏ͢Δɻ • CSS
์͓ͬͯ͘ͱ͙͢ʹෳࡶոحʹͳͬͯ͠·͏ͷͰɺৗ ʹγϯϓϧͳߏʹͳΔΑ͏ʹϦϑΝΫλϦϯά͠ͳ͕Β։ ൃ͍ͯ͘͜͠ͱɻ 2016.4.12 @WP-D Week Day 2 56
υΩϡϝϯτେࣄɻ • ͤΊͯɺϑΝΠϧׂͷϧʔϧɺ໋໊نͳͲυΩϡϝϯ τʹ͢ΔɻલͷઃܭͳΜ࣮ͯ֬ʹΕΔɻ • ΦϨΦϨઃܭͱ͔Ͳ͏ͤΕΔ͠มΘΔͷͰɺSMACSSͱ͔ FLOCSSͱ͔ͪΌΜͱυΩϡϝϯτͷ͋ΔͷΛ͏ͱ͍Ζ ͍Ζָɻ 2016.4.12 @WP-D
Week Day 2 57
ϦϑΝΫλϦϯάυΩϡϝϯτຖ ճΕͳ͍߹ͦ͜ɺͪΌΜͱͨ͠ ͷΛͭͬͯ͘ɺ͍ճͦ͏ɻ ͍ͭͰʹGithubͱ͔ʹஔ͍͓͍ͯͯOSSͱ͔ʹ͓ͯ͘͠ͱ͍Ζ͍ΖͤʹͳΕΔ͔ɻ 2016.4.12 @WP-D Week Day 2 58
·ͱΊ 2016.4.12 @WP-D Week Day 2 59
CSS ͕ੜ·Εͯ20ͪΐͬͱɺςʔϒϧϨΠΞτ͔Βͷస ͕ىͬͯ͜10͘Β͍ɻ·ͩ·ͩɺ͜Ε͔ΒมΘ͍ͬͯ͘Μͩ ͱࢥ͍·͢ɻ Γɺϓϩάϥϛϯάʹ͓͚Δઃܭͷϊϋ͔ͳΓೖͬ ͖͍ͯͯΔͷͰɺษڧͯ͠ΈΔͱɺ͍Ζ͍Ζཱͭࣝɾߟ͑ ͨํ͕खʹೖΓ·͢ɻϓϩάϥϛϯά͕ղΒͳͯ͑͘Δ͜ ͱଟ͍Ͱ͢ɻ ϓϩάϥϛϯάݪଇҰཡ -
Strategic Choice ΦϒδΣΫτࢦઃܭݪଇ - Strategic Choice 2016.4.12 @WP-D Week Day 2 60
ΏΔ;Θݴޠͳ CSS ౖΓ൵͠ΈΛ֮͑Δ͜ͱ͜Ε͔Β ଟ͍ͱࢥ͍·͕͢ɺWEBσβΠϯͷѪɺΤϯδχΞͱͯ͠ͷ ϓϥΠυΛ࣋ͬͯΓӽ͍͖͑ͯ·͠ΐ͏ɻ 2016.4.12 @WP-D Week Day 2
61
͓ΘΓɻ Follow Me! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit WEB
Site: https://torounit.com 2016.4.12 @WP-D Week Day 2 62