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設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
Search
Toro_Unit (Hiroshi Urabe)
April 12, 2016
Technology
7
3k
まだ間に合う「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)
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
6.9k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
990
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9.1k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
310
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
390
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
500
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
820
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
2.9k
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
2.4k
Other Decks in Technology
See All in Technology
実例で紹介するRAG導入時の知見と精度向上の勘所
yamahiro
7
2.4k
QAエンジニアが伝えたい品質保証の羅針盤 / Compass for Quality Assurance
mii3king
1
190
コードファーストの考え方。 Amplify Gen2から学ぶAWS次世代のWeb開発体験
yoshiitaka
2
540
競技としてのKaggle、役に立つKaggle
yu4u
7
2.5k
AWS学習者向けにAzureの解説スライドを作成した話
handy
3
220
require(ESM)とECMAScript仕様
uhyo
4
1k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
37k
Microsoft Intune 勉強会 第 2 回目
tamaiyutaro
2
510
MixIT 2024 - Pulumi : Gérer son infra avec son langage de programmation préféré
ju_hnny5
1
130
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
1
1.9k
Building a RAG-poweredAI chat appwith Python and VS Code
pamelafox
0
180
Microsoft for Startups Founders Hub_20240429 update
daikikanemitsu
1
2.5k
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Code Reviewing Like a Champion
maltzj
515
39k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Six Lessons from altMBA
skipperchong
22
3k
Product Roadmaps are Hard
iamctodd
45
9.8k
How to train your dragon (web standard)
notwaldorf
75
5.2k
Embracing the Ebb and Flow
colly
80
4.2k
Documentation Writing (for coders)
carmenintech
60
4k
The Language of Interfaces
destraynor
151
23k
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