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
3.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)
ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup
torounit
1
200
Cloudflare Meetup Nagano Vol.3
torounit
1
92
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.6k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.8k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
15
10k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
410
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
460
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
570
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
880
Other Decks in Technology
See All in Technology
DATA+AI SummitとSnowflake Summit: ユーザから見た共通点と相違点 / DATA+AI Summit and Snowflake Summit
nttcom
0
220
P2P通信の標準化 WebRTCを知ろう
faithandbrave
6
2.3k
データエンジニアリング 4年前と変わったこと、 4年前と変わらないこと
tanakarian
2
360
メモ整理が苦手な者による頑張らないObsidian活用術
optim
0
120
生成AIによる情報システムへのインパクト
taka_aki
1
130
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
580
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
220
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
1
220
激動の時代、新卒エンジニアはAIツールにどう向き合うか。 [LayerX Bet AI Day Countdown LT Day1 ツールの選択]
tak848
0
540
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
10
3.9k
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
3
400
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
220
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
For a Future-Friendly Web
brad_frost
179
9.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Optimizing for Happiness
mojombo
379
70k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Language of Interfaces
destraynor
158
25k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
710
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