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
Toro_Unit (Hiroshi Urabe)
August 19, 2016
Technology
6
1.3k
CSS 設計ことはじめ
2016.08.19 イドバタ会議#2 にて発表したスライドです。
Toro_Unit (Hiroshi Urabe)
August 19, 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
7.2k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.4k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9.5k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
360
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
400
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
520
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
830
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.1k
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
2.6k
Other Decks in Technology
See All in Technology
Covariance, Contravariance & Diamond
alexdaubois
1
120
まだ間に合う! 生成AIトレンド一挙おさらい & AWSのBedrockに入門しよう
minorun365
PRO
4
370
自然言語処理を役立てるのはなぜ難しいのか
pfn
PRO
17
4.6k
Brakeman を欺く - Kashiwa.rb #4
kozy4324
1
110
GPSデバイスを使った簡易位置案内システムの構築をしてみた話。/jawsfesta2024
kwada
0
240
Measuring the Success of Developer Experience
nikokivela
2
120
いまいまMySQL2024 @ OSC Nagaoka
sakaik
3
310
Microsoft 365 でデータセキュリティを強化しよう
sophiakunii
2
490
Automated Tests Now and Future @ SQiP Workshop Special Lecture 2024
teyamagu
PRO
2
530
新入社員 オンボーディング改善プロジェクト - シンプルな仕組みで変革のきっかけを
enpipi
0
520
KongによるAPIライフサイクル マネジメント
hashitokyo
1
160
JBoss EAPによるクラウドネイティブのススメ
chiroito
0
150
Featured
See All Featured
It's Worth the Effort
3n
183
27k
Side Projects
sachag
452
42k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4.1k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Building Applications with DynamoDB
mza
90
6k
For a Future-Friendly Web
brad_frost
174
9.4k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.7k
A Modern Web Designer's Workflow
chriscoyier
692
190k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
31
1.7k
Into the Great Unknown - MozCon
thekraken
31
1.4k
Transcript
CSS ઃܭ͜ͱ͡Ί ~ ΧΦεʹͳΔCSSʹզʑਓྨͲ͏ཱ͔͍͚ͬͯͪͬͯྑ͍ͷ͔ ~ Toro_Unit / 2016.8.19 @ΠυόλΧΠΪ Vol.2
2016.8.19 @ΠυόλΧΠΪ Vol.2 1
$ whoami 2016.8.19 @ΠυόλΧΠΪ Vol.2 2
Toro_Unit ෦ ߛ (͏Β ͻΖ͠) Web Designer / Front-end Engineer
/ WordPress Plugin Developer Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 2016.8.19 @ΠυόλΧΠΪ Vol.2 3
WordCamp Tokyo ࣮ߦҕһ / εϐʔΧʔͰ͢ 2016.8.19 @ΠυόλΧΠΪ Vol.2 4
WordBench 10/1ʹΔΑʂ ొஃऀ·ͩ·ͩืूதͰ͢!!! http://wbnagano.connpass.com/event/37529/ 2016.8.19 @ΠυόλΧΠΪ Vol.2 5
ͯ͞ຊɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 6
օ͞Μɺ ͜Μͳܦݧ͋Γ·ͤΜ͔ʁ 2016.8.19 @ΠυόλΧΠΪ Vol.2 7
• 1Ҏ্લʹೲͨ͠Ҋ݅ͷमਖ਼ґཔɻ • ୭͕ॻ͍ͨͷ͔ྑ͘ղΒͳ͍Ҿ͖ܧ͗Ҋ݅ɻ • 1ສߦΛ༨༟Ͱ͑ͯΔCSSɻ • ΄ͱΜͲɺίϐϖίʔυͷڰتཚɻ • ͔͠ࡉ͔͍ͱ͜Ζ͕গͣͭ͠ҧͬͯΔɻ
2016.8.19 @ΠυόλΧΠΪ Vol.2 8
ʮطଘͷCSSʁಡΊΔ͔ͦΜͳͷʂʯ 2016.8.19 @ΠυόλΧΠΪ Vol.2 9
• ૿৩͢ΔṖͷɺʮfix.cssʯ, ʮappend.cssʯ, ʮcustom.cssʯ, etc... • ͦͯ͠ੜ·ΕΔ important! ͷւɻ •
୭৮Εͳ͍ CSS ͷੜɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 10
2016.8.19 @ΠυόλΧΠΪ Vol.2 11
ผʹ͜Εͬͯɺ͜͜࠷ۙͷ͡Όແ͍ΑͶ ... 2016.8.19 @ΠυόλΧΠΪ Vol.2 12
ਓྨʮCSS͍͠ʂʯͱ͍͏͜ͱʹ͍͍Ճݮʹؾ͖ͮ͘ɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 13
ͩΕͩΑ!!! HTML/CSS؆୯ͩͱ͔ݴౕͬͨ!!! 2016.8.19 @ΠυόλΧΠΪ Vol.2 14
͔͠͠ɺͲΜͲΜߴԽ͍ͯ͘͠CSSͷཁٻɻ HTML/CSSWEBαΠτҎ֎ͰΘΕΔΑ͏ʹɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 15
͊͞ɺͲ͏͢Δʁ 2016.8.19 @ΠυόλΧΠΪ Vol.2 16
ͦͦͳͥCSSΧΦεʹͳͬͯ͠·͏ΜͩΖ͏ʁ 2016.8.19 @ΠυόλΧΠΪ Vol.2 17
ͨͱ͑͜ΜͳHTML <h1 class="title">αΠτͷλΠτϧ</h1> <main id="main-contents"> <h1 class="title">ϒϩάͷλΠτϧ</h1> <article class="post"> <header
class="headline"> <h1 class="title">هࣄͷλΠτϧ</h1> </header> </article> </main> 2016.8.19 @ΠυόλΧΠΪ Vol.2 18
CSSͬͯ؆୯! .title { color: red; } 2016.8.19 @ΠυόλΧΠΪ Vol.2 19
CSSͬͯ؆୯! .title { color: red; } .post .title { color:
orange; } 2016.8.19 @ΠυόλΧΠΪ Vol.2 20
CSSͬͯ؆୯????? .title { color: red; } #main-contents .title { color:
green; } .post .title { color: orange; /*্ॻ͖͞ΕΔɻɻɻ*/ } 2016.8.19 @ΠυόλΧΠΪ Vol.2 21
CSSͬͯ؆୯???????????????? .title {} #main-contents .title {} .post .title {} h1.title
{} main#main-contents article .title {} main#main-contents .headline h1 {} main article header h1.title {} main#main-contents .post:first-child h1 {} 2016.8.19 @ΠυόλΧΠΪ Vol.2 22
CSS ւԽͷݪҼͨͪ • ηϨΫλͱ͍͏άϩʔόϧͳมɻ • ࣮ߦ࣌(ͭ·ΓHTMLͷίϯςΩετ)ʹࠨӈ͞Ε·͘Δ • ޙ͔Βഁյతมߋ͕Մೳɻʢͨͩ͠ॻ͖ΘΔ͔Ͳ͏͔η ϨΫλͷڧ͞ʹґଘʣ 2016.8.19
@ΠυόλΧΠΪ Vol.2 23
CSS؆୯ʹॻ͚Δ͚ͲɺʮͪΌΜͱ ͨ͠CSSʯ͍ͬͯ͠ɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 24
ͪΌΜͱͨ͠CSSͱʁ • ༧ଌ͍͢͠ • ࠶ར༻͍͢͠ • อक͍͢͠ • ֦ு͍͢͠ CSS
Architecture — Philip Walton ຊޠ༁ 2016.8.19 @ΠυόλΧΠΪ Vol.2 25
CSSϓϩάϥϛϯάͷΑ͏ʹɺ ͪΌΜͱઃܭ͢Δ͜ͱ͕ॏཁɻ ʮͱΓ͋͑ͣσβΠϯ͕࣮ݱͰ͖ΕOKʯଔۀ͠Α͏ɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 26
Ͳ͏Δʁ 2016.8.19 @ΠυόλΧΠΪ Vol.2 27
1.ϚʔΫΞοϓʹґଘ͠ͳ͍ 2016.8.19 @ΠυόλΧΠΪ Vol.2 28
ͨͱ͑͜ΜͳHTMLͱCSS <section> <h1 class="title">λΠτϧ</h1> <p>ຊจ</p> </section> section .title { margin:
0 0 0.5em; font-size: 1.7em; } 2016.8.19 @ΠυόλΧΠΪ Vol.2 29
ϖʔδʹΑͬͯɺ<section> ͕ <article> ʹมΘͬͨΒ? .title ͬͯଞͰ͍ͦ͏ͩΑͶʁ 2016.8.19 @ΠυόλΧΠΪ Vol.2 30
ͨͱ͑͜͏͢Δɻ <section class="entry"> <h1 class="entry__title">λΠτϧ</h1> <p>ຊจ</p> </section> .entry {} .entry__title
{ margin-bottom: .5em; font-size: 1.7em; } 2016.8.19 @ΠυόλΧΠΪ Vol.2 31
2.ηϨΫλͷৄࡉՄೳͳݶΓ࠷খݶͰɻ ͨͱ͑͜ΜͳHTML <div class="main-contents"> <h1>ϖʔδλΠτϧ</h1> <section class="entry"> <h1 class="entry__title">λΠτϧ</h1> <p>ຊจ</p>
</section> </div> 2016.8.19 @ΠυόλΧΠΪ Vol.2 32
.main-contents h1 { margin-bottom: 1em; /*͕ͬͪ͜ద༻͞ΕΔ*/ } .entry {} .entry__title
{ margin-bottom: .5em; font-size: 1.7em; } ͋ͬΕʔʁ͓͔͍͠ͳ͊ɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 33
͜͏͢Δ!!! h1 { margin-bottom: 1em; } .entry {} .entry__title {
margin-bottom: .5em; /*͕ͬͪ͜ద༻͞ΕΔ!*/ font-size: 1.7em; } 2016.8.19 @ΠυόλΧΠΪ Vol.2 34
• .main-contents h1 ͱ͔ .main-contents p ͱ͔Γ͕ͪ ͚ͩͲɺͦΕͬͯຊจͷCSSͰ͢ΑͶɻͦΕͬͯͦͷϖʔδ ͷσϑΥϧτCSS͡Όͳ͍ʁ •
HTMLͷهड़ॴ࣍ୈͰ݁Ռ͕มΘΔͷࠞཚͷݩɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 35
3. ίϯϙʔωϯτࢦͳCSS entry.css .entry {} .entry__title {} .entry__title--featured {} .entry__body
{} 2016.8.19 @ΠυόλΧΠΪ Vol.2 36
• ίϯϙʔωϯτ͝ͱʹϑΝΠϧΛׂɻίϯϙʔωϯτͷ ׂΛ͖ͬΓͤ͞Δɻ • ଞͷίϯϙʔωϯτʹ৮Βͳ͍ɻ • CSS ϑΝΠϧ͕͍ͬͺ͍Ͱਏ͍ʁ Sass /
LESS / Stylus / postcss ͋ͨΓΛར༻͢Εྑ͍Μ͡Όແ͍Ͱ͠ΐ͏͔ʁ 2016.8.19 @ΠυόλΧΠΪ Vol.2 37
4.۩ମతͳίϯϙʔωϯτͳͲͷઃܭํ. υΩϡϝϯτΛॻ͍ͯྑ͍Ͱ͕͢ɺͲ͏ͤϝϯςφϯε͠ͳ ͘ͳΔΜͰɺެ։͞Ε͍ͯΔΞʔΩςΫνϟʔͳͲΛऔΓೖΕ Α͏ɻ • OOCSS / SMACSS / BEM
/ SUIT CSS / FLOCSS / ITCSS / ECSS ... • ͱΓ͋͑ͣɺOOCSSɾSMACSSɾBEM ͋ͨΓجຊతͳߟ ͑ํʹͳΔͷͰԡ͓͑ͯ͜͞͏ɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 38
ৄ͍͠... ʮWeb੍࡞ऀͷͨΊͷCSSઃܭͷڭՊ ॻʯ(ϝϩϯຊ)ʹ͍͍ͩͨશ෦ॻ͍ͯ͋ Γ·͢ʂ ҰՈʹҰ ! 2016.8.19 @ΠυόλΧΠΪ Vol.2 39
• CSSͷઃܭʹۜͷؙͳͲͳ͍ʂ • ઃܭΛߟ͑ͳ͕ΒཧɻৗʹϦϑΝΫλϦϯά͠ͳ͕Β ։ൃ͢Δ͠ɻ • WP-D Week Ͱ CSS
ͷΛ͠·ͨ͠ɻͦͯ͠ CSS ઃܭͱ෦ ͷআʹ͍ͭͯɻ – Toro_Unit 2016.8.19 @ΠυόλΧΠΪ Vol.2 40
ࢀߟࢿྉͳͲ • CSSઃܭͷཧͱݱ࣮ • ͳΜͰCSS͙͢ࢮΜͰ͠·͏Μ 2016.8.19 @ΠυόλΧΠΪ Vol.2 41
Thanks! Speaker Deck: https://speakerdeck.com/torounit Github / @torounit Twitter: @Toro_Unit Facebook:
fb.me/torounit Blog: https://torounit.com 2016.8.19 @ΠυόλΧΠΪ Vol.2 42